Membuat Efek Zoom Gambar Pada Blog

Mungkin hal ini sudah tidak asing lagi di telinga para blogger sekalian, namun disini saya hanya mncoba sharing tentang apa yang sudah saya pelajari di dalam dunia blogging. Salah satunya adalah membuat efek zoom gambar pada blog, sehingga gambar yang dipilih akan terlihat ukuran aslinya. Cara ini mnggunakan jQuery, sehingga tampilannya akan lebih halus dan lembut.


Caranya adalah :
1. Sign in ke dalam blogger anda
2. Kemudian klik Perancangan lalu Edit HTML
3. Carilah kode ]]></b:skin>
4. Kemudian Masukkan Kode Di bawah ini tepat di atasnya.
/* Zoom Image www.zomb13.co.nr
------------------------------- */
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;
}
5. Selanjutnya cari kode </head>
6. Kemudian sisipkan kode di bawah ini tepat di atasnya
<!-- Zoom Image code script www.zomb13.co.nr -->
<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>
7. Kemudian simpan template anda. Selamat mencoba, semoga berhasil.
 

Label: , , ,