Saturday, January 17, 2015

Trik Membuat Label Dengan Counter

widget label
cara membuat label dengan counter seperti pada contoh gambar..
saya dapatkan trik ini dari blog kang ismet ..
ini berfungsi untuk menampilkan jumlah postingan per label tapi dengan gaya yang menarik!!!
Langkah 1 : Buat widget Label, centang Tampilkan jumlah entri per label.

Langkah 2 : Simpan kode ini di atas ]]></b:skin> atau </style>

#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 atur kembali warna sesuai keinginan sobat.

CSS di atas tidak mutlak pada #Label1, apabila ada beberapa label pada template sobat silahkan pilih dan edit menjadi#Label2 atau #Label3 dst.

Langkah 3 : Pada Label terpilih, cari kode :

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

ganti mejadi 

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

Pada hasil akhir, apabila jumlah postingan lebih banyak maka akan lebih lebar seperti ini 123dibanding 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.


Anda Sedang Membaca Artikel Tentang Trik Membuat Label Dengan Counter Dan Artikel Ini URL Permalinknya Adalah http://muiztech.blogspot.com/2015/01/trik-membuat-label-dengan-counter.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner