Skip to main content

TUTORIAL : HOVER HEADER SHAKE

بِسْـــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم 

Asslamualaikum.
Yeah. Share tuto ini bersama :)
harini nak share tuto tentang hover header yang boleh shake-shake.
Haa. nak try ?
follow this step gais .



1. Dashboard > Template
2. Tekan Ctrl + f dan cari code <style> atau </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 di bawah code tadi
5. Next, korang copy code 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-II yang korang nak. Kalau boleh dekat bahagian sidebar
7. Preview & save

oren : URL image
biru : lebar image
hijau : tinggi image

credit to: AtiQah
 

Comments

Popular posts from this blog

Tutorial : Letak Countdown Day

بِسْـــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم 
Assalamualaikum semua..
Harini saya nak ajar on how nak letak countdown day like mine.
macam saya sendiri, saya letak countdown SPM 2016.
so, lets get yours guys.

Follow this step yea ?
jangan terlepas satu pun okay :)
okay .

 1. korang bukak dulu laman web ini. Countdown

2. korang tengok dekat bahagian My Countdown .

3. Then korang boleh pilih lah sama ada for your Exams, or Birthday or others.

4. Next korang pilih lah countdown widget mana yang berkenan di hati.

5. Next, tekan dekat get the Exam countdown widget . and customize yours.

6. bila dah settle. korang tengok tepi belah kiri. ada code dia. korang tekan Click Here to Import Your Widget. and then , korang copy and paste lah code itu di bahagian sidebar blog korang.

7. preview dulu. and then save.

itu aja :)

STREET ART GATEAWAY 2016

بِسْـــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم

ASSALAMUALAIKUM . HEHAI
yeah. today entry just want to upload pic from our nice journey during holiday.

Venue : Art Street Penang , Batik Painting Museum Penang
Date : Early in this year

















more information about this museum you can dm me in my email  nurmusfirah1999@gmail,com
thanks !!

ESCAPE GATEAWAY 2016 FINAL SEMESTER 1

بِسْـــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم 


throwback .
escape gateaway :)
nice mission .
Lots of love :)