Buat Effek Zoom gambar di Blog

Elvantri in Mr. Azmi Home

Buat Effek Zoom Gambar di Blog agar setiap gambar yang diklik pengunjung tiba-tiba menjadi besar tapi effek ini terkesan lembut dan elegan, untuk mengembalikan gambar ke posisi semula cukup di close dengan mengklik tanda [X] di pokok kiri atas pada gambar, contoh klik gambar disamping. Effek ini menggunakan jQuery Image Zoom 2.0, untuk membuat Effek Zoom Gambar berikut langkah-langkahnya :

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini

]]></b:skin>

Masukan kode dibawah ini, diatas kode langkah 3 :

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 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan kode dibawah ini diatas kode langkah no. 5

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type="text/javascript" src="http://hensblog.googlecode.com/files/jquery.imageZoom.min.js"/>
<script type="text/javascript">
 jQuery(document.body).imageZoom();
</script>

Langkah 7
Simpan template, preview blog anda dan klik salah satu gambar pada artikel blog anda...

                                               Source : http://www.mapasanda.co.cc/