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 TemaEdit 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.

Seseorang yang membenci kerumitan namun nekat mempelajari kerumitan tersebut jika dirasa menarik.
Facebook Instagram Twitter
Show Comments!
Hide comments

5 Responses to "Cara Membuat dan Memasang Label Tag di Bawah Postingan Blog"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. Gmna caranya min biar tampilan label di bagian atas postigan (bagian breadcrumb) hanya tampil satu label saja, sedangkan label di bagian bawah ada beberapa.. seperti di blog iniπŸ™

    ReplyDelete
    Replies
    1. Gunakan data:first.label.name

      Untuk membuat label dibawah postingan udah saya post, silahkan cari di menu blogger πŸ™

      Delete
  2. Bisa lebih spesifik lagi min yg mana yg perlu di ganti, msih belum paham�� / apakah cuma disembunyikan menggunakan css.

    Agar tampilan breadcrum label yang di atas postingan hanya tampil 1 label saja. Contohnya seperti blog mimin ini. Thx...

    ReplyDelete
    Replies
    1. Kalau yang dilabel Tag akhir postingan bisa dengan CSS, tapi kalau breadcrumbs cari kode ini <data:label.name/> ganti ke <data:post.first.label.name/>

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2017 - 2020 Anirock Site - All Rights Reserved Created With