Cara Membuat Popular Post dengan Thumbnail

Cara Membuat Popular Post dengan 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:


<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:


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