Memasang Tag Label di Bawah Postingan
Sebelum ini
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>
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
Save dan lihat hasilnya.
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
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 postinganTags 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 == "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>
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
Posting Komentar untuk "Memasang Tag Label di Bawah Postingan"