Membuat Counter Box pada Widget Label Keren

Widget Label dengan Counter Box - Bingung sebenernya saya membuat judul yang pas untuk postingan ini, semoga saja sobat faham maksud saya dengan melihat thumbnail di samping. Intinya membuat jumlah postingan pada label dengan style yang berbeda.

Mungkin sobat sering melihat Widget Label dengan counter seperti itu. Saya pribadi pertama menemukan di DeluxeTemplates.net, kemudian diPremiumBlogTemplates.com dan di DTE.

Bagi sobat yang mau menerpkannya, berikut langkah-langkahnya :

Langkah 1 : Buat widget Label, centang Tampilkan jumlah entri per label.

Langkah 2 : Simpan kode ini di atas ]]></b:skin> atau </style>

#Label1 li a {color: #2c3e50;text-decoration:none;}
#Label1 li a:hover, #Label2 li a:active, #Label1 li a:focus {color: #20aea6;text-decoration:none;}
#Label1 li .label-counter {float:right;background-color:#20aea6;color:#fff;line-height:1;margin:2px 0 0;padding:3px 5px;border-radius:2px;text-align: center;font-size:12px;}
#Label1 li:hover .label-counter {background-color:#255e96;color:white}

Silahkan atur kembali warna sesuai keinginan sobat.

CSS di atas tidak mutlak pada #Label1, apabila ada beberapa label pada template sobat silahkan pilih dan edit menjadi#Label2 atau #Label3 dst.

Langkah 3 : Pada Label terpilih, cari kode :

<span dir='ltr'>(<data:label.count/>)</span>

ganti mejadi 

<span class='label-counter'><data:label.count/></span>

Pada hasil akhir, apabila jumlah postingan lebih banyak maka akan lebih lebar seperti ini 123 dibanding yang lebih sedikit seperti ini 32. Untuk membuat ukuran yang sama, pada #Label1 li .label-counter tambahkan ukuran fixed:

width:25px

silahkan sesuaikan ukuran pixel sesuai selera sobat.

Tweet