Iklan 300 x 250

Random Post

Recent Post

 

Cara Memindahkan Gambar Dengan jQuery

Text Resizer: Click for Resizer
Sesuai dengan judul diatas kali ini kita belajar mengenai beragam effect jQuery salah satunya ialah memindahkan gambar dengan jQuery atau yang lebih populer disebut Draggable Image With jQuery yang saya peroleh dari blog z33s. 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.


Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini:

1.log in dulu ke account blog sobat.
2.Pada dasbor pilih rancangan kemudian Edit HTML
3.Sekarang pasang Css kode dibawah ini diatas kode ]]></b:skin>
.drag_gambar img { cursor: move;}
4. 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() {
$(&quot;div.drag_gambar img&quot;).draggable();
});
</script>
Keterangan : Perhatikan kode script berwarna Kuning diatas, jikan pada template kalian sudah terdapat script tersebut, jangan dipasang lagi, pasang saja script yang berwarna merah nya.

5.Klik Simpan Template
6.Untuk penggunaannya pada gambar, kalian bisa menggunakan kode berikut :
<div class='drag_gambar'><img alt='KETERANGAN GAMBAR' src='URL GAMBAR'/></div>

Semoga bermanfaat dan selamat mencoba...


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Cara Memindahkan Gambar Dengan jQuery
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

17 komentar:

jquery emank manteb sob, hehee

sipp, makasii tutorialnya

sangat bermanfa'at trimakasih mas arga infonya :a:

Chandra mengatakan... Reply Comment

:j:

ketemu juga yang di cari2 selama ini :p:
makasih sob
post yang sangat bermanfaat :x:

Unknown mengatakan... Reply Comment

wah boleh juga nih sob
mau cba deh :)

wah bagus juga bang artikelnya nih boleh nih di coba untuk sekedar Refresing .,.,.,.,

ijial mengatakan... Reply Comment

wah . . jquery asik juga ya, belum sempet2 nih mau pelajarin

abaw mengatakan... Reply Comment

wah, keren euy, kesan pertama mampir langsung takjub ada 'burung' yang selalu ada di layar =)

busset...demonya keren bro!!!

Anonim mengatakan... Reply Comment

follback nya ditunggu mas >> http://demonztrick.blogspot.com/

cardiacku mengatakan... Reply Comment

makasih atas berbagi tipsnya sob..keren nih.
Memberatkan loading page ndak sob...?

salam kenal gan ...okey banget artikelnya ..bisa di coba..juga .happy blogging

Follbacknya dong bro ..
http://www.vii-ker.co.cc

tx :k:

Follbacknya dong bro ..
http://www.vii-ker.co.cc

:k:

Demonya Keren Sob, ..... mantab pisan Euy!

Alan27 mengatakan... Reply Comment

sobat.....banner agan udah di pasang di blog ane....pasang punya ane ya...:)
oya..follow balik jga yah....:)

keren bro.ditunggu follback x..hehe

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Posting Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky