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 ?

randy oktaran 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???

IT-Soft Center said...

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

WahidBlog said...

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

Share Our Knowledge said...

@Black Angel Syndicate: oke sob. :)

Share Our Knowledge said...

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

Share Our Knowledge said...

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

Share Our Knowledge said...

@Taufik Nurrohman: sang master nih, :D

Share Our Knowledge said...

@mizzu: InsyaAllah egak, :D

Share Our Knowledge said...

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

Share Our Knowledge 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 ?

Share Our Knowledge said...

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

Share Our Knowledge 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

Share Our Knowledge said...

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

Share Our Knowledge said...

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

B@zz0874 said...

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

Share Our Knowledge 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