Cara Membuat Efek Zoom pada Gambar

Efek Zoom merupakan efek yang menyebabkan gambar membesar pada saat kursor memilih gambar. Efek ini sangat menarik untuk ditampilkan pada blog. Untuk lebih jelasnya bisa anda lihat jika anda telah membuatnya pada blog anda.
Sekarang mari kita lihat langkah-langkahnya, kita mulai dengan:

1. Login ke blogger dengan akun kita sendiri
2. Pilih Rancangan
3. Pilih Edit HTML
4. Cari kode seperti ini ]]></b:skin> 
5. Letakkan kode script ini dibatas kode ]]></b:skin>

/* Zoom Efek */
.thumbnail{position:relative;z-index:0}
.thumbnail:hover{background-color:transparent;z-index:50}
.thumbnail span{position:absolute;left:-1000px;visibility:hidden;color: black;text-decoration: none}
.thumbnail span img{border-width:0;padding:2px}
.thumbnail:hover span {visibility: visible; top: 0; left: 60px}

6. Jangan Lupa Simpan Template anda.
Apabila sobat ingin menggunakan efek zoom pada gambar ini, silahkan gunakan kode script ini:

<a class="thumbnail" href="#thumb"><img src="http://i648.photobucket.com/albums/uu204/puter4/TESTtatobelakangcopy.jpg" border="0" alt="Photobucket"><span><img src="http://i648.photobucket.com/albums/uu204/puter4/TESTtatobelakangcopy.jpg" width ="400px" height="472px";/></span></a>

Untuk text, gunakan kode script seperti ini:

<a class="thumbnail" href="#thumb">Lihat Gambar<span><img src= http://i648.photobucket.com/albums/uu204/puter4/TESTtatobelakangcopy.jpg /></span></a>

Catatan:
Sobat tinggal merubah ukuran gambar yang sobat inginkan, tinggal mengganti angka di width dan heigh sesuai dengan selera.

Sedangkan untuk mengatur letak tinggi dan rendah gambar hasil zoom, sobat bisa merubah ukuran pada kode yang diletakkan di atas ]]></b:skin> (yang berwarna Biru) 


Ok..selamat mencoba.