Cara membuat efek zoom pada gambar

Pada postingan kali ini akan mambahas tentang cara membuat efek zoom pada gambar. Efek zoom ini berguna untuk menghemat tempat sehingga gambar yang ukurannya besar bisa menggunakan efek zoom ini untuk menghemat tempat.

Langkah-langkahnya :

1. Masuk ke akun blog sobat.

2. Klik Rancangan.

3. Klik Edit HTML.

4. Cari kode ]]></b:skin>
Untuk mempermudah pencarian tekan ctrl+f.

5. Copy kode dibawah ini dan pastekan diatas 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. Klik Simpan Template.

7. Memulai posting baru pada blog sobat.

8. Untuk membuat gambar zoomnya berikut contoh gambarnya.

<a href="http://s643.photobucket.com/albums/uu155/miskahiper/?action=view&current=vaio-zoom-1.jpg" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" border="0" alt="Photobucket"></a>


9. Kemudian hapus tulisan yang berwarna hijau dan tambahkan dengan tulisan yang berwarna merah. Sehingga menjadi seperti ini :


<a class="thumbnail" href="#thumb"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" border="0" alt="Photobucket"><span><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" width="380px" height="300px";/></span></a>


Keterangan :
width : Merupakan lebar gambar yang akan dizoom.
height : Merupakan panjang gambar yang akan dizoom.


10. Copy kode pada langkah No.9 dan pastekan di Edit HTML pada Kotak Postingan blog sobat.

11. Klik Terbitkan Entri.