Cara Memasang Tag Label Keren Di Bawah Postingan Blog

cara memasang tag label keren

Tag Label biasanya di gunakan Seorang blogger untuk memudahkan pengunjungnya melihat apa kategori label yang sedang ia baca, Jadi dengan adanya tags label visiotor akan lebih menegerti dan memahami label apa yang terkait dalam postingan yang sedang dibaca.

namun jika label dilihat dengan apa adanya dan biasa-biasa saja akan membuat pengunjungnya bosan dan tidak menarik nah dengan itu putarmuter akan membagikan Cara Memasang Tags Label Keren Di Bawah Postingan Blog.


Baca juga :  Cara Membuat Tabel Responsif Di Postingan Blog


tentunya itu gampang sekali kita hanya perlu menerapkan dua kode yaitu CSS dan HTML, Oke langsung saja kita ke tutorialnya..


Cara Memasang Tags Label Keren
  • Pertama masuk ke Blogger 
  • Kemudian buka menu Tema > Edit HTML 
  • Setelah masuk kemudian kalian cari kode </head>
  • Dan masukkan kode dibawah ini tepat diatasnya

<style type='text/css'>
/*Post Label*/
.post-labels{float:left;display:block;width:100%;color:#999}
.post-labels a{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-left:12px;padding:0 10px;background:rgba(0,0,0,0.25);color:#fff;text-decoration:none;border-bottom-right-radius:3px;border-top-right-radius:3px}
.post-labels a:before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent rgba(0,0,0,0.25) transparent transparent;border-style:solid;border-width:12px 12px 12px 0}
.post-labels a:after{content:"";position:absolute;top:10px;left:-1px;float:left;width:4px;height:4px;border-radius:2px;background:#fff;transition:all .3s}
.post-labels a:nth-child(1){background:#ca85ca}
.post-labels a:nth-child(1):before{border-color:transparent #ca85ca transparent transparent}
.post-labels a:nth-child(2){background:#e54e7e}
.post-labels a:nth-child(2):before{border-color:transparent #e54e7e transparent transparent}
.post-labels a:nth-child(3){background:#61c436}
.post-labels a:nth-child(3):before{border-color:transparent #61c436 transparent transparent}
.post-labels a:nth-child(4){background:#f4b23f}
.post-labels a:nth-child(4):before{border-color:transparent #f4b23f transparent transparent}
.post-labels a:nth-child(5){background:#46c49c}
.post-labels a:nth-child(5):before{border-color:transparent #46c49c transparent transparent}
.post-labels a:nth-child(6){background:#607ec7}
.post-labels a:nth-child(6):before{border-color:transparent #607ec7 transparent transparent}
.post-labels a:nth-child(7){background:#ca85ca}
.post-labels a:nth-child(7):before{border-color:transparent #ca85ca transparent transparent}
.post-labels a:nth-child(8){background:#e54e7e}
.post-labels a:nth-child(8):before{border-color:transparent #e54e7e transparent transparent}
.post-labels a:nth-child(9){background:#61c436}
.post-labels a:nth-child(9):before{border-color:transparent #61c436 transparent transparent}
.post-labels a:nth-child(10){background:#f4b23f}
.post-labels a:nth-child(10):before{border-color:transparent #f4b23f transparent transparent}
</style>

  • Jika sudah kalian masukkan, tinggal masuk ke pemasangan HTML
  • Gampang saja kalian tinggal cari kode  <data:post.body/> Biasanya akan ada tiga kode tersebut, maka pilih saja yang ke-tiga
  • Kemudian masukkan kode dibawah ini tepat di bawahnya atau setelahnya 


<b:if cond='data:blog.pageType == &quot;item&quot;'> <span class='post-labels'> <div id='maia-signature'/> <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>

  • Jika langkah-langkah diatas diikuti dengan benar tinggal Save Template


Nah begitulah Akhir dari tutorial blogger kali ini, Dan bagimana hasilnya? Menarik bukan. Sekian dengan artikel kali inisemoga bermanfaat, Terimakasih [putarmuter].

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel