Cari Artikel Blog Ini

Total Tayangan Laman

GAMBAR BERPINDAH OLEH GERAKKAN 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

  1. Langkah kedua ini bisa anda terapkan pada postingan maupun pada elemen halaman

  2. Tambahkan kode class="drag" pada alamat gambar

  3. Perhatikan contoh dibawah ini (perhatikan yang berwarna merah.
    <img src="http://img52.imageshack.us/img52/3915/36261.gif" class="drag"/>

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
3 Comments

3 komentar :

Blogger Terpanas mengatakan...

mantap tipsnya, namun bikin berat loading blog nggak mas?

Mugi Fitrianto mengatakan...

bagus juga cie..cuma aku belum melihat manfaat yang baik di sini

kidsgen mengatakan...

bagus..bagus..bagus...thx. by the way, boleh nggak tukeran link?...kali aja suka juga dengan blogku yang isinya tentang Pelajaran Sains untuk Anak-anak SD. Thx ya..

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!