BismillahSobat 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..untuk contoh bisa KLIK Gambar Disamping ....
Membuat Efek Zoom Pada Gambar
Langkah 1- Login ke Blogger
- Masuk ke "Rancangan - Edit HTML"
- Cheklist "Expand Template Widget"
Langkah 2Cari 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 3Selanjutnya cari kode </head> kemudian sisipkan kode berikut diatasnya<!-- Zoom Image code script -->
<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>
Langkah 4
