Lama gak berjumpa ma temen-temen blogger semua, gimana sehat selalu?
Lah... pada kesempatana ini saya akan memberikan tips cara membuat efek zoom pada foto jika diklik dengan mouse. Pada tutorial sebelumnya juga pernah dibahas tentang pembuatan image zoom, akan tetapi pada hasil yang akan diperoleh dalam tutorial ini sangat menarik. Jika tidak keberatan sialak lihat demonya disini.
Buktikan sendiri serta langkah pembuatannya adalah?
- Masuk ke akun Blogger Anda;
- Klik tombol Rancangan dan pilih Edit HTML;
- Cari kode ]]></b:skin>
- Jika ketemu copy paste kode berikut sebelum kode diatas
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;
}
- Lalu cari kode </head>
- Copy paste kode berikut sebelum kode </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type="text/javascript" src="http://kang-onk.googlecode.com/files/jQuery.ImageZoom.js"/><script type="text/javascript">
jQuery(document.body).imageZoom();
</script>
- Lalu Simpan Template
