Membuat Efek Zoom Image Pada Blogspot

Guna dari hack ini adalah membesarkan gambar pada area terbatas. Dengan menggerakkan mouse, maka zoom otomatis bekerja menjelaskan gambar lebih detil.

Anda cukup memasukkan gambar thumbnail kecil dalam posting Anda, lalu gerakkan muse kegambar. Gambar yang lebih besar yang sesuai akan ditampilkan dalam jendela mengambang hanya ketika pembaca mengarahkan kursor mouse di atas gambar-thumbnail.

Gambar yang ditampilkan pada lensa pembesar bertujuan untuk melihat gambar lebih detil.

Seperti gambar dibawah ini:

Silakan cek untuk melihat Live Demo

Cara membuat efek zoom adalah:

1. Klik Layout --> Edit HTML
2. Kemudian cari kode </head>
3. Masukkan pastekan kode dibawah ini sebelum kode diatas.

<!--JQZOOM-STARTS-->
<script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery.jqzoom1.0.1.js" type='text/javascript'></script>
<link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jqzoom.css" type="text/css" />
<script type="text/javascript">

$(function() {
var options =
{
zoomWidth: 275,
zoomHeight: 275
}
$(".jqzoom").jqzoom(options);

var options2 =
{
zoomWidth: 275,
zoomHeight: 275,
zoomType:'reverse'
}

$(".jqzoom2").jqzoom(options2);

});
</script>

4. Simpan template anda.
5. Ketika ingin menggunakan efek zoom ini, tinggal tambahkan kode pada tab entri baru.

<a href="LINK_GAMBAR_BESAR" class="jqzoom" title="JUDUL_GAMBAR"><img src="LINK_GAMBAR_KECIL"/></a>


Note:

Anda harus mempunyai 2 gambar yang sama dengan ukuran yang berbeda. Gambar kecil untuk ditampilkan dipostingan, link gambar besar dimasukkan ke LINK_GAMBAR_KECIL.

Anda bisa menggunakan beberapa program seperti MS-PAINT/Adobe Photoshop untuk membuat thumbnail gbr normal. (Untuk tamppil dipostingan)