Membuat Effek Zoom Gambar di Blog

Posted by Gani Mugni Sabtu, 03 Desember 2011 0 komentar
Sobat blogger mungkin masih sedikit yang tau tentang membuat Efek Zoom Gambar Pada 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 Sudut Photo.. 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

Terima Kasih

TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Membuat Effek Zoom Gambar di Blog
Ditulis oleh Gani Mugni
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2011/12/membuat-effek-zoom-gambar-di-blog.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.