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>
Klik "Simpan Template".
<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>
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.
Tidak ada komentar:
Posting Komentar