memberi tanda tautan pada judul posting Tautan

12 Feb 2015

   Kalau postingan sebelumnya tentang fungsi beda read more pada post home page. Sekarang bahas kelanjutan nya yaitu memberi tanda judul postingan di home page yang sudah ada tautan nya. sebelum masuk editor template sebaikanya masuk ke setelan blog dulu atau lihat gambar di bawah ini

Selesai masuk setelan blog, lanjutkan ke edit template

1234567891011121314.tautan {
  font-family:inherit;
  font-weight:bold;
  color:tomato;
  position:absolute;
  font-size:12px;
  right:5px;
  top:9px;
  padding:1px 5px;
  border:1px solid tomato;
  text-transform:uppercase;
  border-radius:5px;
  line-height:16px
}

Karena kode css di atas berada pada tag kondisional home page, maka kode nya seperti ini

123456789101112131415161718<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.tautan {
  font-family:inherit;
  font-weight:400;
  color:tomato;
  position:absolute;
  font-size:12px;
  right:5px;
  top:9px;
  padding:1px 5px;
  border:1px solid tomato;
  text-transform:uppercase;
  border-radius:5px;
  line-height:16px
}
</b:if>
</b:if>

Pada elemen post cari tag H2, Kode kurang lebih seperti ini

12345678910111213141516171819<h2 class='post-title entry-title' itemprop='name headline'>
   <b:if cond='data:post.link'>
      <a expr:href='data:post.link' itemprop='url'>
         <data:post.title/>
      </a>
<b:else/>
<b:if cond='data:post.url'>
  <b:if cond='data:blog.url != data:post.url'>
     <a expr:href='data:post.url' expr:title='data:post.title' itemprop='url'>
        <data:post.title/>
     </a>
<b:else/>
   <data:post.title/>
</b:if>
<b:else/>
   < data:post.title/>
</b:if>
   </b:if>
</h2>

Selipkan sebaris kode markup ini pada tag H2 tadi

123<span class='tautan'>Tautan</span>
atau di bawah ini, pilih salah satu
<mark class='tautan'>Tautan</mark>

Sehingga kode markup pada tag H2 kurang lebih seperti ini

1234567891011121314151617181920<h2 class='post-title entry-title' itemprop='name headline'>
   <b:if cond='data:post.link'>
      <a expr:href='data:post.link' itemprop='url'>
         <data:post.title/>
      </a>
  <span class='tautan'>Tautan</span>
<b:else/>
<b:if cond='data:post.url'>
  <b:if cond='data:blog.url != data:post.url'>
     <a expr:href='data:post.url' expr:title='data:post.title' itemprop='url'>
        <data:post.title/>
     </a>
<b:else/>
   <data:post.title/>
</b:if>
<b:else/>
   < data:post.title/>
</b:if>
   </b:if>
</h2>

Untuk urusan edit template sudah selesai... Sekarang kita beralih pada edit post / post baru atau lebih gampang lihat gambar di bawah ini saja

Dan hasil akhirnya akan seperti gambar di bawah ini. Untuk tanda tautan nya saya bikin yang sederhana saja, silahkan tanda tautan di bikin sebagus mungkin

css - html

Taufik 22.03