Buat Efek Pindahkan gambar dengan JQuery

Gambar dalam artikel sangat berarti dalam memperjelas isi atau konten yang sedang dibuat. Tampilan gambar juga bisa dirubah sehingga menjadi lebih cantik,dengan gambar dengan jQuery. Maksud dari effect ini ialah kita dapat menggeser gambar sesuai dengan keinginan kita pada gambar posting atau gambar di blog.

Untuk membuatnya,ikuti di bawah ini :

1. Login di Blogger .
2. pilih Rancangan lalu edit HTML
3. Centang Expand Template Widget
4. Klik Download template lengkap.
5. pasang Css kode dibawah ini diatas kode ]]></b:skin>

.drag_gambar img { cursor: move;}

6. Selanjutnya simpan kode 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>

catatan :
Perhatikan kode script diatas, jika pada template sudah terdapat script tersebut, jangan dipasang lagi, pasang saja script yang dibawahnya.

7. Kemudian klik Save/Simpan Template
Untuk penggunaannya pada gambar, gunakan kode berikut :

<div class='drag_gambar'>
<img alt='keterangan gambar' src='URL gambar'/></div>

tutorial bisa memperindah tampilan gambar yang ada.

Selamat mencoba dan semoga bermanfaat.