Cara Mudah Membuat Popular Post dengan Thumbnail kotak-kotak - 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 akun blogger
2. Klik tata letak tambahkan add a 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>
- '90' Merupakan ukuran tinggi dan lebar gambar, ubah sesuai keinginan sobat.
7. Klik pratinjau dan jika semuanya lancar klik simpan.
Comments