Memasang jQuery Efek Zoom Gambar Bisa Bergeser

Memasang jQuery Efek Zoom Gambar Bisa Bergeser adalah membuat efek pada gambar yang ada di postingan blog agar supaya 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. Teknik untuk Memasang jQuery Efek Zoom Gambar Bisa Bergeser sangat cocok untuk diterapkan apabila blog tersebut adalah blog tutorial, karena Memasang jQuery Efek Zoom Gambar Bisa Bergeser membuat gambar menjadi lebih fokus dan memberi efek zoom yang lebih akurat dan tepat sasaran. 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 Bisa Gambar 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> gunakan CTRL+F untuk mempermudah pencarian.
4. Jika sudah ketemu, Copy kode berikut ini kemudian letakan tepat diatas/sebelum 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'/>

5. 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/AVvXsEjfDvEhS9Us9ZfuFO11p5goJlHvhcdJ87vShGFz9IyoKtgFcnuSIXtQWikl0X4XmsxMBV6mCf-AaosagsJJUdTNEHbwCEOB0X40722NlkCOQZtdD8gzarxjLlO1C4W9odSfLkBSRdjNJV0/s1600/large-zoom-example.jpg" imageanchor="1" =><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfDvEhS9Us9ZfuFO11p5goJlHvhcdJ87vShGFz9IyoKtgFcnuSIXtQWikl0X4XmsxMBV6mCf-AaosagsJJUdTNEHbwCEOB0X40722NlkCOQZtdD8gzarxjLlO1C4W9odSfLkBSRdjNJV0/s640/large-zoom-example.jpg" width="460" /></a></div>