Membuat Efek Image Zoom dengan Jquery

Sobat bingung apa itu dan bagaimana kegunaannya, nah menurut saya pribadi Membuat Efek Zoom Pada Gambar adalah keuntungan 40% dari blog yang mungkin dapat menyempurnakan gambar apabila bentuk dari gambar itu kecil, tutorial ini menggunakan kode jQuery maka efek yang ditampilkan pun cukup bagus dan indah dan berikut tutorialnya.

Membuat Efek Zoom Pada Gambar

Langkah 1

Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"

Langkah 2

Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatasnya

/* Zoom Image
------------------------------- */
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 3

Selanjutnya cari kode </head> kemudian sisipkan kode berikut diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://koderator.googlecode.com/files/zoom.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>

Yang terakhir Save Template anda. Selesai dah....