Merubah Tampilan Entri Populer Menjadi Thumbnail

HaidarNZ - Hai Sobat setia HaidarNZ, mungkin jika agan menambahkan widget popular post/entri populer tampilannya membosankan dan itu-itu saja. Nah, kali ini ane akan memberikan trik untuk meng-kustomisasi widget popular posts milik Sobat. Untuk demo-nya Sobat dapat melihat pada bagian kanan blog saya.
Oke lagsung saja cekidot gan!





1. Buka blogger > Buka tata letak > tambahkan widget baru
2. Lalu pilih widget entri populer. Dengan keterangan seperti berikut ini. (klik untuk perbesar gambar)

- Centang 7 hari terakhir

- Centang thumbnail gambar dan cuplikan

- Untuk jumlah entri Sobat dapat sesusaikan sendiri, akan tetapi maksimal 10 entri

3. Lalu buka Template > Edit HTML. Cari kode ]]></b:skin> dan copy kode berikut ini di atas kode ]]></b:skin> 

/*--- MyBloggerLab --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcLu-u0at1mgqew2bq6cNervjtpr9HCj9NHGyWXxUZN9mJ8J7YftqhQnEcTiC1OZVkLgnWdsXvEsAHi6mlC_rhyj0-lPDAtwaejD2dwe-_XvaL3na-OUQ_bVAOVK9n15GTcSkMO9tOOE/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:1px solid #6BB5FF;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

4. Lalu Save Template

Selesai deh! Dengan ini, tampilan blog agan jadi lebih keren deh . Terima kasih sudah visit blog saya
Jangan lupa follow me : @Hdrplex