Cara Membuat Label Hashtag Keren di Blog | CSS Blogspot Keren

Cara Membuat Label Hashtag Keren di Blog - Jenuh atau bosan dengan label blog kalian yang tampilannya hanya begitu-gitu saja? Mari, saatnya kalian merubah label tersebut agar terlihat lebih menarik dan elegan.

Sebelum masuk ke menu pembahasan kali ini, alangkah baiknya terlebih dahulu kita mengenal label tersebut dan juga fungsinya.

Apa sih fungsi dan kegunaan label pada blog? Simak berikut dibawah ini:

Fungsi label di blog yaitu untuk mengelompokan artikel kedalam satu topik atau menu bahasan tertentu, sehingga dapat memudahkan setiap pengunjung untuk menemukan artikel yang cocok dan sesuai dengan topik label tersebut.

Dapat disimpulkan bahwa, dengan adanya sebuah label pada blog, maka kita tidak perlu bersusah payah membuat beberapa halaman untuk mengelompokan artikel yang ada. Kenapa? Karena setiap label yang telah kita buat itu akan secara otomatis mengarah pada halaman label tersebut, apabila kita mengkliknya.

Simak langkah-langkahnya di bawah ini:

Cara Membuat Label Keren di blog

Langkah pertama yang harus kita lakukan yaitu, cari kode </head> pada template blog yang kalian gunakan.

1.Masuk ke menu dashboard blogger kalian -> Click Tema -> Edit Html.
2.Lalu carilah kode </head>
3.Setelah itu kalian copy paste CSS dibawah ini, dan letakan tepat di atas kode </head> tersebut.

<style type='text/css'>
/*Post Label*/
.post-labels{float:left;display:block;width:100%;color:#999;margin-right:8px}
.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:#fff;border-style:solid;border-width:12px 12px 12px 0}
.post-labels a:after{content:"#";position:absolute;top:0;left:-1px;float:left;width:0;height:0;border-radius:none;color:#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>

Note:

Gantilah kode warna pada CSS di atas sesuai dengan selera kalian masing-masing agar lebih memberi kesan yang menarik.

Langkah selanjutnya adalah,
Cari kode <b:includable id='postdateinfo' var='post'> Sampai Dengan..
</b:includable> atau terserah kalian mau ditempatkan dimana.
Copy paste kode dibawah ini dan letakan tepat dibawah postdateinfo seperti kode diatas.

<b:includable id='postlabelinfo' var='post'>
 <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <span style='float: left;font-weight:bold;'><em>Tags:</em> </span>
  <b:loop values='data:post.labels' var='label'>
 <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
  </b:loop>
</b:if>
  </span>
</b:includable>

Jika di tema blog kalian sudah ada kode labelnya, kalian bisa ganti dengan kode label diatas atau merubahnya sedikit.

Nah bagaimana menurut kalian, mudah bukan?
Mudah-mudahan dengan artikel ini, bisa memecahkan masalah kalian yang sedang mencari atau ingin merubah dan membuat label yang keren di blog kalian.
Apabila ada pertanyaan seputar pembahasan kali ini, silahkan berkomentar dengan bijak di blog ini.

Demikianlah Cara Membuat Label Keren Di Blogger Blogspot full tutorial.

Virm Aditya

Berita teknologi informasi terkini

Share this post