Your Ad Here

Shake Image And Link On Blog



Shake Image And Link On BlogSetelah sekian lama tidak pernah aktif dalam dunia blog dan berkunjung kesini untuk oprek-oprek code dikarenakan kemalasan serta kejenuhan yang melanda, pada kesempatan ini saya hanya ingin berbagi trik sederhana untuk mempercantik blog dengan effect shake atau getar pada gambar serta link.

Ok dech langsung saja pada topik pembahasan dan tidak usah terlalu banyak kata-kata daripada akan membuat kita tambah bingung hehehe...:D
Untuk code lengkapnya para sobat bisa langsung mampir kesini (pencet keras-keras), namun untuk para sobat blogger yang awam tentang coding seperti saya ini pasti akan mengalami kesulitan xixixi...:D

Akan tetapi para sobat tidak usah khawatir karena semua code tersebut telah dirombak dan dimodified oleh sahabat saya yang bernama Joy, sehingga kita tinggal meletakkan saja tanpa harus pelototin code satu persatu wekekek...:D

Langkah pertama yang harus sobat lakukan masuk pada account blogger yang sobat miliki kemudian klik pada bagian Design -> Edit HTML, centang pada bagian expand widget untuk menghindari kesalahan pada saat pengeditan agar bisa dikembalikan seperti semula.

Selanjutnya silahkan sobat cari code ]]></b:skin>, kemudian copy code dibawah ini tepat dibawah code tersebut atau diantara tag head...






<script type="text/javascript">
/*
Shake link/image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
Simplified by CrazyDaVinci - http://crazydavinci.net
*/
var type="a",rector=3,stopit=0,a=1;
function init(which){
stopit=0;shake=which;shake.style.left=0;shake.style.top=0;
}
function rattleimage(){
if((!document.all&&!document.getElementById)||stopit==1)return;
if(a==1)shake.style.top=parseInt(shake.style.top)+rector+"px";
else if(a==2)shake.style.left=parseInt(shake.style.left)+rector+"px";
else if(a==3)shake.style.top=parseInt(shake.style.top)-rector+"px";
else shake.style.left=parseInt(shake.style.left)-rector+"px";
if(a<4)a++;
else a=1;
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1;
which.style.left=0;
which.style.top=0
}
function shakeit(){
link=document.getElementsByTagName(type);
for(i=0;i<link.length;i++){
link[i].style.position="relative";
link[i].onmouseover=function(){init(this);rattleimage()};
link[i].onmouseout=function(){stoprattle(this);top.focus()}
}
}
if(window.addEventListener)window.addEventListener("load",shakeit,false);
else if(window.attachEvent)window.attachEvent("onload",shakeit);
else if(document.getElementById)window.onload=shakeit
</script>



Setelah para sobat selesai meletakkan codenya jangan lupa tekan save, namun apabila code tersebut error dan tidak bisa tersimpan khususnya untuk blogger silahkan sobat parse dahulu code tersebut dan simpan kembali serta lihat hasilnya dech hehehe...:D

Untuk pengguna wordpress org silahkan letakkan codenya pada bagian fotter php, namun untuk pengguna wordpress com sepertinya harus gigit jari dulu dech dikarenakan tidak bisa diedit-edit pada bagian phpnya xixixi...:D

Sekian penjelasan dari saya dan apabila ada kesalahan kata mohon maaf yang sebesar-besarnya, happy tweaking blogger Indonesia...:D

Live preview : Click here.
Specials thanks to : Joy Crazydavinci.

Share to:

Related Post:

5 Response to "Shake Image And Link On Blog"

  1. Aisyah says:

    met sore ka,,, gimana kabar??

    tambah keren aja nich kk.

    Alhamdulillah kabar baek Bang,,,btw dah nikah dan punya anak brp neh???
    Ini we lagi konsen GA bang,,,

    Jimox says:

    bang......................... kangen udah lama gak ngeblog...
    jimox.net ku di serobot orang bang... sekarang pindah di www.jimox.asia
    menurutku blog ini dijadiin blog tutorial kusus tweaking aja bang. hehe... berguna banget buat aku, daripada tanya2 via YM. hehe... link disamping di update ya bang.. jimox.net mengarah pada web iklan tok... asu yang nyerobot (salahku juga sih telat memperpanjang)

    mau nyoba ah....
    :D

    asem asem says:

    hy sob..
    link NT udah ane masukin ke blog ane gan..
    iktuin tutorial ini yah.
    http://forum.balikita.net/viewtopic.php?id=3790

Post a Comment

Sudah baca jangan lupa tinggalin komentarnya yach friend's tanpa kalian semua saya bukanlah apa-apa,thanks...:-)

Powered by Blogger