Cara Membuat Detail Zoom pada Gambar Blog

Detail Zoom ini cocok digunakan untuk melihat koleksi-koleksi gambar atau foto. Dengan sekali klik gambar/ foto akan terlihat di bagian lain dengan ukuran besar dan merupakan rangkaian gambar/ foto. 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 blog
2. Pilih Template
3. Edit HTML
4. Tekan Ctrl F, ketikkan ]]></b:skin>
5. Letakkan kode berikut ini diatas ]]></bskin>

/* 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. Simpan Template 

Apabila sobat ingin menggunakan efek zoom pada gambar ini, silahkan gunakan kode script ini:

<a class="thumbnail" href="#thumb"><img src="http://i.com/#.jpg" border="0" alt="Photobucket"><span><img src="http://i.com/#.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://i.com/#.jpg /></span></a>

Sobat tinggal merubah ukuran gambar yang sobat inginkan, tinggal mengganti angka di width dan height sesuai dengan selera.
Catatan:
Untuk mengatur letak tinggi dan rendah gambar hasil zoom, sobat bisa merubah ukuran pada kode skrip yang berwarna Biru.