Cara Memperbesar gambar dengan Magnify Image Zoom

Translate

Menyisipkan Magnify pada posting gambar;

Magnify Image Zoom - Zoom Gambar Dengan Magnify - Cara Memperbesar Gambar Dengan Magnify - Cara Membuat Efek Zoom Pada Gambar di Postingan Blog - Efek Zoom Gambar Pada Blog Image Preview - Bagi Newbie seperti saya tak akan lelah bereksperimen dan mencoba hal yang baru ditemukan dalam Dunia Lain ini. Sesudah berhasil diterapkan dan dipraktekan dalam blog lalu ditinggalkan.

Magnify Image Zoom pada prinsip dan cara kerjanya sangat sederhana. Pada gambar blog kita, apabila di klik maka gambar tersebut menjadi besar. Demo untuk Magnify Image Zoom silahkan sobat kunjungi blog yang ada gambar zoomnya. Sobat tertarik untuk membuatnya ? Jika sobat ingin menggunakan trik ini, silahkan ikuti langkah-langkah berikut ini;

1. Login Akun Blogger sobat
2. Pilih Rancangan dan klik Edit HTML.
3. Centang kotak Expand Template Widget.
4. Backup dulu template blog anda, untuk menghindari kesalahan kode.---ini penting
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://evawangi.googlecode.com/files/Magnify.js"></script>

Jika pada template anda sudah terdapat kode yang berwarna Kuning, maka tak perlu digunakan 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/AVvXsEjLVDYahh5U4pRqPHGbbsjJzRcDzIZEx2Ou6dToDXSgbfY1IoQhrAKYEO8kcat33YsDOdZyDxXgEdIugz91qlZ0rCWcnkJy4l_qQYc1mE-uDqttkMqoc0C7LLFLvvFzvSeD_zjL4Pm7IznV/s320/Youn+Hou+Wee.jpg" /></div>

Sesudah disisipkan kode maka penulisan HTML akan berubah menjadi;

<div class="separator" style="clear: both; text-align: center;">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLVDYahh5U4pRqPHGbbsjJzRcDzIZEx2Ou6dToDXSgbfY1IoQhrAKYEO8kcat33YsDOdZyDxXgEdIugz91qlZ0rCWcnkJy4l_qQYc1mE-uDqttkMqoc0C7LLFLvvFzvSeD_zjL4Pm7IznV/s320/Youn+Hou+Wee.jpg"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 Entri anda dan lihat hasil nya.

Happy Blogging.

Edit; wawansurya
Sumber ;
www.affiliate-waones.com


merchant 

Artikel Menarik Lainnya :