DON'T LIKE ME

Gambar berpindah oleh gerakan mouse


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



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 :
TERIMAKASIH SUDAH BERKOMENTAR


Comments
0 Comments

0 komentar:

Posting Komentar