Memasang Tag Label Di bawah Postingan

Tags di bawah postingan blog ini mungkin bisa juga disebut sebagai hashtag yang akan menampilkan daftar label apa saja yang terkait di dalam artikel tersebut..

Mungkin bisa juga disebut dengan Breadcrumb dibawah postingan blog tapi tidak menyertakan judul dari artikel tersebut, melainkan hanya menampilkan judul dari labelnya saja..

Bagi kalian yang ingin mencoba memasang Breadcrumb, hashtag atau label terkait dibawah postingan blog, bisa ikuti tutorial singkat berikut ini..

Cara Memasang hashtag, Breadcrumb atau label terkait dibawah postingan blog

• Seperti biasa, kalian wajib masuk dulu ke blogger.com

• Setelah login Pilih Menu Template, EditHTML, Terus Cari Kode </head>

• Kalo sudah ketemu, kalian masukan css 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>

• Kalo sudah, selanjutnya kalian cari kode </article>

• Kalo sudah ketemu, masukan HTML dibawah ini tepat diatasnya

<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 Tags labelnya tidak sesuai misal tampil di bawah related post, kalian tinggal pindahkan html di atas sesuai keinginan kalian..

• Kalo sudah sesuai, tinggal save template kalian n lihat hasilnya :)

Sumber : https://mastamvan.blogspot.com/