Membuat widget popular post CSS3 dengan efek hover

Hai Sobat blogger..Kita tahu bahwa betapa pentingnya sebuah widget populer posts. Karena meengindikasikan bahwa postingan mana yang paling populer di blog . Umumnya ketika pembaca menyukai sebuah postingan, mereka sering mengunjungi postingan itu. Di popular post widget bawaan (default) blogger kita tidak bisa mengubahnya tetapi dengan menggunakan CSS3 kita dapat dengan mudah memanipulasi widget default tersebut. Akan tetapi widget popular post ini sedikit berbeda, dengan menggunakan isi warna dan efek hover.  

Para bloggger yang ingin tetap menjaga kecepatan loading blog, mereka dapat menggunakan widget ini. Karena widget popular post ini hanya menampilkan link populer post dengan warna serta efek hover. Anda dapat mengubah warnanya sesuai yang anda inginkan. Menggunakan terlalu banyak gambar juga bisa memberatkan kecepatan loading blog anda. Jadi menggunakan widget ini akan menjadi suatu keputusan yang bijak menurut saya. Saya berharap Anda dan pengunjung blog Anda akan menyukainya. 

Jadi silahkan ikuti tutorial untuk menginstal widget popular post ini ke blog Anda...:) 

CARA MENAMBAHKANNYA DI BLOG

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu

• Klik Tata Letak-> Tambahkan Gadget-> Klik entri populer/populer post  

Catatan: Hapus tanda Thumbnail gambar dan snippet (cuplikan). Karena kita hanya akan menampilkan link popular posts sehingga kita tidak perlu gambar dan intro (pengenalan) teks.

 

• Simpan gadget..
• Selanjutnya masuk lagi ke akun blogger anda
• Kemudian cari tag/kode ]]></b:skin> 
• Setelah ketemu letakan kode berikut dibawah ini tepat diatas kode ]]></b:skin>   

/*CSS Popular Posts by http://jalu-pangna.blogspot.com*/
#PopularPosts1{
border: 0px solid #000000; /*Main Border Color */
margin: 0;
}
#PopularPosts1 ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#PopularPosts1 a{
display: block;
margin: 0;
padding: 3px 5px 3px 5px;
text-decoration: none;
color: #ffffff;
background-color: #005C91;
width:300px;
border-bottom: 1px solid #90bade;
border-left: 5px solid #1958b7;
border-right: 5px solid #1958b7;
list-style-type:none;
}
#PopularPosts1 a:hover {
background-color: #04BDFA;
border-left-color: #1c64d1; /*Left border color On Hover*/
border-right-color: #1c64d1; /*Right border color On Hover*/
} 

• Simpan template, Selesai..

 KUSTOMISASI

• Kode # 005C91 untuk mengubah warna latar belakang widget popular post
• Kode 300px untuk mengubah lebar widget 
• Kode # 04BDFA untuk mengubah warna hover widget popular post
• Kode # 1c64d1 untuk mengubah warna kiri dan kanan border

HAPPY BLOGGING..