Membuat widget popular post dengan efek css Hover

kali ini saya akan kembali berbagi tips modifikasi widget popular post dengan efek css hover  agar tampilan widget popular post sobat terlihat lebih semakin menarik, pada beberapa template biasanya sudah di sertakan CSS tambahan untuk membuat tampilan widget tersebut menjadi lebih menarik, karena kita tahu bahwa widget popular post ini adalah widget default blogspot, yang memiliki dua opsi pengaturan, yaitu menampilkan Thumbnail, judul dan ringkasan, atau hanya menampilkan Thumbnail dan judul saja, dan untuk tampilannya mengikuti gaya dari templat yang kita gunakan,
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.

.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