• Translate

5/06/2015

Membuat CSS untuk Widget Label Dengan Jumlah Postingan

Tutorial Blogspot |
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. 

Membuat CSS untuk Widget Label Dengan Jumlah Postingan

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".
Configuration on Label
► Buka edit template → simpan kode dibawah 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}
Untuk warna bisa sobat atur sendiri pada CSS diatas, sesuaikan saja sesuai selera sobat.

► 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:30px
Silahkan sobat sesuaikan ukuran sesuai dengan template blog sobat, semoga bermamfaat,
Loading...

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

2 comments Add Comment

mantab bingits

Reply

terimakasih.. belum mantap-mantap x gan =D

Reply

Comments not appropriate topic will sign SPAM.

Loading...