Cara Membuat Efek Zoom Pada Gambar

Pada dasarnya membuat efek zoom pada gambar cukup banyak manfaatnya, 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.

 

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

 

  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 

 

Photobucket

 

 

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, selamat mencoba ya, semoga berhasil !Thumbs-up

Berlangganan artikel terbaru via Email
Artikel Lainnya :

21 comments

29 Oktober 2009 05.56

Setelah cari kemana-mana akhirnya nemu disini tutornya. Thanks mas.

29 Oktober 2009 17.10

keren..bisa thumbnail / zoom gtu tanpa diklik lagi, makasih bro infonya berguna sekali.

30 Oktober 2009 20.46

kalo aku ini udah pake...ekekekek

1 November 2009 04.48

bagus tutorialnya

7 November 2009 21.39

mohon maaf numpang lewat. telah lahir ppc baru yang bernama http://ppcmuslim.com. ayo buruan gabung jadi publisher maupun advertiser

15 Maret 2010 16.38

Nice..., menarik..menarikkk

15 Maret 2010 23.35

Makasih banyak sob tutorialnya,tak bookmark dulu pagenya

20 Maret 2010 18.49

Hallo guys, tu efeek zom a klo dibuat perlahan ja gmn y?? tukn cpt bngt..
bantu ya,, aqu pemula ni.. thanks

23 Maret 2010 15.29

wah ahirnya nemu yg bagus juga bwt zoomnya,thx alot mas ^_^

20 Mei 2010 02.02

kenapa ya tips a gagal tuk blog aqu ??
minta bantua a dong...

12 Agustus 2010 10.58

kode perintah ini di letakan dimana boss????

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

udah saya coba tpi hnya gambar aja keluar
effectnya gak ada dowh....

27 September 2010 08.58

Akhirnya ketemu juga yang aku cari........ makasih mas, nais inpo pokoknya he..he.hh.e...

7 November 2010 14.06

nice post...aku udah nyobanya dan berjalan,
tapi aku ada sedikit kendala dengan zoom left nya, hasil tidak seperti yg anda contohkan, mungkin anda bila liat di http://panorama-baline.blogspot.com/2010/11/cara-membuat-multi-yahoomessenger-di.html, biar effect nya di tengah gimana ya cara nya, mohon pencerahan nya.

16 November 2010 14.40

ini dia yang saya cari

kalo buat yang kayak share di bawahnya apakah caranya sama

yang menjembul/timbul ke atas kalo ada kursor mouse itu lho?

mohon bimbingan kepada bloger senior. Maturnuwun.

16 November 2010 16.31

@ vampire1721 : baca disini ya

1 Mei 2011 04.29

Malam kang kenapa saya coba zoom nya ke bawah ? bukan kayak akang pas di atas nya ,ada trik tambahan kang ?

Anonim
22 Mei 2011 23.53

trims ilmunya mas, saya malah pake issue agak repot.

18 Agustus 2011 03.55

mas Dody, saya telah mencobanya.
dan hasilnya bagus, berjalan mulus.

tapi, hhhee ada tapinya.
ketika saya ganti dari template lama ke template baru, kok efek zoomnya gak berfungsi ya mas?
please reply :D

7 Oktober 2011 07.02

Kok saya ga bisa2 ya buat gambar berefek zoomnya, tolong dong http://bossgun.blogspot.com/2011/10/cara-membuat-efek-zoom-pada-gambar.html

23 Desember 2011 22.41

Trimah kasih gan, uda ane coba mantap :D

23 Maret 2012 12.34

thanks sob dengan tutorialnya, salam kenal aja and visit me back

Poskan Komentar

Reader Community

Recent Comments