Gambar berpindah oleh gerakan mouse

---

JUDUL  :  GAMBAR BERPINDAH OLEH GERAKKAN MOUSE

---

Artikel Terkait

• Postingan dengan DROPDOWN menu
• Mengubah background judul postingan
• Widget Kembali Ke atas
• Menampilkan file PDF/WORD/EXCEL pada blog
• Cara mengganti tampilan kursor
• Cara membuat background pelangi
• Cara membuat tombol pengganti backround image
• Cara Membuat Tombol Facebook Like di Blogger
• Cara membuat link bintang berkedip

 ----------------------------------------------------------------------------------

Sekedar variasi dalam menampilkan image pada blog, tips ini merupakan cara menampilkan image yang apabila disorot oleh mouse, kemudian digeserkan/drag, maka image tersebut akan bergerak mengikuti arah mouse.
Mungkin trik ini tidak terlalu penting untuk ditampilkan pada blog. Tapi tidak ada salahnya kalau dicoba untuk tampil pada blog anda, sekedar variasi dari tampilan gambar yang mungkin dapat menarik mnat tamu blog anda untu memindahkan gambar tersebut.

LANGKAH PERTAMA

1. Masuk ke Blogger dengan ID anda
2. Masuk Rancangan
3. Pilih Edit HTML
4. Cari kode </head> pada template anda
5. Copy kode dibawah ini, kemudian paste tepat diatas kode tadi
   
   
   
   <style type="text/css">
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>
<script type="text/javascript">
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. Klik Simpan Template

LANGKAH KEDUA

• Langkah kedua ini bisa anda terapkan pada postingan maupun pada elemen halaman
• Tambahkan kode class="drag" pada alamat gambar
• Perhatikan contoh dibawah ini (perhatikan yang berwarna merah.
  
  <img src="http://img52.imageshack.us/img52/3915/36261.gif" class="drag"/>

By : Bang Udin

----------------------------------------------------------------------------------

Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel

----------------------------------------------------------------------------------

Postingan Baru :

• Cara membuat link berkedip ketika cursor melintas
• Cara Membuat Effect Snow Atau Tabur Salju Di Blog
• Cara Intalasi Windows Seven ( 7 ) Lengkap
• Code Rahasia Semua Type Handphone Lengkap
• Cara Daftar Dan Merubah Domain Blogspot Ke .CO.TV
• Cara Membuat Cursor Bertabur Bintang
• Cara Pasang Meta Tag Di Blogger SEO Friendly
• Cara Memasang Share Pack (Share Post To Social Boo...
• Cara memasang sharing is sexy di blogspot
• Cara Membuat Taskbar Ato Toolbar Melayang Di Blog
• Cara Membuat Shoutmix Tersembunyi
• Cara Membuat Link Warna - Warni Pelangi Di Blog
• Cara pasang video di blog
• Cara Membuat Link Berkedip Warna Warni
• Tempat Ganti Code Warna
• Cara Menu Tab View di Samping
• Cara Membuat Tulisan / text Berkedip
• Cara Membuat Menu Melayang
• Efek Marquee untuk Banner Berjalan
• Salam Pembuka Sesuai Dengan Settingan Waktu
• Mengganti Icon Blogger
• Cara membuat addres bar berjalan

TERIMAKASIH SUDAH BERKOMENTAR