Cara Membuat dan Memasang Label Tag di Bawah Postingan Blog

Pada kesempatan tutorial blogger kali ini, saya akan membagikan sebuah tutorial bagamana cara membuat dan memasang label tag dibawah postingan blog.

Jika kamu seorang penulis di platform blogger ataupun di platform wordpress tentunya kamu pasti tau apa itu label. Label merupakan kategori artikel yang telah kamu tulis dan publikasikan, dengan memasang label para pengunjung dapat dengan mudah menemukan kategori artikel yang serupa.

Memasang label tag dibawah postingan itu cukup mudah gak terlalu ribet, nah bagi kamu yang penasaran dan ingin mencoba menggunakannya kamu bisa ikuti tutorial yang ada diartikel ini, Yuk ikuti artikel ini hingga selesai.

Cara Membuat dan Memasang Label Tag diBawah Postingan Blog

1. Pertama login dulu ke Blogger,
2. Kemudian, pada dashboard Blogger, pilih Tema ⇒ Edit HTML,
3. Lalu, copy kode CSS dibawah ini dan letakkan tepat diatas kode </head>,

/* Label Tag By Anirocksite */
<style type="text/css">
.post-labels{margin-top:15px;float:left;display:block;width:100%;color:#fff}
  .post-labels span{margin:0 5px 5px 0;float: left;height: 24px; font-weight: 400; line-height: 25px; font-size: 12px;background: #ff69b4; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); border-radius: 100px; padding: 0 10px; color: #fff; text-decoration: none;}
.post-labels          a{font-family:&#39;Poppins&#39;,sans-serif;float: left;height: 24px; font-weight: 400; line-height: 25px; font-size: 12px; margin:0 5px 5px 0; background: #dadce0; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); border-radius: 100px; padding: 0 10px; color: #1b1c27; text-decoration: none;}
  .post-labels a:hover{background:#ffcce6}
</style>

4. Setelah meletakkan kode CSS, copy kan kode HTML dibawah ini dan letakkan tepat diatas kode </article>, itu agar label tagnya tepat diakhir postingan,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <span style='float: left;'>Tags</span><b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' rel='tag nofollow'><data:label.name/></a>
          </b:loop>
        </b:if>
      </span>
</b:if> 

5. Terakhir simpan/save template.

Nah itulah bagaimana cara membuat label tag diakhir postingan, caranya mudah bukan ? nah untuk Demonya kamu dapat melihat seperti yang ada di akhir artikel ini, sekian tutorial membuat label tag diakhir postingan yang dapat saya bagikan, dan tunggu aja lagi tutorial selanjutnya :D. Agar lebih cepat update kamu dapat melakukan request melalui contact form yang tersedia di Blog ini.