HOMEMembuat Popular Post Thumbnail Di Blogger / Blogspot
Posted on - 8:48:00 AM with 3 comments
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:
5. Dilanjutkan cari kode seperti yang mirip dibawah ini:
6. Setelah ketemu ganti kode diatas dan ganti menggunakan kode seperti dibawah ini:
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.
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}
#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>
<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>
<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.
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips & Cara
 |
Artikel Terkait Dengan "Membuat Popular Post Thumbnail Di Blogger / Blogspot "
3 comments:
Ketentuan Berkomentar:
1. Menautkan link aktif (anchor text) pada komentar secara otomatis akan kami hapus
2. Gunakan fasilitas Name/URL untuk menempatkan link anda
3. Dilarang berkomentar diluar topik artikel (SARA, pornography, provokasi,promosi produk)
4. Dilarang komentar spam
5. Berkomentarlah dengan baik dan sopan
6. Komentar yang tidak sesuai dengan poin diatas tidak akan dipublikasikan
Admin Tips & Cara
gan saya kok thumbnailnya gak muncul ya? apa solusinya gan?
ReplyDeleteMungkin setelan widget popular postnya gambarnya none (terseting tidak tampil gan) coba ganti yes..
ReplyDeleteMantap gan meskipun cuman bagian di langkah ke enam yg sedikit aane rubah, malah kalau di rubah semua makin gak bisa. ya pokoknya keren dah...
ReplyDeletedi tunggu juga kunjungan baliknya gan :)
http://starmanga2017.blogspot.co.id/