Cara membuat widget popular post menggunakan CSS3 dan angka secara otomatis.

Ketika blogger merilis kembali widget Popular Post pada tahun 2011, kita telah mendapat bocoran stylesheetnya sehingga Anda dapat menyesuaikan dan memadukannya dengan sempurna ke template BlogSpot Anda.  

Hari ini kita akan belajar bagaimana untuk menampilkan daftar postingan populer (Popular Post) menggunakan penambahan properti CSS3 secara otomatis. Anda dapat menambahkan 2 macam style number, diantarnya dalam bentuk persegi / persegi empat dan bundar. Anda dapat melihat live demonya pada sidebar blog saya atau pada gambar diatas.

Mari kita menambahkan efek ini di blog dan langkah-langkahnya pun cukup mudah, efek ini murni CSS3 tanpa menggunakan JavaScript.

Widget Populer post adalah sebuah tool (alat) yang efektif untuk meningkatkan page view blog Anda dan melibatkan lebih banyak pembaca di blog.

Menambahkan widget populer post

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Tata letak -> Tambah gadget -> Pilih Entri populer dari daftar
• Anda perlu untuk mengkonfigurasi pengaturan seperti yang ditunjukkan pada gambar di bawah: jangan centang "thumbnail gambar" dan juga "cuplikan" lebih baik lagi yang akan Anda tampilkan sekitar 7-9 postingan.

 

• Kemudian simpan..

Mengubahsuaikan plugin popular post 

• Masuk ke akun blogger anda kemudian pilih -> Template -> Edit HTML
• Cari tag/kode ]]></b:skin>  
• Berikutnya kopi dan pastekan kode CSS dibawah ini tepat diatas kode ]]></b:skin> 

.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}

.popular-posts ul li a:hover {
text-decoration:none;
}

Kustomisasi

• Untuk mengubah warna latar belakang (background) persegi empat/bundar silahkan edit #292D30 
• Untuk mengubah warna text silahkan edit  #ffffff 
• Secara default bentuknya persegi empat, untuk merubah menjadi bulat anda tinggal menambahkan kode dibawah ini setelah kode  box-shadow: 1px 2px 9px #666666; 

border-radius:15px;

• Simpan template, selesai..