Cara Membuat Efek Image Zoom Dengan Jquery - Hallo sahabat Anak Google, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Efek Image Zoom Dengan Jquery, admin mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Mudah-mudahan isi postingan Artikel Blogger, Artikel Efek CSS, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. Selamat membaca ya.

Judul : Cara Membuat Efek Image Zoom Dengan Jquery
link : Cara Membuat Efek Image Zoom Dengan Jquery

Cara Membuat Efek Image Zoom Dengan Jquery

 Tutorial Blogger dan SEO blogger - Cara Membuat Efek Image Zoom Dengan Jquery. Banyak cara agar membuat tampilan blog kita lebih akrab dengan pengunjung. Salah satunya untuk memberikan efek zoom pada gambar. Dengan memberikan efek zoom pada gambar, maka pengunjung akan mudah untuk melihat gambar yang berukuran kecil ke ukuran gambar sebenarnya. Jadi pengunjung bisa melihat gambar dengan jelas.

Cara kerja dari efek zoom image ini adalah ketika pengunjung melakukan klik pada suatu gambar, maka gambar akan tetap di tampilkan di halaman tersebut dengan efek gambar menjadi membesar (efek zoom image)  dengan lembut. Dan jika pengunjung ingin mengembalikan ukuran gambar ke ukuran semula pengunjung tinggan mengklik tombol close yang sudah disediakan, atau menekan tombol Esc pada keyboard, maka gambar akan secara otomatis kembali ke ukuran semua (zoom out). Ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali. Bagi yang ingin melihat demonya silahkan klik link ini .

Nah bagaimana, apakah anda tertarik untuk mencobanya? jika ya, silahkan ikuti langkah-langkah Cara Membuat Efek Image Zoom Dengan Jquery berikut ini.

1.Log in ke blogger.
2.Klik rancangan » edit HTML » centang kotak Expand Template Widget. Bagi yang menggunakan tampilan baru dari blogger anda klik template  » edit HTML  » centag Expand Template Widget.
3.Cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atasnya.

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

4.Cari kode </head> dan letakkan kode dibawah ini tepat di atasnya.

<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.min.js'/>
<script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>

5.Save template anda.

Nah mudah bukan, sekian tutorial blogger kali ini yang telah membahas habis tentang  Cara Membuat Efek Image Zoom Dengan Jquery. Mudah-mudahan bisa bermanfaat bagi anda.

Demikianlah artikel tentang Cara Membuat Efek Image Zoom Dengan Jquery

Sekianlah artikel Cara Membuat Efek Image Zoom Dengan Jquery kali ini, mudah-mudahan bisa memberi manfaat untuk pembaca semua.

Anda sekarang membaca artikel Cara Membuat Efek Image Zoom Dengan Jquery dengan alamat link https://anakugoogle.blogspot.com/2012/04/cara-membuat-efek-image-zoom-dengan.html

Tweet

Unknown