Membuat Popular Post Thumbnail

Membuat Popular Post Thumbnail - Nah kali ini saya akan sedikit share tentang bagaimana membuat popular post thumbnail dengan title efek hover. Popular post ini hanya menampilkan gambar tetapi saat gambar disorot mouse akan keluar tampilan dari judul popular post yang kita sorot, caranya cukup mudah berikut adalah tutorialnya:

1. Log in ke blogger
2. Klik tata letak tambahkan gadget popular post
3. Lalu klik Template dan edit HTML
4. Cari kode berikut ]]></b:skin> lalu tempatkan kode berikut ini tepat diatasnya:

#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}

5. 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>

6. 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>

gg  Merupakan ukuran tinggi dan lebar gambar, ubah sesuai keinginan sobat.

7. Klik pratinjau dan jika semuanya lancar klik simpan.

Baca juga cara membuat bermacam-macam popular post keren.