RSS2.0

Gambar dan Tulisan bisa di drag

Kamis, 23 Desember 2010


tau gak, kalau hampir semua gambar yang ada di binar.tk bisa di drag? Contohnya aja gambar di atas,
gak cuma gambar lho yang bisa di drag, teks pun bisa di drag! Contohnya di bawah ini

binar.tk

pengen tau gimana cara membuatnya?
Ikuti tutorial di bawah ini:
1. Login ke blogger
2. Tata Letak
3. Edit HTML
4. Cari kode </head>
5. Letakkan script berwarna biru berikut di atas </head>



<style type='text/css'>
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>
<script type='text/javascript'>
/***********************************************

* Drag and Drop Script Hacked By.binar

***********************************************/
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className==&quot;drag&quot;){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+&quot;px&quot;
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+&quot;px&quot;
return false
}
}
}
dragobject.initialize()
</script>



6. Simpan Template Nah. untuk mengaplikasikan pada gambarnya gunakan script berikut saat membuat postingan (gunakan tab edit HTML bukan compose/tulis)
<img src="alamat gambar Anda" class="drag" ><br>
Sedangkan untuk text
<h1><b class="drag" >Teks Anda Disini</b></h1>


Ukuran bisa anda ganti dengan mengubah kode h1
Selamat Mencoba

0 Komentar:

Posting Komentar