Gambar Dengan Efek Zooming di Blog

Halo sobat-sobat mampirbro, kali ini saya ingin berbagi tutorial blog untuk membuat efek zooming pada gambar atau foto dipostingan blog kita dengan jquery. Dengan memamfaatkan fitur jquery, kita bisa membuat efek zooming yang dimana kalian pasti tahu apa itu efek zooming. Bagi sobat yang belum tahu efek zooming adalah efek dimana gambar kecil yang terdapat pada postingan apabila diklik sekali maka gambar tersebut akan menjadi besar dan apabila diklik sekali lagi maka gambar tersebut kembali menjadi kecil. Ya udah dech, dari pada binggung langsung aja lihat tutorialnya...

Berikut langkah-langkahnya:

1. Login ke blogmu, lalu pilih menu "Rancangan"" --> "Edit HTML", kemudian centang pada box "Expand Template Widget".


2. Carilah kode </head>, untuk mempersingkatnya gunakan fasilitas ctrl + f dan jika sudah ketemu, copy dan pastekan kode dibawah ini tepat diatas kode </head>.




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://z33s.googlecode.com/files/BesaR.txt.js">
</script>



Ket: apabila kode berwarna biru sudah ada pada html templatemu, maka yang dicopy-pastekan adalah kode dibawahnya saja yang berwarna hitam.


3. Kemudian simpan template sobat.


4. Untuk memasukkan efek zoom pada gambar maka copy-pastekan kode berikut pada postingan atau widget yang dimana sobat ingin menaruh gambar yang akan diberi efek zoom. Berikut kodenya:




<img class="magnify" magnifyby="3" style="width: 200px; height: 250px;" src="Url gambar sobat" alt="" id="BLOGGER_PHOTO_ID_6060538624190533589" border="0" />




5. Ganti teks berwarna merah dengan link dari gambar sobat. Kode berwarna biru adalah tinggi dan lebarnya gambar yang dapat sobat atur, ubah dan sesuaikan dengan keinginan sobat.



6. Jika ingin memasukkan efek zoom lagi pada gambar yang lain, ulangi lagi langkah ke-4 untuk setiap kali memberikan efek zoom pada gambar yang lain.

Artikel Terkait: