Tautan

   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

memberi tanda tautan pada judul posting

Selesai masuk setelan blog, lanjutkan ke edit template
.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
<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
<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
<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
<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

memberi tanda tautan pada judul posting home page,

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

hasil akhir tanda tautan yang sangat sederhana sekali

8 komentar

  1. ooo...ternyata begitu cara buatnya....xixixi

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. ada yang lebih simpel cara buatnya, dlu aku buatnya kayak gini ,,

    <b:if cond='data:post.url == &quot;url_yang_dimaksud&quot;'>
    <h2 itemprop='name headline'>
    <a href='url_tautan'>
    <data:post.title/>
    </a>
    <mark class='tautan'>Tautan</mark></h2>
    <b:else/>
    <h2 itemprop='name headline'>
    <a expr:href='data:post.url' expr:title='data:post.title'>
    <data:post.title/>
    </a>
    </h2>
    </b:if>

    BalasHapus
    Balasan
    1. tujuan sama, cuman cara nya saja yang berbeda...
      terima kasih sudah menambah perbendaharaan cara memberi tanda tautan pada judul posting

      Hapus
    2. iya, tapi mending pake cara punya mas, soalnya nggak perlu lagi edit HTML template sesudah membuat tautan baru. hehe

      Hapus
    3. saya hanya menggunakan selektor bawaan blogger aja, dan tampilan pun saya bikin sesederhana mungkin, yang penting fungsi dari tanda tautan tersebut

      Hapus

Terima kasih atas kunjungan nya dan Gunakan tag seperlunya

Tag kode pendek <i rel="code">KODE ANDA</i>
Tag kode panjang <i rel="pre">KODE PANJANG ANDA</i>
Tag gambar <i rel="image">URL GAMBAR</i>
Tag judul <b rel="h3">JUDUL ANDA DI SINI...</b>
Tag huruf tebal <b>TEKS ANDA DI SINI...</b>
Tag huruf miring <i>TEKS ANDA DI SINI...</i>

Konversi Code