Cara Membuat Zoom Gambar Postingan

 | Pada postingan kali ini saya akan membahas tentang cara membesarkan gambar di postingan. Dimana cara kerjanya yaitu apabila postingan anda yang disertai gambar jika gambar tersebut di klik mouse akan membesar. Hal tersebut dibuat jika ada pengunjung yang singgah ke blog dan ingin melihat gambar yang sekiranya tidak begitu jelas untuk dilihat, maka dibuatlah efek zoom untuk memperbesar gambar tersebut.
Berikut langkah bikin efek zoom pada gambar di Blog

1. Login ke blogger
2. Pilih Rancangan => Edit HTML/java script
3. Cari kode ]]></b:skin>
4. Copy paste kode dibawah ini letakkan tepat di atas kode ]]></b:skin>


/* Zoom Image */
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. Berikutnya, cari kode </head> dan letakkan kode dibawah ini tepat di atasnya

!-- Zoom Image code script -->
<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>
6. Selesai, klik simpan template anda

This entry was posted in

Leave a Reply