Efek Zoom Dengan Jquery, Javascript, Dan CSS3

Efek Zoom berguna sebagai membesarkan gambar yang terlihat kecil menjadi besar, Efek zoom ini sebelumnya sudah pernah saya bahas menggunakan CSS3.

Namun Pada Tutorial kali ini saya akan menjelaskan cara untuk membuat Efek Zoom dengan menggunakan Kode Jquery, Javascript, Dan CSS3.

Efek Zoom ini berguna sekali bagi anda yang mempunyai blog penjualan sehingga pengunjung lebih detail melihat produk anda. dan berguna untuk sebagai galeri baik foto, ataupun template. Efek ini muncul jika kursor diarahkan ke gambar. Untuk Membuatnya, Silahkan Ikuti langkah berikut ini :

• Silahkan Masuk Ke Blogger Anda.
• Setelah itu, Klik Menu Template, --> Simpan terlebih dahulu template Anda, --> Klik Tombol Edit HTML.
• Cari Kode </head> dengan menekan CTRL+F.
• Masukan Kode Plugins Jquery berikut diatas kode </head> :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>

• Cari Kode </body> dengan menekan CTRL+F.
• Setelah itu, Masukan Kode javascript berikut diatas kode </body> :

<script src='https://daftar-javascript-kami.googlecode.com/files/imgpreview.js' type='text/javascript'/>

• Kemudian, Cari Kode ]]></b:skin> dengan menekan CTRL+F:
• Masukan Kode CSS3 Berikut ini diatas kode ]]></b:skin> :

#preview{

position:absolute;

border:1px solid #ddd;

background:#eee;padding:5px;

display:none;color:#333;

}

• Setelah itu, Klik Tombol Simpan Template.
• Kemudian Jika ingin mengaktifkannya, Masukan Kode class="preview" dan title="Judul Atau Keterangan Gambar" Seperti Kode berikut :

<a class="preview" href="URL Blog Dari Gambar Anda" title="Judul atau keterangan Gambar Anda"><img alt="Keterangan Gambar" src="URL Gambar Anda" width="Lebar Dari Gambar" /></a>

Keterangan:

Ganti Kode Berwarna Merah dengan URL Blog dari Gambar Anda.

Ganti Kode Berwarna Kuning dengan Keterangan Atau Judul Gambar.

Ganti Kode Berwarna Hijau dengan Keterangan Gambar.

Ganti Kode Berwarna Biru dengan URL Gambar Anda.

• Setelah itu, Klik Tombol Publikasikan.

Selamat Mencoba,
Salam Sukses,




Your-BelajarBLOG