Memasang Tag Label di Bawah Postingan

Sebelum ini ATAEH sudah men-share  tutorial tentang cara memasang tag permalink di bawah postingan, kali ini ATAEH akan share tutorial cara membuat atau menambahkan tag label di bawah postingan

Tags label di bawah postingan ini biasanya disebut juga sebagai hashtag. Yaitu tags yang menampilkan daftar label yang mempunyai keterkaitan dengan artikel tersebut.

Atau  tags label bisa juga disebut dengan Breadcrumb di bawah postingan. Cuma bedanya tags label tidak menyertakan judul dari artikel, namun hanya menampilkan judul dari labelnya saja.

Bagaimana cara membuat dan memasang Tag Label, hashtag atau Breadcrumb di bawah postingan ?

Simak penjelasan berikut :

1. Masuk ke akun blogger

2. Langsung menuju ke halaman Edit HTML

3. Cari kode ]]></b:skin> Lalu pastekan code di bawah ini tepat di atas kode  ]]</b:skin>

/*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}

Cari kode <data:post.body/> (mungkin akan kamu temukan kode tersebut lebih dari satu, biasanya kode yang kedua yang di maksud) Jika sudah, ganti kode tersebut dengan kode dibawah ini

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

Save dan lihat hasilnya.

Karena berbedanya gaya dan bentuk template, kadang Tags labelnya tidak sesuai keinginan penempatan yang kita kehendaki. Bisa jadi tampil di bawah related post, maka kalian tinggal pindahkan HTML di atas sesuai keinginan kalian.

Bagaimana, cukup mudah bukan?

Oia, Memasang Tag Label di bawah postingan ini bisa digunakan pada template yang Non AMP dan juga yang Valid AMP, karena dalam code scrip di atas tidak terdapat  javascript-nya

Sekian dulu ya...  Semoga artikel Memasang Tag Permalink di bawah postingan ini bermanfaat.

*Di kutip dari blog mastamvan