Trik Membuat Tulisan atau Gambar Bisa Digeser Dengan Mose

Wah, wah, wah . . . .apa ada Sobat Blogger yang masih bingung dengan judul post di atas ??? maksudnya adalah ,membuat text atau gambar bisa dipindah-pindah dengan Mose.
Nah, Mungkin Anda masih bingung ya..tenang saja,dipostingan ini sudah saya siapkan contohnya kok jadi anda bisa langsung mencobanya.Didalam postingan ini ada 2 contoh berupa text dan gambar,jika anda ingin mencobanya silahkan klik ,tahan dan geserlah mose anda kemana yang anda suka.lihat hasilnya Sip bukan hehehehehehe......
Dari pada anda penasaran lebih baik kita coba saja praktekkan
pada teks dan gambar berikut ini;
ok Sobat,apa anda sudah siap
kalau sudah siap yah langsung saja yuk kita
praktekkan bersama-sama:

Contoh Teks:

COBA GESER

Contoh Gambar



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> 

Kemudian Simpan
Nah, sekarang kita ke tutorial membuat effeknya, jika Sobat akan meletakkan text atau gambar yang bisa digeser 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>

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

Buka halaman Design/Rancangan >> Page Element/Elemen laman >> Add gadget/tambah gadget >> pilih HTML javascript >> masukkan kode-kode tadi >> Simpan
Selamat mencoba moga bermanfaat.