Memasang Tag Label Di Bawah Postingan Blog

Cara Memasang hashtag Laleb Dibawah Postingan Blog Cara Menambahkan hashtag atau daftar tag label terkait dibawah postingan blog . Hallo t...

A+ A-
membuat-hashtag-label-di-bawah-postingan

Cara Memasang hashtag Laleb Dibawah Postingan Blog

Cara Menambahkan hashtag atau daftar tag label terkait dibawah postingan blog. Hallo teman bloger yg tamvan, kali ini aku akan share tutorial cara menambahkan tags label terkait dibawah postingan blog..

Tags di bawah postingan blog ini mungkin dapat juga disebut sebagai hashtag yang akan menampilkan daftar label apa saja yang terkait di dalam artikel tersebut..

Mungkin dapat juga disebut dengan Breadcrumb dibawah postingan blog tapi tidak menyertakan judul dari artikel tersebut, melainkan hanya menampilkan judul dari labelnya saja..

Bagi kalian yang ingin mencoba memasang Breadcrumb, hashtag atau label terkait dibawah postingan blog, dapat ikuti tutorial singkat berikut ini..

Cara Memasang hashtag, Breadcrumb atau label terkait dibawah postingan blog


  • Seperti biasa, kalian wajib masuk dulu ke blogger.com
  • Setelah login Pilih Menu Template, EditHTML, Terus Cari Kode </head>
  • Kalo sudah ketemu, kalian masukan css dibawah ini sempurna 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> 
  • Kalo sudah, selanjutnya kalian cari instruksi </article>
  • Kalo sudah ketemu, masukan HTML dibawah ini sempurna diatasnya
  •  <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 Tags labelnya tidak sesuai misal tampil di bawah related post, kalian tinggal pindahkan html di atas sesuai harapan kalian..
  • Kalo sudah sesuai, tinggal save template kalian n lihat balasannya :)

Cukup sekian dan terima kasih, biar artikel perihal Cara Memasang Hashtag / Tags Label dibawah postingan blog ini bermanfaat ya :)

Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar :)

Related

Widget 2684383098103470956

Technology

Hot in week

Recent

Comments

item