Membuat Effek Zoom Gambar di BLOGGER/ BLOGSPOT

 Membuat Effek Zoom Gambar di BLOGGER/ BLOGSPOT - 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;

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 http://indonesiadocuments.blogspot.com
------------------------------- */
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 http://indonesiadocuments.blogspot.com/ -->
<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

Semoga Artikel diatas dapat membuat sobat senang dan aku berharap dapat membantu serta bermanfaat bagi para sobat semuanya . Kami dari  INDONESIA DOCUMENTS menyampaikan trimakasi Atas Kunjungan Sobat...n_n dan jika ada yang kurang serta saran bagi kami silahkan teman teman bisa berkomentar di bawah ini...trimakasi...n_n 

TERIMA KASIH ATAS KUNJUNGAN SOBAT

Judul: Membuat Effek Zoom Gambar di BLOGGER/ BLOGSPOT
Ditulis oleh : Indonesia Documents Group
Anda sedang membaca artikel Membuat Effek Zoom Gambar di BLOGGER/ BLOGSPOT. Artikel ini dilindungi oleh hak Cipta kami dari www. myfreecopyright.com. Jika ingin mengutip, harap memberikan link aktif dofollow ke URL http://indonesiadocuments.blogspot.com/2012/08/membuat-effek-zoom-gambar-di-blogger.html. Jika Tidak akan diproses hukum oleh DMCA Takedown dan berakibat buruk pada blog sodara . Terima kasih atas Perhatian saudara serta Terima Kasih telah berkunjung di blog ini.