Media informasi Entertainment, Tutorial Blogger, Blogger Template, Fakta Unik, Teknologi, And More

Search This Blog

Cara Membuat Couter Box pada Widget Daftar Label

Counter Box pada Widget Label
Cara Membuat Couter Box pada Widget Daftar Label - Halo sobat, seperti biasa kali ini saya akan membagikan sebuah artikel yang mudah-mudahan bermanfaat bagi sobat semua, yaitu bagaimana cara membuat counter box pada widget label, seperti yang kita tahu, widget label yang berada di blog mas DTE :], seperti itulah widget label yang akan kita buat, artikel ini saya dapat dari +Kang Ismet , dan saya sangat berterima kasih pada Kang Ismet yang selalu berbagi artikel yang bermanfaat bagi kita.

OK tidak perlu berbasa-basi lagi, kita langsung saja ketahap bagaimana cara membuat counter box ini pada widget label blog sobat, simak dan praktekan tutorial di bawah ini :

1. Buat Widget dahulu, dan centang Tampilkan jumlah entri per label

2. Masuk ke Template > Edit HTML > masukkan css berikut diatas ]]><b:skin>

#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 modifikasi tampilannya sesuai keinginan sobat.

Jika css diatas tadi tidak merubah Widget label sobat, gan ti #Label1 dengan #Label2 atau #Label3 dst.

3. Pada Label terpilih cari kode dibawah ini :

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


Hapus kode tersebut dan ganti dengan :

<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.
Sekian Tutorial saya hari ini, terima kasih atas kunjungannya, semoga bermanfaat dan selamat mencoba. Happy Blogging :).

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

Ditulis oleh: Pada :
Label : Tutorial Blogger

Post a Comment