07 February 2014

Membuat Counter Box pada Widget Label

Counter Box

Membuat Counter Box pada Widget Label di Blog - Mungkin sobat sering melihat Widget Label dengan counter seperti itu. Saya pribadi pertama menemukan di DeluxeTemplates.net, kemudian di PremiumBlogTemplates.com dan di DTE.

Bagi sobat yang mau menerpkannya, berikut langkah-langkahnya :

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#Label2atau #Label3 dst.

Langkah 3 : Pada Label terpilih, cari kode :

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

<span class='label-counter'><data:label.count/></span>
Pada hasil akhir, apabila jumlah postingan lebih banyak maka akan lebih lebar seperti ini 123 dibanding 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.

Semoga Bermanfaat....

 Jangan Lupa Klik Tombol Like dan Tombol Share Yaa... 




Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic