Cara Membuat Gambar Membesar Otomatis Saat Disorot Oleh Mouse

Tutorial Blog Lengkap Cara Membuat Gambar Membesar Otomatis Saat Disorot Oleh Mouse Pada Blog Terbaru


Gambar Membesar Saat Disorot - Pernah saya temukan suatu blog yang menggunakan script tertentu untuk memungkinkan gambar di blognya menjadi membesar ketika disorot mouse.

Lalu sebenarnya apa gunanya hal tersebut? Ternyata membesarkan gambar yang ada pada postingan blog dengan cara disorot pointer mouse tersebut berguna untuk memudahkan pengunjung agar lebih jelas melihat detail gambar yang resolusinya kecil dan sulit di lihat, sehingga gambar akan terlihat lebih jelas ketika disorot mouse.

Tutorial Blog Lengkap Cara Membuat Gambar Membesar Otomatis Saat Disorot Oleh Mouse Pada Blog Terbaru

Cara Membuat Gambar Membesar Otomatis Saat Disorot

1. Masuk ke blogger 
2. Pilih "template", lalu klik "edit html" 
3. kemudian letakan kode di bawah ini di atas kode </head>

<style type='text/css'>
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
</style>

Atau gunakan kode ini agar efek membesarkan gambar ini hanya ada pada halaman postingan / artikel :

 <b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
</style>
</b:if>

Catatan : (1.2) adalah angka pembesaran yang terjadi jika gambar disorot. Sesuaikan ukuran dengan kebutuhan blog sobat.

Demikian semoga dapat membantu sobat.
Previous
Next Post »