Kesempatan posting kali ini saya akan sharing Cara Membuat Gambar Dapat Digeser. Mungkin dulu saya pernah posting ini. Tapi gara-gara kecerobohan saya, posting itu pun hilang. Dan sekarang saya baru bisa re post Cara Membuat Gambar Dapat Digeser.
Oke, langsung saja ke topiknya "Cara Membuat Gambar Dapat Digeser".
Langkah pertama, login akun blogger kalian.
Lalu masuk ke 'Rancangan' - 'Edit HTML' (jangan lupa centang 'Expand Widget Template')
Setelah itu copy paste kode css dibawah ini, tepat diatas kode ]]></b:skin>
.drag_gambar img { cursor: move;}Lalu copy paste kode script dibawah ini, tepat diatas kode </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript">Klik "Simpan Template".
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("div.drag_gambar img").draggable();
});
</script>
Untuk penggunaannya, gunakan kode dibawah ini.
<div class='drag_gambar'><img alt='KET GAMBAR' src='URL GAMBAR'/></div>NB: Ganti teks warna biru dengan keterangan gambar kalian. Dan ganti teks yang di blok hijau dengan URL gambar kalian.
Nah, setelah jadi. Contoh hasilnya bisa dilihat disini.
Sekian deh yang bisa saya posting,, good luck. :)
24 komentar:
Pertamax sob... Mampir balik ya sob...
Berbagi HACKING, TWEAKING, SOURCE CODE, SOFTWARE, GAME, dll
Demonya mana sob ?
owhh gitu ya?btw ane gak make jquery jga bisa koq hehe tuh liat diblog aq yg drag chess
@Randy: Itu tetep pake JQuery kok. Cuma ditambah plugin supaya nambah efeknya. kalau istilah mudanya, "Plugin" itu seperti upgrade komputer. MEnambah fasilitas dari sesuatu yang belum ada. JQuery UI sudah sangat lengkap. Cukup instal sekali saja nanti pelajari semua kegunaannya.
load speednya tambah berat gk???
mantab.........tp liat demonya dong sob....hehe
lihat demonya aja udah kere bisa dipindahin kemana mana gambarnya kapan kapan ntar ane coba pakai
@Black Angel Syndicate: oke sob. :)
@Musa Khairul Umam: itu sudah saya sediakan linknya sob, :)
@randy oktaran: kalo sobat kan sudah jago. :)
@Taufik Nurrohman: sang master nih, :D
@mizzu: InsyaAllah egak, :D
@IT-Soft Center: itu sob, sudah saya sediakan linknya. :)
@WahidBlog: silahkan sob, :)
Sipp Nice Share gan,
Lanjut berkarya!
ane praktek dulu yagh?
wah keren nih , yg kayak punya bang Randy ya ini ?
@MHARJIPES.COM: sipp sob, happy new year ya. ^^
@Mbah Qopet: gk tau sob, ini saya repost artikel saya dulu. :)
Wah sepertinya keren gambarnya bisa digeser2....
demonya bisa saya lihat dimana ya sob?
happy blogging
Manteebbss nich.. ntar saya coba.. salam Blogging.. :D
@Sakahayang Kang Asep: itu sob, ada linknya. :)
@Blogger Blegedes: hehe, thnks sob, silahkan dicoba. :D
mau coba dulu ah,mudah2an berhasil....upss ada yang lupa ne....tanks gan..
@B@zz0874oke gan, silahkan dicoba, :D
Post a Comment