Memberikan efek zoom pada gambar

Temen-temen ceritaku tulisanku, apa kabar malam hari ini? ceritaku tulisanku, pengen memberikan tips blogger tentang zoom pada gambar, ini sangat praktis untuk menghemat tempat, dan sebenarnya ini tergantung pada blognya, coba dech, ikuti tips blogger memberikan efek zoom pada gambar dan Ini berikut adalah tipsnya :

1. Login dulu ke blogger anda
2. Kemudian klik Rancangan
3. Setelah itu klik Edit HTML
4. Lalu anda cari kode berikut ]]></b:skin>
5. Setelah ketemu masukkan kode CSS dibawah ini 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;
}

6. Setelah itu cari kode berikut </head>. Setelah ketemu masukkan kode berikut diatasnya.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type="text/javascript" src="https://sites.google.com/site/bangkolis/javascript/maskolisjquery.imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>

7. Yang terakhir Save Template anda.

Nah, itu tadi tutorial membuat efek zoom pada gambar dengan sentuhan jQuery. Selamat mencoba dan semoga bermanfaat.

Tweet