ads
Home » » Cara Membuat Gambar Dapat Digeser

Cara Membuat Gambar Dapat Digeser

Written By Ramadhan Fnw on Dec 28, 2011 | 7:35 PM

Alhamdulillah, akhirnya bisa posting lagi. ^^
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">
</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() {
$(&quot;div.drag_gambar img&quot;).draggable();
});
</script>
Klik "Simpan Template".

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. :)


Share this article :

24 komentar:

Black Angel Syndicate said...

Pertamax sob... Mampir balik ya sob...
Berbagi HACKING, TWEAKING, SOURCE CODE, SOFTWARE, GAME, dll

Musa Khairul Umam said...

Demonya mana sob ?

Mr.Randy said...

owhh gitu ya?btw ane gak make jquery jga bisa koq hehe tuh liat diblog aq yg drag chess

Taufik Nurrohman said...

@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.

mizzu said...

load speednya tambah berat gk???

Harun Hasibuan said...

mantab.........tp liat demonya dong sob....hehe

Unknown said...

lihat demonya aja udah kere bisa dipindahin kemana mana gambarnya kapan kapan ntar ane coba pakai

Ramadhan Fnw said...

@Black Angel Syndicate: oke sob. :)

Ramadhan Fnw said...

@Musa Khairul Umam: itu sudah saya sediakan linknya sob, :)

Ramadhan Fnw said...

@randy oktaran: kalo sobat kan sudah jago. :)

Ramadhan Fnw said...

@Taufik Nurrohman: sang master nih, :D

Ramadhan Fnw said...

@mizzu: InsyaAllah egak, :D

Ramadhan Fnw said...

@IT-Soft Center: itu sob, sudah saya sediakan linknya. :)

Ramadhan Fnw said...

@WahidBlog: silahkan sob, :)

MHARJIPES.COM said...

Sipp Nice Share gan,

Lanjut berkarya!

ane praktek dulu yagh?

Mbah Qopet said...

wah keren nih , yg kayak punya bang Randy ya ini ?

Ramadhan Fnw said...

@MHARJIPES.COM: sipp sob, happy new year ya. ^^

Ramadhan Fnw said...

@Mbah Qopet: gk tau sob, ini saya repost artikel saya dulu. :)

Sakahayang Kang Asep said...

Wah sepertinya keren gambarnya bisa digeser2....
demonya bisa saya lihat dimana ya sob?

happy blogging

Blogger Blegedes said...

Manteebbss nich.. ntar saya coba.. salam Blogging.. :D

Ramadhan Fnw said...

@Sakahayang Kang Asep: itu sob, ada linknya. :)

Ramadhan Fnw said...

@Blogger Blegedes: hehe, thnks sob, silahkan dicoba. :D

Andi Sitorus said...

mau coba dulu ah,mudah2an berhasil....upss ada yang lupa ne....tanks gan..

Ramadhan Fnw said...

@B@zz0874oke gan, silahkan dicoba, :D

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Share Our Knowledge - All Rights Reserved
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Blogger