Advertisement
Membuat CSS untuk Widget Label Dengan Jumlah Postingan | Widget label ini sangat diperlukan pada sebuah blog untuk memberikan informasi kepada pengunjung berapa buah sudah artikel yang sudah kita postingkan didunia maya, widget label bawaan dari blogger masih terlihat sangat sederhana dan simple. dan hari ini saya ingin membuat widget label yang bagus dengan pengaturan jumlah postingan yang lebih teratur dan enak dipandang mata. belajar dari blog.kangismet.net dengan sedikit modifikasi saja untuk script nya.
Nah untuk Membuat Widget Label Dengan Jumlah Postingan silahkan ikuti langkah-langkah dibawah ini :
► Buka Dashboard → Layout → Buat Widget Label → Centang (CheckList) "tampilkan jumlah entri per label".
► Buka edit template → simpan kode dibawah ini di atas ]]></b:skin> atau </style>
Untuk warna bisa sobat atur sendiri pada CSS diatas, sesuaikan saja sesuai selera sobat.#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}
► Masih di edit template cari kode ini
<span dir='ltr'>(<data:label.count/>)</span>Sobat ganti dengan kode dibawah ini
<span class='label-counter'><data:label.count/></span>
Kode CSS diatas belum diatur untuk lebar counter postingannya, sehingga apabila jumlah postingan sobat lebih dari 100 maka angka 100 tersebut akan keluar dari garis, Untuk membuat ukuran yang pas dengan jumlah postingan, pada baris #Label1 li .label-counter tambahkan ukuran fixed :
width:30pxSilahkan sobat sesuaikan ukuran sesuai dengan template blog sobat, semoga bermamfaat,
Found an article helpful? Donate via Paypal
Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
<strong></strong>or<b></b>.<em></em>or<i></i>.<u></u>.<strike></strike>.<code></code>or<pre></pre>or<pre><code></code></pre>, and please parse the code in the parser box below.