Widget HTML Atas

Beranda / Blogging

Cara Memasang Tag Label Di Bawah Postingan Blogger

Oleh Admin Posting Komentar
 Pada kesempatan kali ini, saya akan share tutorial cara memasang tag label di bawah postingan blog.

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

Cara Membuat Tag Label Dibawah Postingan Blog

Cara Memasang Tag Label Di Bawah Postingan Blogger


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. Nah, jika anda tertarik untuk membuatnya, anda bisa mengikuti langkah-langkah dibawah ini.

Cara Memasang Tag Label Di Bawah Postingan Blog

Langkah 1 : masuk ke akun blogger.

Langkah 2 : masuk ke menu TEMA >> Edit HTML.

Langkah 3 : silahkan copy kode dibawah ini, lalu pastekan kode tersebut 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>

Langkah 4 : kemudian copy kode dibawah ini, lalu pastekan kode tersebut 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>

PENTING : Biasa nya kode <data:post.body/> lebih dari 1, maka anda masukan kode tersebut pada bagian kode <data:post.body/> yang ke 3.

Langkah 5 : Simpan.

Akhir Kata :

Itulah tutorial cara memasang tag label di bawah postingan blog, jika anda masih bingung, silahkan komentar dibawah ini.

Baca juga


Tidak ada komentar untuk "Cara Memasang Tag Label Di Bawah Postingan Blogger"

Posting Komentar

Berkomentarlah dengan baik dan sopan