[UPDATE] Cara memasang tag label keren dibawah postingan blog terbaru ✓

Cara-membuat-tag-label-keren-dibawah-postingan-blog


[UPDATE] Cara memasang tag label keren dibawah postingan blog terbaru ✓ - hello sobat blogger, pada pembahasan sebelumnya Mas arif, sudah membahas tentang Cara membuat scroll box keren dan terbaru di dalam postingan blog, Pada kesempatan kali ini saya akan share tentang tutorial cara membuat atau memasang tag label dibawah postingan blog.

Tetapi sebelum saya share tutorial nya, saya ingin menjelaskan terlebih dahulu manfaat dan pengertian dari Tag Label tersebut.

Pengertian Tag Label

Menurut saya pribadi, tag label merupakan sebutan dari kata hastag, yang dimana akan memberikan sebuah kata kunci pada label tersebut.

Hanya saja beda nya tag label ini tidak memberikan judul ataupun tulisan artikel, melainkan hanya memberikan sebuah nama label dari artikel tersebut.

Manfaat dari Tag Label

Untuk manfaat nya banyak sekali, salah satu nya adalah dapat meningkatkan pengunjung blog.

Bukan hanya untuk meningkatkan pengunjung saja, tetapi manfaat dari tag label juga bisa untuk membuat artikel kita muncul dihalaman pertama.

Maka dari itu manfaat dari tag label ini juga sangat berpengaruh terhadap blog anda.

Lalu bagaimana cara memasang tag label dibawah postingan tersebut ?

Untuk membuat atau memasang nya cukup mudah, kalian bisa simak dibawah ini untuk membuat atau memasang nya.
  • Masuk ke akun Blogger.
  • Jika sudah masuk, maka langkah selanjutnya adalah kalian menuju ke halaman EDIT HTML.
  • Jika sudah maka langkah selanjutnya adalah kalian cari kode </head>.
  • Jika kalian sudah menemukan kode tersebut, maka langkah selanjutnya adalah kalian pastekan kode dibawah ini tepat diatas kode </head>.

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

  • Jika sudah kalian pastekan, maka langkah selanjutnya adalah kalian cari kode <data:post.body/>, biasanya kode tersebut ada 3 maka kalian cari kode <data:post.body/> yang ke 3.
  • Jika sudah ketemu maka langkah selanjutnya adalah kalian pastekan kode dibawah tepat dibawah kode <data:post.body/>.

<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 langkah diatas sudah diterapkan, maka langkah selanjutnya adalah simpan dan lihat hasilnya.

KESIMPULAN

Biasa nya kode  <data:post.body/> lebih dari satu, maka dari itu cari kode  <data:post.body/> yang paling akhir agar tag label tersebut muncul dibawah postingan. Itulah beberapa cara membuat atau memasang tag label keren dibawah postingan blog, semoga artikel ini bermanfaat untuk kalian semua dan terimakasih sudah berkunjung di blog kami ini.

Buka Komentar

0 Response to "[UPDATE] Cara memasang tag label keren dibawah postingan blog terbaru ✓"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel