Drag Me Donk jQuery di Blogger Template

Demo

Draggable adalah salah satu fasiltas yang dikembangkan dengan javascript jQuery. Disini saya mencoba menerapkan fungsi Draggable yang di kembangkan UI/API/1.7.1/Draggable di blogger template. Sebelumnya ada dapat melihat demo penerapan Drag Me Donk Jquery (Draggable), yang saya terapkan pada RSS.

Penerapan Draggable di Blogger Template

Penerapan fungsi Draggable jQuery di blogger template ini tidak terlalu sulit, kita tinggal menambakan perintah "class='draggable'" pada elemen yang kita berikan fungsi tersebut.

Tahapan penerapannya, seperti pada demo, saya menggaktifkan fungsi draggable pada RSS, maka saya tinggal memasukan "class='draggable'" seperti berikut:

code aslinya:

<div id='rssicon'>
<a href='http://demojquery.blogspot.com/feeds/posts/default'><img alt='rss' src='http://lh4.ggpht.com/_dfnTVAxeWMI/Sl9cKBBUxnI/AAAAAAAABfs/OKjk6Kjry5M/s800/rss.jpg'/></a>
</div>

code penambahan 'draggable':

<div class='draggable' id='rssicon'>
<a href='http://demojquery.blogspot.com/feeds/posts/default'><img alt='rss' src='http://lh4.ggpht.com/_dfnTVAxeWMI/Sl9cKBBUxnI/AAAAAAAABfs/OKjk6Kjry5M/s800/rss.jpg'/></a>
</div>

Kemudian memasukkan kode javascript jQuery diatas </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

:: catatan apabila anda telah memiliki script jQuery ini, maka script ini tidak perlu anda masukkan.

dan masukan juga kode javascript berikut:

<script src='http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js' type='text/javascript'/>
<script src='http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js' type='text/javascript'/>
<script type='text/javascript'>
  $(document).ready(function(){
    $(&quot;.draggable&quot;).draggable();
  });
</script>

Sip selesai.

Artikel Terkait di Bawah posting