Membuat Popular Post Thumbnail

Membuat Popular Post Thumbnail - Nah kali ini aku akan sedikit share ihwal bagaimana menciptakan popular post thumbnail dengan title efek hover. Popular post ini hanya menampilkan gambar tetapi ketika gambar disorot mouse akan keluar tampilan dari judul popular post yang kita sorot, caranya cukup gampang berikut ialah tutorialnya:

1. Log in ke blogger
2. Klik tata letak tambahkan gadget popular post
3. Lalu klik Template dan edit HTML
4. Cari arahan berikut ]]></b:skin> kemudian tempatkan arahan berikut ini sempurna 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 arahan menyerupai yang menyerupai 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 arahan diatas dan ganti memakai arahan menyerupai 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 harapan sobat.

7. Klik pratinjau dan jikalau semuanya lancar klik simpan.

Baca juga cara menciptakan majemuk popular post keren.

Share this post