Membuat CSS Jumlah Entri Pada Widget Label

Membuat CSS Jumlah Entri Pada Widget Label – Beberapa waktu lalu saya sedikit pontang-panting dalam membuat tampilan label seperti yang tertera pada widget dropdown disamping artikel ini. Di mesin pencari yang ramai dibahas hanyalah “Bagaimana Cara Menghapus Jumlah Nomor Pada Widget Label”, jika anda penasaran silahkan cek dengan keywords yang diberi tanda petik tersebut. Beberapa tutorial yang disuguhkan dari blog hasil blogwalking namun tidak memenuhi keingin saya. Lalu nampaklah sebuah tutorial hasil di mesin pencari dengan sedikit aneh pada bagian judulnya. Lagi-lagi blog Kang Ismet memberikan solusinya, dan kali ini saya share kembali tentunya dengan sedikit tambahan CSS.

Bagi anda yang ingin menerapkannya, silahkan ikuti langkah-langkah di bawah ini:
Langkah 1 : Buat widget Label, lalu centang Tampilkan Jumlah Entri Per Label
Langkah 2 : Simpan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* label css */
#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}

Jika ada beberapa label pada blog Anda silahkan edit sesuai label yang ingin dirubah CSSnya menjadi #label1 atau #label2 atau #label3 dst.

Langkah 3 : Pada label yang dipilih, cari kode

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

Ganti dengan

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

Langkah 4 : Simpan template Anda, dan lihat hasilnya.

Silahkan rubah warna background dan font sesuai keinginan.
Demikian tutorial Membuat CSS Jumlah Entri Pada Widget Label, mudah-mudahan dapat membuat tampilan template blog anda semakin kren dan unyu.

Source: http://blog.kangismet.net/2013/10/membuat-counter-box-pada-widget-label.html

Baca Juga: