DC Community: Cara Membuat Gambar Dapat Digeser

contoh 1 : geser gambar ini.

Kesempatan posting kali ini saya akan sharing Cara Membuat Gambar Dapat Digeser. Contohnya bisa di lihat seperti yang di atas dan di bawah postingan 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() {
$("div.drag_gambar img").draggable();
});
</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script></head>
<body class='loading'>
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>

Klik "Simpan Template".

Untuk penggunaannya, gunakan kode dibawah ini.

<div class='drag_gambar'><img alt='KETERANGAN 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.

Contoh 2 :

Sekian deh yang bisa saya posting,, good luck. :)

source : http://infotips-rama.blogspot.com/2011/12/cara-membuat-gambar-dapat-digeser.html

DC Community

Pages

Senin, 02 Januari 2012

Cara Membuat Gambar Dapat Digeser

8 komentar: