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>
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/AVvXsEg6MZ_shWzHt1-s1-gD49aVPSSDQK-hBJ6-XndTzqkIarYHj9S0vzOBxYpLd3EPYwkDUYHzR1xAibJxx2zDtpoTYAn7vv2cMmczlGe_pRRgKSug8d3WMTfLS7RS7cPZBL0Mif602qY4fVs/s1600/large-zoom-example.jpg" imageanchor="1" =><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MZ_shWzHt1-s1-gD49aVPSSDQK-hBJ6-XndTzqkIarYHj9S0vzOBxYpLd3EPYwkDUYHzR1xAibJxx2zDtpoTYAn7vv2cMmczlGe_pRRgKSug8d3WMTfLS7RS7cPZBL0Mif602qY4fVs/s640/large-zoom-example.jpg" width="460" /></a></div>
12 Response to "Memasang jQuery Efek Zoom Gambar Bisa Bergeser"
maksi infonya gan,,mantap dan bermanfaat..
Balasthanks sob
BalasThx gan infonya,,, itukan utk blogger, klo tuk wp self host gmna gan caranya ? sudah saya coba tapi masih error...
BalasLengkap banget ternyata di blog ini.. seneng deh kalo otak atik jquery sama css
Balasmantap .
BalasGan. maaf bertanya. kalau yang g palah nambahin kode lagi disetiap gambar ada gan? jd, seluruh gambar otomatis kenak efeknya.
Balassaya newbie. hehehe :)
kalo yang otomatis pakenya css mas. ini cuma pake jquery aja, jadi gambar harus load dulu. sebenernya simple mas, jika pada saat posting pake mode COMPOSE lalu upload gambar setelah itu pindah ke mode HTML kodenya pasti seperti ini:
Balas<div class="separator" style="clear: both; text-align: center;">
<a href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="65" src="URL GAMBAR" width="320" /></a></div>
lalu untuk memanggil efek ini cukup menambahkan
class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"
aja sesudah tag <a atau sebelum href. jadi lengkapnya kayak yang ada diatas
tips-nya oke punya masbro :)
BalasGambar yang artikel lama ga kena efek donk/
Balasmnthappppp...thanks brooo
Balasmantap gan tutorialnya dah ane praktekin di blog ane... ane edit dikit dibagian ini gan
Balas(position:'inside', smoothMove:2) position inside ane ganti jadi center, tujuan awal biar posisi gambar pas ditengah area posting, ternyata malah zoom diluar area gambar gan tapi posisinya dipojok kanan bawah gambar, bisa ga kalo di samping kanan gambar seperti contoh ini http://cssglobe.com/jquery-plugin-easy-image-zoom/
cek tkp gan... foto thumbnailnya juga belum bisa tengah... ane sih coba ganti semua position jadi center tapi belum berhasil nih hehe
http://digistore.blogspot.com.au/2013/12/tes-sampel.html
Woaah, worked nih.. Makasih banyak Mas.. :D
BalasOia, untuk buat di bawahnya ada gambar produk dari sisi lain yang bisa dizoom juga (kayak di OLShop-OLShop) gitu, gimana ya Mas?
- Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
- Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
- Apabila artikel yang berjudul "Memasang jQuery Efek Zoom Gambar Bisa Bergeser" ini bermanfaat, share ke jejaring sosial.
Konversi Kode