Cara Menambah Efek Zoom Pada Gambar

Efek ini berfungsi untuk membuat gambar menjadi besar atau zoom ketika gambar di klik dan untuk mengembalikannya lagi ke ukuran semula tinggal di klik lagi. contohnya seperti di bawah ini

ketika kamu arahkan crusor pada gambar di atas, dan klik satu kali. untuk mengembalikan seperti semula klik gambar yang sudah di perbesar tadi. Langkah untuk membuatnya cukup copy paste (copas) code di bawah ini. Setelah itu buka Rancangan - Edit Html. cari code </head> dengan cara tekan Ctrl + F . setelah ketemu copy paste (copas) kode di bawah ini di atas code </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="https://sites.google.com/site/ryuukusena/javascript/jquery.magnifier.js"> </script>

Selanjutnya simpan.

Langkah selanjutnya adalah penerapan gambar. di sarankan untuk upload gambar di image host seperti photobucket.com , imageshack.com dan lain-lain. caranya :
Ambil Url gambar yang kamu pasang, contoh :
<img src="http://i317.photobucket.com/albums/mm393/ryuukusena/header.jpg"/>
kemudian tambahkan code class="magnify" di dalam code gambar tadi, hasilnya seperti ini :  <img src="http://i317.photobucket.com/albums/mm393/ryuukusena/header.jpg" class="magnify"/>
code class="magnify" harus kamu copy di setiap kode gambar kamu.

untuk menentukan besarnya zoom gambar, tinggal tambahkan code class="magnify" width="100px;" height="150px;"  . Keterangan : width = lebar, height = tinggi. codenya akan seperti ini

<img src="http://i317.photobucket.com/albums/mm393/ryuukusena/header.jpg" class="magnify" width="100px;" height="150px;"/>
jika anda meng upload gambar dari blogger. maka hapus beberapa code. contoh code saat upload gambar
<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGesKdQNBll9Tnr4TIBW1uYlqCpr9f0Q-dypeKB9BMPOOnrJviiHb-fQrTJDJa7aRFssCHUXjW6sRUt41wAfdHRUrNiB5UbGfyuz1qSawIMLj7VMUa9fiZcMtYpp1OQe8qtFGFLgtrwwg/s1600/animation+copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGesKdQNBll9Tnr4TIBW1uYlqCpr9f0Q-dypeKB9BMPOOnrJviiHb-fQrTJDJa7aRFssCHUXjW6sRUt41wAfdHRUrNiB5UbGfyuz1qSawIMLj7VMUa9fiZcMtYpp1OQe8qtFGFLgtrwwg/s1600/animation+copy.png" />
hapus semua code seperti ini <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGesKdQNBll9Tnr4TIBW1uYlqCpr9f0Q-dypeKB9BMPOOnrJviiHb-fQrTJDJa7aRFssCHUXjW6sRUt41wAfdHRUrNiB5UbGfyuz1qSawIMLj7VMUa9fiZcMtYpp1OQe8qtFGFLgtrwwg/s1600/animation+copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

maka kodenya seperti ini :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGesKdQNBll9Tnr4TIBW1uYlqCpr9f0Q-dypeKB9BMPOOnrJviiHb-fQrTJDJa7aRFssCHUXjW6sRUt41wAfdHRUrNiB5UbGfyuz1qSawIMLj7VMUa9fiZcMtYpp1OQe8qtFGFLgtrwwg/s1600/animation+copy.png" class="magnify" width="100px;" height="150px;" />

sekian tutorial dari saya, semoga berguna dan bermanfaat bagi anda sekalian.