7/10/2010

Trik Membuat Foto atau Gambar Bisa Didrag

Trik Membuat Foto atau Gambar Bisa Didrag - Wah, wah, wah . . . .apa ada Sobat Blogger yang masih bingung dengan judul post di atas ??? maksudnya adalah ,membuat text atau gambar bisa dipindah/drag.
( Drag ---> Diklik, jangan dilepas, lalu digeser )
Nah, sebagai contohnya, masuklah pada halaman berikut ---> di sini Pada halaman tersebut, ada 2 contoh berupa text dan gambar, klik ,tahan dan geserlah (Drag).
Nah, setelah Sobat melihat contohnya, sekarang kita menuju tutorial cara membuatnya,
  • Pertama, masuk ke blogger
  • Buka design/rancangan
  • Pilih Edit HTML
  • Lalu cari kode </head> (Gunakan CTRL+F )
  • Setelah ketemu, letakkan kode berikut tepat di atas kode </head>
<style type="text/css"> 
.drag{ 
position:relative; 
cursor:hand; 
z-index: 100; 
} 
</style> 
<script type="text/javascript"> 
/*********************************************** 
* Drag and Drop Script Hacked By.kadam
***********************************************/ 
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=="drag"){ 
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+"px" 
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px" 
return false 
} 
}  
} 
dragobject.initialize() 
</script> 
  • Simpan 
Nah, sekarang kita ke tutorial membuat effeknya, jika Sobat akan meletakkan text atau gambar yang bisa didrag pada halaman posting, maka caranya sebagai berikut,
  • Pada halaman posting, pilih Edit HTML
  • Nah, untuk membuat text dengan effek Drag, masukkan kode berikut
<h1><b class="drag">TULISAN DI SINI</b></h1> 
  • Untuk effek pada gambar/image 
<img src="URL GAMBAR" class="drag"><br> 
Hasilnya sekali lagi bisa dilihat pada halaman -----> Klik 


Jika akan memasukkan text atau gambar dengan effek drag pada sidebar, sebagai widget

  • Buka halaman Design/Rancangan >> Page Element/Elemen laman >> Add gadget/tambah gadget >> pilih HTML javascript >> masukkan kode-kode tadi >> Simpan
Selesai
Labels: ,