Rabu, 04 Mei 2011
Membuat Efek Memindahkan Gambar Dengan jQuery
Gambar dalam sebuah artikel sangat berarti dalam memperjelas isi atau konten yang sedang kita buat. Tampilan gambar juga bisa dimodifikasi sehingga menjadi lebih cantik, Setelah sebelumnya saya pernah membahas dalam mempercantik tampilan gambar dengan efek zoom, kali ini saya akan berbagi lagi satu tips untuk memperindah gambar yang kita tampilkan di artikel, yaitu memindahkan gambar dengan jQuery. Maksud dari effect ini ialah kita dapat menggeser atau mendrag gambar sesuai dengan keinginan kita pada gambar posting kita atau gambar di blog kita. Untuk lebih jelasnya klik tombol demo dibawah ini, geser salah satu gambar yang ada disana.:
Nah jika temen-temen tertarik untuk membuatnya, perhatikan langkah-langkahnya di bawah ini :
- Login dulu di Blogger dengan akun anda.
- Pada dashboard pilih Rancangan >> edit HTML
- Jangan lupa Centang Expand Template Widget
- Klik Download template lengkap untuk jaga-jaga.
- Sekarang pasang Css kode dibawah ini diatas kode ]]></b:skin>
.drag_gambar img { cursor: move;}
- Selanjutnya simpan script berikut diatas kode </head><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {$("div.drag_gambar img").draggable();});</script>Keterangan :
Perhatikan kode script berwarna Kuning diatas, jika pada template anda sudah terdapat script tersebut, jangan dipasang lagi, pasang saja script yang berwarna merah. - Kemudian klik Save/Simpan Template
- Untuk penggunaannya pada gambar, anda bisa menggunakan kode berikut :
<div class='drag_gambar'><img alt='KETERANGAN GAMBAR' src='URL GAMBAR'/></div>
Mudah bukan, tutorial ini sangat sederhana dan bisa memperindah tampilan gambar yang ada di artikel anda. Jika ada yang mau ditanyakan silahkan untuk mengisi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.
Label: