Modifikasi Count Label Dengan Css

Modifikasi Count Label Dengan Css - Kali ini kita akan berhadapan lagi dengan widget Bawaan Blogger yang banyak fungsinya , yakni Widget Label atau Category . Setelah sebelumnya saya sempat share Count Label dengan jQuery plus Slide animasi yang keren , sekarang kita hanya akan memodifikasi bagian Count Label i Label list style .

Sebagai contoh , lihat gambar dibawah ini saja .

Jika anda pernah mengunjungi DTE pasti sudah tidak asing lagi dengan tampilan label begini .

Nah kalau anda ingin membuat tampilan label plus Count Lebel seperti gambar diatas , silahkan ikuti tutorialnya dibawah ini .

Cara Membuat Count Label Css
Step 1:
1. Masuk ke Menu Layout pada Blogger
2. Tambah gadget dan pilih Label
3. Centang tampilkan jumlah Post

Step 2:
1. Masuk ke menu template
2. Edit HTML
3. Cari kode ]]></b:skin>
4. Letakkan Css dibawah ini tepat diatasnya

#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}

Untuk warna silahkan atur kembali sesuai dengan keinginan dan kecocokan template anda .

Advanced Setting :
Jika anda punya lebih dari satu label di blog anda , anda bisa menambahkan Css pada label-label tersebut . Misal #Label2 , #Label3 dan seterusnya .

Step 3:
Pada label terpilih , cari kode

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

Kemudian ganti dengan

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

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

width:25px;

Silahkan sesuaikan ukuran pixel sesuai selera anda.

resource: http://blog.kangismet.net/2013/10/membuat-counter-box-pada-widget-label.html