Magnify Image Zoom

Sabtu, 07 Juli 2012 | 2komentar

Magnify Image Zoom
Magnify Image Zoom - Zoom Gambar Dengan Magnify - Cara Memperbesar Gambar Dengan Magnify - Cara Membuat Efek Zoom Pada Gambar di Postingan BlogEfek 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="http://3.bp.blogspot.com/-ZBvliyqqDIw/T_g0qd0mVxI/AAAAAAAAASc/hQsHjMjcbbM/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="http://3.bp.blogspot.com/-ZBvliyqqDIw/T_g0qd0mVxI/AAAAAAAAASc/hQsHjMjcbbM/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.
Share this article :
Judul: Magnify Image Zoom
Rating Blog: 5 dari 5
Ditulis oleh Eva Wangi
Anda sedang membaca artikel Magnify Image Zoom. Anda bebas Copas untuk kode HTML pada Tutorial Blogging dan Tips Blogging, namun jika terpaksa ingin mengutip secara keseluruhan harap memberikan link aktif dofollow ke URL inihttp://evawangi.blogspot.com/2012/07/magnify-image-zoom.html. Terima kasih sudah singgah dan berkomentar di blog ini.

2 komentar:

  1. ada demonya ga?mau lihat dulu kayak gimana.:)

    BalasHapus
    Balasan
    1. Klik kata demo diatas sop,thanks ya.

      Hapus

Tulis Komentar Yang Menyejukan Hati saja.
Tidak menerima Komentar Yang bermuatan Sara, Politik, Makar,
tidak pula Komentar Yang menjurus Iklan.
Terima Kasih sudah sedikit meluangkan Waktunya disini!

Ketik Yang Sobat Mau !

Artikel Terbaru

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2012. Shaka InghetS - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger