Cara Membuat Popular Post Keren Bergambar

Alasan kenapa widget Popular Post wajib di pasang di sebuah blog adalah karena membuat pengunjung mengetahui artikel atau postingan yang paling sering di baca di situs/blog anda.

Sejatinya widget Popular Post merupakan kumpulan artikel-artikel yang paling sering di baca pengunjung blog.

Banyak macam variasi widget Popular Post dari yang biasa sampai yang dimodifikasi atau  dari yang sederhana sampai yang berwarna-warni.

Di kesempatan kali ini, saya akan share  cara membuat Popular Post keren, yang pada penampilannya hanya menampilakan gambar.
Penampilan widget Popular Post ini cukup keren untuk menambah keindahan sebuah blog.

.

Bagi yang berminat, ikuti langkah-langkah berikut ini:

Masuk  ke blog

Klik Tata Letak 

Lalu Tambahkan Gadget

Klik Popular Post

Pada setingan Popular Post hilangkan centang pada Cuplikan

Kemudian klik Simpan 

Selanjutnya Klik Tema

Klik Edit HTML (klik backup/pulihkan untuk berjaga-jaga)

Pada kolom HTML cari kode ]]></b:skin> 

Untuk mempercepat pencarian pada kolom edit HTML klik kanan di mana saja lalu tekan CTLR+F

Akan muncul kolom pencarian di pojok kanan atas

Ketikan kode yang di cari pada kolom pencarian lalu Enter

Setelah ketemu tempatkan kode berikut tepat diatas kode ]]></b:skin>

#PopularPosts1 {width:100%;background:none;}
#PopularPosts1 .widget-content {margin: 0 !important; }
#PopularPosts1 ul {margin: 0 !important; padding: 0 !important; }
#PopularPosts1 ul li {background:none ;list-style-type: none;margin:0;
padding:0 !important}
#PopularPosts1 ul li .item-title{display:none}
#PopularPosts1 li {float:left;list-style:none;}
#PopularPosts1 .item-thumbnail img {float:left;margin-bottom:3px;
width:90px;height:90px;border:none;transition:all 400ms ease-in-out;}
#PopularPosts1 .item-thumbnail img:hover {opacity:.7}

Dilanjutkan cari kode seperti yang mirip dibawah ini:

<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>

Setelah ketemu ganti kode diatas dan ganti menggunakan kode seperti dibawah ini:

<!-- (3) Show only thumbnails -->

<div class='item-thumbnail'>

<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>

<img alt='thumbnails' expr:src='data:post.thumbnail'

expr:title='data:post.title' height='90' width='90'/>

</a>

</div>

90 (rubah untuk mengatur tinggi lebar gambar) Merupakan ukuran tinggi dan lebar gambar, ubah sesuai keinginan anda.

 Klik Pratinjau dan jika semuanya lancar klik Simpan.