Membuat CSS Jumlah Entri Pada Widget Label - Kali ini saya akan membahas tentang pemberian jumlah entri pada widget di blog dengan menggunakan CSS , dalam widget label pada blog yang default pada umunya belum ada jumlah entri , maka dari itu saya akan memabagikan tutorialnya . oh ya untuk demo anda bisa lihat gambar di bawah ini :
Langsung saja berikut Cara Membuat CSS Jumlah Entri Pada Widget Label :
- Langkah pertama adalah anda harus memasang widget label terlebih dahulu
- Setelah anda memasang widget labelnya , kemudian pasang CSS dibawah ini tepat di atas ni tepat di atas kode
]]></b:skin> atau </style>
/* Widget label css keren*/
#Label1 ul {list-style:none;padding:0;margin:0;color:#999}
#Label1 li {border-bottom:1px solid #222;border-top: 1px solid #444; list-style:none;margin:0;padding:0}
#Label1 li:first-child { border-top: 0; }
#Label1 li:last-child { border-bottom: 0; }
#Label1 li a {color: #eee;text-decoration:none;list-style: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:#444;color:#eee;line-height:1.2em;margin:2px 0 0;padding:3px 5px;border-radius:4px;text-align: center;font-size:12px;min-width:27px}
#Label1 li:hover .label-counter {background:#20aea6;color:#ddd}
- Kemudian langkah selanjutnya sobat cari kode
<span dir='ltr'>(<data:label.count/>)</span>
- Ganti kode di atas dengan kode dibawah ini
<span class='label-counter'><data:label.count/></span>
- Simpan template dan lihat hasilnya :)
Oh ya , sobat juga dapat merubah warna background dan font atau lainya sesuai keinginan anda Pada CSS di atas ( label ini merupakan label yang digunakan oleh mbang taufiqurrohman di template DTE )