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
silahkan sesuaikan ukuran pixel sesuai selera sobat.
#Label1 li .label-counter
tambahkan ukuran fixed:width:25px
silahkan sesuaikan ukuran pixel sesuai selera sobat.
0 Response to "Membuat Counter Box pada Widget Label Keren"
Posting Komentar