Dragable Elements - Foto atau Text Berpindah Saat di Drag

Lama juga gak posting soal trik. Setelah berbagai kesibukan hanya posting soal tips dan banyaknya award yang saya terima, kini saatnya membagikan lagi trik buat blogger semua. Sudah banyak sekali saya membahas trik mengenai blogging. Mulai dari modifikasi link yang sangat beraneka ragam, gambar, header, atau bagian body tampilan anda, nah kali ini saya akan memberikan trik bagaimana agar foto Anda dapat dengan leluasa digeser pengunjung hanya dengan drag. Begitu juga dengan text Anda. Nah seperti biasa saya beri contohnya dahulu...




Untuk text yang bisa berpindah

Mas Doyok

Nah bagus bukan???
Bagi yang pengen langsung saja gunakan langkah-langkah berikt:

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: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

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>

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 sobat..... Thx to DynamicDrive