Cara Menciptakan Couter Box Pada Widget Daftar Label

Cara Membuat Couter Box pada Widget Daftar Label Cara Membuat Couter Box pada Widget Daftar Label

Cara Membuat Couter Box pada Widget Daftar Label - Halo sobat, menyerupai biasa kali ini aku akan membagikan sebuah artikel yang mudah-mudahan bermanfaat bagi teman semua, ialah bagaimana cara menciptakan counter box pada widget label, menyerupai yang kita tahu, widget label yang berada di blog mas DTE :], menyerupai itulah widget label yang akan kita buat, artikel ini aku sanggup dari +Kang Ismet , dan aku sangat berterima kasih pada Kang Ismet yang selalu menyebarkan artikel yang bermanfaat bagi kita.

OK tidak perlu berbasa-basi lagi, kita eksklusif saja ketahap bagaimana cara menciptakan 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 cita-cita sobat.

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

3. Pada Label terpilih cari instruksi dibawah ini :

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

Hapus instruksi tersebut dan ganti dengan :

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

Pada hasil akhir, apabila jumlah postingan lebih banyak maka akan lebih lebar menyerupai ini 123 dibanding yang lebih sedikit menyerupai ini 32. Untuk menciptakan ukuran yang sama, pada #Label1 li .label-counter tambahkan ukuran fixed :

width:25px

silahkan sesuaikan ukuran pixel sesuai selera sobat.
Sekian Tutorial aku hari ini, terima kasih atas kunjungannya, agar bermanfaat dan selamat mencoba. Happy Blogging :).

Resource : https://mamankdzgn.blogspot.com//search?q=