Bagaimana Cara Membuat Efek Zoom Pada Gambar

Bagaimana Cara Membuat Efek Zoom Pada Gambar-  Efek zoom memang membuat blog kita menjadi kelihatan lebih keren dan profesional, selain menghemat tempat, sekaligus mempercantik tampilan blog kita. Ada kalanya dimana kita mempunyai gambar yang sangat besar dan harus di tampilkan dalam ukuran yang besar, wah tempatnya ga cukup nih mas, itu bisa menjadi kendala dalam optimasi gambar yang hendak ditampilkan. Sementara sobat tidak ingin gambar tersebut berlalu begitu saja tanpa sentuhan pengunjung sedikitpun.

Selain efek zoom ini, tentu saja ada hal lain yang sebelumnya harus anda lakukan untuk membuat blog anda kelihatan profesional, yaitu favicon. Jika anda belum mengetahuinya, silahkan anda lihat juga artikel kami 'Bagaimana cara membuat gambar favicon'. 

Tutorial membuat efek zoom pada gambar ini sangat mudah, cukup menambahkan kode css pada template dan sedikit mengedit kode gambar yang sobat miliki. Ga usah panjang lebar ya, langsung praktek aja. Sip, sekarang silahkan siapkan komputer sobat dulu, plus kopi dan rokok sebagai pelengkap.

1. Silahkan login ke Blogger terlebih dahulu.
   
2. Kemudian klik Tata Letak.
   
3. Tuju halaman Edit HTML.
   
4. Letakkan kode css berikut ini, tepat diatas / sebelum 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}
   
   
5. Jangan lupa Simpan Template.

## Untuk membuat gambarnya zoom-nya, berikut contoh gambar yang saya punya :

<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>

Kemudian hapus tulisan yang berwarna hijau, tambahkan dengan tulisan yang berwarna merah, sehingga menjadi seperti berikut :

<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>

coba sekarang sobat sorot gambar dibawah ini 

Sedangkan kode HTMl untuk text adalah sebagai berikut :

<a class="thumbnail" href="#thumb">Contoh Gambar<span><img src=http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg /></span></a>

coba di sorot tulisan berwarna hijau dibawah ini :

 Contoh Gambar

 
Ukuran besarnya gambar yang akan di zoom silahkan sobat atur sesuai keinginan, silahkan ganti angka yang berkelip yang berwarna merah dengan ukuran yang sobat inginkan saat di zoom, sesuaikan juga dengan ukuran asli gambar agar gambar yang di zoom tidak pecah atau kabur. Oke sob, Good luck ya gan..!!

 Bagaimana Cara Membuat Efek Zoom Pada Gambar