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=