Tutorial : Image Hover 16 (Shake)

Assalamualaikum . Aimi rasa tutorial kali ni pun jarang orang gunakan effect blur dalam image hover sebab mungkin akan memeningkan kepala orang yang berkunjung tu . If korang berminat nak buat image hover yang pada mulanya akan blur , dan bila dihalakan cursor kepada gambar , gambar akan mulai terang . Berminat ? Jom ikut step di bawah . 

Blogskin/Classic Template

1. Dashboard > Template

2. Press F3 dan cari code </style>

3. Copy code di bawah ni 

<style> .shakeimage{ position:relative } </style> <script language="JavaScript1.2"> /* Shake image script (onMouseover)- © Dynamic Drive (www.dynamicdrive.com) For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ //configure shake degree (where larger # equals greater shake) var rector=3 ///////DONE EDITTING/////////// var stopit=0 var 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 } </script>

4. Paste code di bawah code yang korang cari tadi

5. Sekarang , copy code kat bawah ni pulak

<imgsrc="URLIMAGE"width="200"height="200"class="shakeimage"onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()">

6. Paste dekat mana mana bahagian blog yang korang suka . Exp : Sidebar

7. Preview & save

merah : URL gambar

ungu : korang boleh adjust ikut suka okay ? 

Credit to : AtinTory