Modifikasi widget popular post dengan efek css hover

Untuk memodifikasi widget popular post seperti Screenshot di bawah ini, Sobat hanya perlu melakukan dua langkah untuk memodifikasi widget popular post sobat

• Login ke Blogger pilih Template / Edit HTML 
• Tambahkan Kode CSS berikut di atas ]]></b:skin>

Jika pada template sobat sudah tersedia code CSS PopularPosts silahkan hapus semua kode tersebut, dan ganti dengan kode berikut

1234567891011121314151617181920212223242526.PopularPosts .item-thumbnail img {
  width: 40px;
  height: 40px;
  padding: 4px;
  margin: 0;
  border: #ddd solid 1px;
}
.popular-posts ul {
  padding-left: 0;
}
.popular-posts ul li {
  background: url('https://googledrive.com/host/0BzzpB6MLhPeNZ0FhV0xIQ3A0TDg/lin.gif') left no-repeat;
  padding-left: 16px;
  list-style-type: none;
  margin: 0 0 5px 0;
  padding: 5px 5px 5px 20px !important;
  border: #c0c0c0 solid 1px;
  border-radius: 10px;
}
.popular-posts ul li:hover {
  border: #000 solid 1px;
}
.popular-posts ul li a:hover {
  text-decoration: none;
}

• Simpan Template

Kemudian pergi ke Tata letak, seting Opsi pada widget Popular post , hilangkan centang pada Cuplikan, dan untuk Opsi lainnya silahkan atur sesuai keinginan masing masing.

Selesai, sekarang tampilan Widget Popular Post sobat sudah menjadi lebih menarik, Selamat berkreasi Sob