Memperbesar Gambar pada Artikel Blog Dengan jQuery Image Zoom 2.0

Artikel kali ini sengaja saya ambil dari blognya Maz Hendriono yang memang banyak menyediakan tutorial blog dengan efek khusus yakni jQUERY. saya sendiri sangat tertarik dengan framework jQuery, kesempatan kali ni, kita akan memanfaatkan plugin jQuery yang dibuat oleh Andreas Lagerkvist[1]. Plugin ini berfungsi untuk memberikan efek pada gambar dalam artikel blog kita. Sebagai Contoh (DEMO), coba sobat Klik GAMBAR DI BAWAH dan Ketika pembaca blog melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada artikel blog nee, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut dan ini berlaku untuk semua gambar yang ada pada artikel blog tanpa terkecuali.

Ikuti dengan seksama caranya :

Langkah 1

Login ke Blogger

Langkah 2

Masuk ke "Rancangan - Edit HTML"

Langkah 3

Cari kode dibawah ini:

]]></b:skin>

Langkah 4

Masukan kode CSS dibawah ini diatas kode pada langkah 3:

div.jquery-image-zoom {
 line-height: 0;
 font-size: 0;
 z-index: 10;
 border: 5px solid #fff;
 margin: -5px;
 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
 background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
 display: block;
 width: 25px;
 height: 25px;
 position: absolute;
 left: -17px;
 top: -17px;
 /* IE-users are prolly used to close-link in right-hand corner */
 *left: auto;
 *right: -17px;
 text-decoration: none;
 text-indent: -100000px;
 outline: 0;
 z-index: 11;
}
div.jquery-image-zoom a:hover {
 background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
 width: 100%;
 height: 100%;
 margin: 0;
}

Langkah 5

Cari kode dibawah ini:

</head>

Langkah 6

Masukan kode JavaScript dibawah ini diatas kode pada langkah 5:

Langkah 7

Simpan template, preview blog anda dan klik salah satu gambar pada artikel blog anda...

ini contoh dibawah