Tutorial blog kali ini tentang cara membuat efek gambar atau thumbnail membesar saat disentuh kursor atau mouse di blog seperti yang bisa a...
Baca juga: Membuat Social Share Button Responsive Tanpa JavaScript di Blog
Efek animasi thumbnail membesar ini dapat anda terapakan pada halaman depan blog atau pada postingan tampil penuh. Jika anda tertarik untuk menerapkan trik ini di template blog anda, silahkan ikuti caranya berikut.
Cara Membuat Efek Thumbnail Membesar Saat disentuh Kursor
Pada tutorial ini saya akan menggunakan kerangka thumbnail seperti pada blog pada umumnya, yaitu untuk halaman depan(homepage) yang menggunakan kode css .post-thumbnail. Untuk melihat demonya, anda bisa lihat dihalaman depan blog ini (jika belum diganti).1. masuk ke blogger, buka dasbor blog, kemudian pada menu klik Template > Edit HTML
2. Kemudian letakkan kode berikut ini di atas </head>
<b:if cond='data:blog.pageType != "item"'>3. Simpan template, dan lihat hasilnya dengan membuka homepage blog anda.
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.post-thumbnail{float:left;margin:0;padding:0;width:90%;overflow:hidden}
.post-thumbnail img{display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:0;position:static;transition:all .8s ease-out;border-radius:5px !important;overflow:hidden}
.post-thumbnail img:hover{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3);}
</style>
</b:if>
</b:if>
Setiap struktur template berbeda-beda, ganti kode .post-thumbnail dan sesuaikan dengan struktur template anda.
Demikian tutorial tentang cara membuat gambar membesar saat tersentuh kursor di blog seperti pada blog Kompi Ajaib. Anda tertarik untuk menerapkannya di blog anda? Selamat mencoba. Sumber script: Kompiajaib.com
