One-Click Image Zoom with Jquery

One-Click Image Zoom with Jquery - Membuat postingan di blogger dengan menggunakan gambar, tentunya tidak semua gambar yang diposting tidak sesuai dengan apa yang kita inginkan, kadang kebesaran :v, kadang kekecilan :v, serba salah :v

disini saya mau memberikan jQuery yang bisa memberikan efek zoom untuk gambar postingan kita, ketika gambar itu di klik... untuk demonya, silahkan klik salah satu gambar di blog ini !

bagus kan :v.. berikut tutorialnya :

1. Buka blogger

2. Klik Template -> Edit HTML

3. Copy kode dibawah ini lalu taruh di atas kode ]]></b:skin> 

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFyB2sj7fLUdix4G-MnWRQMtbXPZbsJsExJmA-zJYpg3BsfB5Ch6_VHnstmkoRZ0ylJAohZLkf3IR8MNKFNh8FkOBgLyDz-w8JRRKlcq7oUgUAnPu8rRvtqmPKyFLb7CPqChRbjwPrfj0/s1600/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;
}

4. Copy kode dibawah ini dan letakkan tepat diatas kode </head>

<script src='http://lorddayz.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lorddayz.googlecode.com/files/imageZoom.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>

5. Lalu klik simpan / save

Sumber