Cara Memasang hashtag Label Dibawah Postingan Blog
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 == "item"'>
<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 + "?max-results=6"' expr:title='data:label.name' rel='tag nofollow'><data:label.name/></a>
</b:loop>
</b:if>
</span>
</b:if>
- Kalo sudah sesuai, tinggal save template kalian n lihat hasilnya :)
Cukup sekian dan terima kasih, semoga artikel tentang Cara Memasang Hashtag / Tags Label dibawah postingan blog ini bermanfaat ya :)
Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar :)
