Cara Membuat Couter Box pada Widget Daftar Label

wahab

Widget

2015/10/13

2 Komentar

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

Pengelola Blog : ABDUL WAHAB

Judul : Cara Membuat Couter Box pada Widget Daftar Label
Ditulis oleh :Blog Shiro pada hari 2015/10/13
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Cara Membuat Couter Box pada Widget Daftar Label
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
https://fajriandaviar.blogspot.com/2013/10/counter-box-pada-widget-label.html
Dan Terima kasih sekali lagi atas kunjungannya.

Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.