Selamat sore sobat blogger dimana pun sobat berada. Posting kali ini membahas tentang zoom image/perbesar gambar dengan Zoom Gambar Dengan Magnify
Prinsip dari cara kerja script ini sederhana saja. Pada gambar blog anda, apabila di klik maka gambar tersebut menjadi besar. Seperti contoh dibawah ini
Demo :
Jika sobat ingin menggunakan trik ini, silahkan ikuti langkah-langkah dibawah.
1. Login Blog anda
2. Pilih Rancangan dan klik Edit HTML.
3. Beri tanda pada kotak Expand Template Widget.
4. Backup dulu template blog anda, untuk menghindari kesalahan kode.
5. Masukkan kode dibawah ini tepat diatas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script><script type="text/javascript" src="http://seurunemagnify.googlecode.com/files/Gambar%20Magnify.js"></script>
Jika pada template anda sudah terdapat kode yang berwarna Merah, maka kode yang berwarna merah diatas tidak usah di gunakan lagi. Cukup pakai kode yang berwarna Biru saja.
6. Simpan template sobat
7. Buat postingan baru beserta dengan gambar. Pada Tag <img> sisipkan kode dibawah ini
class="magnify" data-magnifyby="2.5" data-magnifyduration="1000"
Contoh kode gambar saya :
Sebelum disisipkan kode
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimahAbz_xpB14qTd_gMmLi8fBXUTjHG5bxxS-nuryKF3uiAlRPND8UxIPQ7sdLDpsKYDqWplhoB7QSLg42pnAEfi01i-hNGur6sTkXpfkt_Pu3E2tg1e2f41D57BnTYnIZwZmg_GUuiP0/s1600/Anomalocaridid.jpeg" /></div>
Sesudah disisipkan kode
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimahAbz_xpB14qTd_gMmLi8fBXUTjHG5bxxS-nuryKF3uiAlRPND8UxIPQ7sdLDpsKYDqWplhoB7QSLg42pnAEfi01i-hNGur6sTkXpfkt_Pu3E2tg1e2f41D57BnTYnIZwZmg_GUuiP0/s1600/Anomalocaridid.jpeg"class="magnify" data-magnifyby="2.5" data-magnifyduration="1000"/></div>
Catatan :
class="magnify" = Adalah eksekusi scriptnya.
data-magnifyby="2.5" = Untuk mengatur lebar tanpa pixel
data-magnifyto="900" = Mengatur lebar dengan pixel.
data-magnifyduration="1000" = Mengatur durasi waktu saat menjadi besar.
8. Terbitkan postingan anda dan lihat hasil nya.
Semoga bermanfaat
