Memasang jQuery Efek Zoom Gambar Bisa Bergeser

Memasang jQuery Efek Zoom Gambar Bisa Bergeser - jQuery Efek Zoom Gambar adalah cara membuat efek pada gambar yang ada di postingan blog agar gambar tersebut terkesan lebih menarik dan membuat gambar menjadi membesar serta bisa di geser-geser.

Cara Memasang jQuery Efek Zoom Gambar Bergeser ini langkahnya cukup singkat dan mudah, hanya dengan menambahkan sedikit kode saja maka gambar tersebut sudah terkesan menarik dan akan lebih memperjelas pengunjung.

Untuk itu, seperti apakah hasil dari Memasang jQuery Efek Zoom Gambar Bergeser di blog? Coba anda arahkan kursor pada gambar dibawah ini dan coba geser-geserkan kursor mouse anda pada gambar tersebut.

Begitulah hasil dari Memasang jQuery Efek Zoom Gambar Bisa Bergeser di Blog.
Jika anda ingin membuat gambar di blog anda seperti pada gambar diatas, berikut cara Memasang jQuery Efek Zoom Gambar Bisa Bergeser:

1. Login ke akun Blogger anda
2. Kemudian pada Dashboard blog anda klik Template > Edit HTML
3. Cari kode </head>, Copy kode berikut ini kemudian letakan tepat diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://faceblog-evolutions.googlecode.com/files/cloud-zoom.1.0.2.js' type='text/javascript'/>

4. Simpan template

Oke, sampai sini Tahap Memasang jQuery Efek Zoom Gambar Bisa Bergeser sudah selesai dan siap digunakan. Tahap selanjutnya sekarang adalah menambahkan tag pada gambar tersebut saat posting, caranya sebagai berikut:

<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="URL GAMBAR ANDA" imageanchor="1" => <img border="0" height="300" src="URL GAMBAR ANDA" width="460" /></a></div>

Catatan: Tulisan yang berwarna merah silahkan ganti dengan URL gambar sesuai keinginan anda.

Contoh :

<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_1qxfp7xrstM_9oE00CW69krLaHzAqNjYb0QU3D1Ff96WfhfJYQB06T03CGEXk0Dh5h35CbgT6pmZ08a3uHaLg2KckoufQETQr-vgpDcn22nkPbKueulOy-aCot_osD1lwLpclm3FHE/s1600/large-zoom-example.jpg" imageanchor="1" => <img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_1qxfp7xrstM_9oE00CW69krLaHzAqNjYb0QU3D1Ff96WfhfJYQB06T03CGEXk0Dh5h35CbgT6pmZ08a3uHaLg2KckoufQETQr-vgpDcn22nkPbKueulOy-aCot_osD1lwLpclm3FHE/s640/large-zoom-example.jpg" width="460" /></a></div>