Widget Label / Kategori Hitam Keren Dengan Jumlah Postingan Per Label dan Hover Effect

Dikesempatan kali ini Saya membagikan CSS dari widget label blogger, yang barangkali diantara Sobat sekalian ingin mengganti atau memberi gaya dari widget Kategori (Label) blognya. Kira-kira tampilan dari widget tersebut seperti dibawah ini

Caranya cukup mudah, simak tuturial berikut.

• Login ke akun Blogger, pilih blog, kemudian pilih Tata Letak pada menu sebelah kiri Blogger.
• Tambahkan gadget di tempat yang Sobat inginkan, bisa difooter atau disidebar,  pilih Label.
• Selelah itu atur widget, pilih Tampilkan Daftar, dan centang Tampilkan jumlah entri per label. Lalu simpan.
• Kemudian pilih menu Template pada menu sebelah kiri Blogger, kemudian klik Edit HTML.
• Lalu copy kode CSS tersebut diatas </head> , gunakan CTRL+F untuk mempercepat pencarian.

<style>
.Label{background: #234;}
.Label a{margin: 5px;color : #fff;font-size: 18px;padding: 5px;transition: all 0.3s ease;}
.Label a:hover{color:#397!important;}
.Label li:hover{transition: all 0.5s ease;background: #fff; }
.Label li:hover a,.sidebar-wrapper .Label li:hover .countpostlabel{color : #000;}
.Label li:hover .countpostlabel:after{font-size: 100%;} 
.Label .countpostlabel{color: #fff;background: transparent;border:5px double;float: right;padding: 0 5px;margin-top: -3px;transition: all 0.3s ease;}
.Label .countpostlabel:after{content:'POST';margin-left: 3px;font-size: 0%;transition: all 0.5s ease;}
</style>

• Untuk lebih memvariasi kan warna pada widget sesuai keinginan Sobat, gantilah value kode CSS color dan background, contoh : color: #fff diganti menjadi color: #000. Gunakan tool Color Generator untuk mengetahui kode warna.

Sekian pada tutorial kali ini, semoga ini dapat bermanfaat. Terima Kasih.