Menambah HashTag Label Di bawah Postingan Blog

Cara Memasang HashTag Label pada Postingan Blog

Pada kesempatan kali ini saya akan membagikan Tutorial tentang Cara Menambahkan hashtag atau daftar tag label terkait pada postingan blog. Tags di bawah postingan blog ini bisa juga disebut sebagai hashtag yang menampilkan daftar label yang telah anda bagi terkait pada artikel tersebut.

istilah lainnya disebut Breadcrumb postingan blog yang tidak menyertakan judul dari artikel tersebut, melainkan hanya menampilkan judul dari labelnya saja.

untuk mencoba memasang Breadcrumb, hashtag atau label terkait dibawah postingan blog, bisa ikuti panduan dari tutorial singkat berikut ini. 


Berikut Cara Memasang hashtag, Breadcrumb atau label terkait dibawah postingan blog :


1. silahkan buka Blogger > Template > Edit HTML > Kemudian cari kode </head>, selanjutnya copykan kode CSS berikut 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>

Anda juga bisa mengubah warna background atau text  menggunakan kode warna pada link HTML Color Code & Name
Apabila sudah selesai simpan Tema.

2. Apabila code sudah ditambah, selanjutnya cari kode </article> & masukan kode HTML berikut ini tepat diatasnya⏫, atau bisa juga di letakkan di bawah postingan seperti pada blog saya dengan menambahkan di bawah⏬ <div class='post-footer'>.

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

3. Selanjutnya tinggal simpan template