Home » » Membuat Effek Zoom Gambar di Blog

Membuat Effek Zoom Gambar di Blog

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 : modification-blog.blogspot.com

Ditulis Oleh : kabar kalianda ~ Blogger Kalianda

Sobat sedang membaca artikel tentang Membuat Effek Zoom Gambar di Blog. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, dan jangan lupa untuk follow dan meninggalkan komentar sobat.

:: Cara Membuat Permalink disini ::

Share this article :
Comments
3 Comments

3 comments:

  1. ok gan.. tancap dan langsung praktek thanks ya

    ReplyDelete
  2. Tks Tipsnya Mas
    udah dipasang ... tp efeknya blm kliatan... masih mau coba2 lagi

    ReplyDelete
  3. thanx infony...tp kok effectny ga muncul2 yah...mlingsep

    ReplyDelete

Terima kasih atas kunjungannya, jangan lupa tinggalkan komentar dan Follownya untuk perkembangan blog ini. No Approval No Captcha. Langsung Muncul. Happy Blogging ^_^

Masukan URLPanjang Sobat:
 
Author : Kabar Kalianda | Sitemap | Feeds
Copyright © 2013. Blogger Indonesia - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger