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, hihihi.
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 disini. Sobat tertarik untuk membuatnya ? Jika sobat ingin menggunakan trik ini, silahkan ikuti langkah-langkahberikut 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.
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/AVvXsEjS3C5G2-0y8vu53fWfDkpzGF51PlatIY8y5EimusjRligz-OxP947tob9Njg3SQFcdacm8VfeyVKNr5kY4UYQWDjCBDk1y5u4y-XrfNaNVTc_bCeasNZUKtxCznTka9NRP8Uy17_6MtJeM/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/AVvXsEjS3C5G2-0y8vu53fWfDkpzGF51PlatIY8y5EimusjRligz-OxP947tob9Njg3SQFcdacm8VfeyVKNr5kY4UYQWDjCBDk1y5u4y-XrfNaNVTc_bCeasNZUKtxCznTka9NRP8Uy17_6MtJeM/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.
Continue Reading