cara membuat effek zoom Gambar di Blog

Membuat Effek Zoom Gambar di Blog

Sobat blogger mungkin masih sedikit yang tau tentang Membuat Effek Zoom Gambar di Blog, 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;

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;
}

5. Selanjutnya cari kode </head>
6. 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>

7. Langkah terakhir adalah simpan template sobat. Semoga berhasil

Related Post:

Pernak-pernik blog

• Cara membuat Spoiler [ show Hide ] pada postingan
• Cara membuat Daun Bertebaran di blog
• Cara menghilangkan tulisan Subscribe To Post (Atom) Blog
• Cara mengecek kecepatan Blog
• Cara Memberi Background atau efek di judul posting
• Cara memasang Tombol Like Di atas Postingan
• Cara menghilangkan Tulisan " Tampilkan Entri Lawas "
• Cara membuat link otomatis saat artikel di copas di blogger
• Cara memasang Tombol 'Back To Top' di blog
• Cara medifikasi kotak komentar dengan Intensedebate
• Cara membuat Buku Tamu Tersembunyi di blog
• cara membuat player musik di blog melayang
• Jangan asal copy paste
• Cara Memasang, Menggunakan Gadget Freedjit dan Memanfaatkannya sebagai Media Analisis Blog Anda
• Cara mengganti Domain Blogspot.com menjadi co.cc
• Scripct animasi terbang di blog
• Cara membuat tag Cloud / Label cloud
• Cara membuat read more otomatis di blog
• Cara membuat google translate di blog
• Cara membuat Scroll pada Blog Archive
• Cara membuat Disable klik kanan
• Cara membuat pesan pembuka dan penutup di blog
• Cara membuat cursor bertaburan bintang