Cara Membuat Zoom Effect pada Gambar di Blog

Mungkin para Blogger sudah tidak asing lagi dengan efek Zoom pada Foto di postingan Blog. Efek Zoom ini akan membuat foto yang di sentuh cursor akan membesar ukurannya atau seperti Zoom otomatis.
Trik ini bagus untuk mempercantik Blog anda. Jika tertarik langsung saja ikuti Langkah - langkah erikut.
Cekidot :

1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode ]]></b:skin> lalu taruh kode berikut ini di bawahnya:

.ow img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 10px 5px 0; } .ow img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; }

5. Simpan Template jika sudah selesai.
6. Untuk menerapkan Zoom Effect ini kita harus menambahkan tag class="ow" pada kode HTML gambar, contohnya seperti ini:

<a class="ow" href="http://twitter.com/kurniasepta" ><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1K4_elJjdPpcwFU3Z-zJ4vv_FQOdzSXllQKDTfDx7F_GKfulvGpPYjciRC80P1rLoxr1BX_Sroz8w7fUeedSpybenzlRhvLdoyWiTg2ouaU6Tm-GLQmjXjnezzoYPmtPOo75rOmoF_cu4/s1600/Untitled-4+copy.jpg" width="284" /></a>

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest