16/04/11

Membuat Effek Zoom Gambar di Blogspot

Sobat blogger mungkin masih sedikit yang tau tentang Membuat Effek Zoom Gambar di Blogspot, banyak kegunaan dari effek ini. Effek ini menggunakan jQuery, sehingga tampilannya akan lebih lembut dan halus. Ada kalanya kita melihat suatu gambar tutor yang tampilan gambarnya sangat kecil dan tidak jelas, Effek Zoom ini menampilkan gambar dengan ukuran sebenarnya, buat sobat yang penasaran, contohnya bisa sobat lihat di SudutPhoto. Jika sobat berminat, ikuti langkah-langkah berikut ini;

Membuat Effek Zoom Gambar di Blog

  1. Masuk ke blogger;
  2. Klik Perancangan lalu klik Edit HTML;
  3. Carilah kode ]]></b:skin>
  4. Kemudian sisipkan kode berikut ini tepat di atasnya:
/* Zoom Image www.wakrizki.net
------------------------------- */
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;
}
  1. Selanjutnya cari kode </head>
  2. Kemudian sisipkan kode berikut ini tepat di atasnya:
<!-- Zoom Image code script www.wakrizki.net -->
<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>
  1. Langkah terakhir adalah simpan template sobat. Semoga berhasil

9 comments:

Firdaus Herliansyah mengatakan...

Sangat menarik,

terima kasih...

Aditya Eka 7.4 mengatakan...

i like it

ABDULLAH mengatakan...

bagus bgt bg,makasi tipnya....

iwankiddy mengatakan...

thanks info nya.. ada info jquery mengenai login ga?

khodri mengatakan...

bg, follback ya blog aku,


visit my blog
suasanapekanbaru.blogspot.com

mkasi:D

Tablet Android Honeycomb Terbaik Murah mengatakan...

bikin berat blog ga om?

Anonim mengatakan...

nice artikel.. :) thanks.. mohon share yah gan..

Dwi Katon mengatakan...

thanks infonya

tujeng mengatakan...

trims ya buat infor masi nya . salam kenal buat sobat bloger

Posting Komentar

Silahkan Berkomentar disini...