Wadah Madrasah Pengalaman: Tutorial Header hover - swinging


Monday, October 24, 2011

Tutorial Header hover - swinging



.



Assalammualikum...


Hari nie wan nak kongsi Tutorial Header hover - swinging nie..Tutorial dari Blog Syafa Lunia..Wan cuma kongsikan je..Kalau korang nak tengok contoh macam mana lah Header yang Swing Swing nie kan..Korang tengok terus ke blog Syafa Lunia k.


Tutorial disalin 100% dari blog Syafa Lunia
diubah sedikit mengikut kesesuaian.


Tutorial kali ini direquest oleh Cik Nisa. Cuba korang halakan mouse dekat header aku, dia macam bergerak senget tu kan? Ha itulah maksudnya header hover style swinging. Loading.......

Fyi, aku adalah pengguna Simple Template yang sangat tegar :3


Simple Template

Dashboard -> Design -> Edit HTML
Kemudian, Ctrl-F cari code ;

.Header h1 {

Bila dah jumpa, paste code bawah ni dekat atas code tadik.

#header:hover{
-webkit-transition-duration: 2s;
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
}


Washed Denim

Dashboard -> Design -> Edit HTML
Kemudian, Ctrl-F cari code ;


h1.title {

Bila dah jumpa, paste code bawah ni dekat atas code tadik.

#header:hover{
-webkit-transition-duration: 2s;
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
}



Yang warna kuning boleh adjust senget dia.
Sebelum nak tekan save, peview dulu ya. Selamat Mencuba!!


.



21 comments:

msrh's said...

salam, wan hazel macamane nak buat header kerawang? huhu >.<

사유리 하나 (SaYuRi) said...

guna template minima boleh ker guna code ni wan?

Wan_hazel said...

사유리 하나 (SaYuRi)

yg tu wan tak pasti lak..boleh je kot

Wan_hazel said...

msrh's

salam..kerawang tu camne??

msrh's said...

err , tatau camane nak explain. huhu. tapi nak buat header kerawang.. alahai, ashane nak explain ni T^T

Wan_hazel said...

kalau ade contoh ..boleh gak wan taw..ehehe

msrh's said...

salam wan , contoh dekat blog sy. try tengok dekat sidebar, ty! :")

Wan_hazel said...

ok..wan tgk..yg bunga2 tu ke???

msrh's said...

ha'ah , yang atas thank you tu. boleh ajar macamana nak jadikan header tak? huhu/ tapi kalau menyusahkan no need la ya :)

Wan_hazel said...

yg tu download brush adobe je..lepas tu wat je header macam tu..so jadi lah..ehhee

Anonymous said...

abg wanhazel,
acanee kalau taknak rotate.ta[i nak ke kiri atau ke kanan?

Wan_hazel said...

anon try buag negatif dekat no 4 tu..

Anonymous said...

kalau buang negatif dea tetap rotate.cume dia rotate ke kanan.tp abg wan tau tak cane nak gerakkan ke kanan tanpa rotate.kalau taktau takpelaa.terima kasih, :)

Wan_hazel said...

owh yg tu..wan tk taw lak

IrA tHIrA said...

kenapa x jadi

Wan_hazel said...

tak jadi???kod dh betul ke??

Anonymous said...

kalo untuk classic template cam mane??

Wan_hazel said...

classic template erm kene ubah koding..susah nak kasi taw...dan susah jugak nk wat koding dia..

YAYAyanie:)DD said...

tlg lah buat untuk simple template punya.please pleaseeee :(

Wan_hazel said...

alamak...camne lak simple template

Nur Razlinda said...

maceh !! menjadi la :)