Cara Membuat Efek Zoom Pada Gambar

Sobat blogger mungkin masih sedikit yang tau tentang Membuat Efek Zoom Gambar di Blog, banyak kegunaan dari effek ini. Effek ini menggunakan jQuery, sehingga tampilannya akan lebih lembut dan halus. Ada kalanya kita melihat suatu gambar tutor yang tampilan gambarnya sangat kecil dan tidak jelas, Efek Zoom ini menampilkan gambar dengan ukuran sebenarnya, buat sobat yang penasaran, contohnya bisa sobat lihat di Sudut Photo. Jika sobat berminat, ikuti langkah-langkah berikut ini;

Caranya adalah :

Masuk ke blogger;
Klik Perancangan lalu klik Edit HTML;
Carilah kode ]]></b:skin>
Kemudian sisipkan kode berikut ini tepat di atasnya:

/* Zoom Image www.wakrizki.net
------------------------------- */
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;
}

Selanjutnya cari kode </head>
Kemudian sisipkan kode berikut ini tepat di atasnya:

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