Cara Membuat Label Hashtag Keren Di Blogger Blogspot
Penerbit: ( Seo Techman )

Cara Membuat Label Hashtag Keren Di Blogger Blogspot


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

Sebelum masuk kemenu pembahasan kalin 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:

Apa hal pertama yang harus kita buat? Yang pertama yaitu, cari kode </head> pada template blog yang kalian gunakan.

Caranya adalah:
1.Masuk kemenu dashboard blogger kalian -> Click Tema -> Edit Html.
2.Lalu carilah kode </head>
3.Setelah itu kalian copy paste script CSS dibawah ini, dan letakan tepat diatas 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>
Gantilah kode warna pada CSS diatas 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 diblog kalian.
Apabila ada pertanyaan seputar pembahasan kali ini, silahkan berkomentarlah dengan bijak diblog ini.

Demikianlah cara membuat label hashtag keren di blogger blogspot full tutorial. Jangan lupa subscribe blog ini, untuk mendapatkan info menarik lainnya.

Tanpa mengurangi rasa hormat saya kepada semua pembaca, saya ucapkan terimakasih.

Load comments