Cara Membuat Counter Box pada Widget Label - Saya sangat kualahan memikirkan judul post yang satu ini semoga sobat mengerti maksud dari judul post ini, dan semoga sobat jadi nambah faham melihat thumbnail di samping.
Mungkin sobat sudah melihat laber seperti gambar tadi, bagos tak bagusnya itu menurut sobat sendiri.
Bagi sobat yang mau menerapkannya, 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.
