TUTORIAL: Hover Header bergerak ke tepi.

Comel nyeeeee~

Ok Ain nak kongsi hover header yang bergerak ke kiri. Bila korang sentuh header tu, header tu akan bergerak ke kiri ataupun ke kanan. Jom try!


First step: Go to Dashboard >> Template / Design >> Edit html *tick expand widget then click ctrl + F and search for this code :
#header {
atau

h1.title {

atau

#header h1 {

Second step: Dah jumpa? Then korang nampakkan code dia panjang, sampai kat simbol " { " korang paste kan code yang Ain nak bagi ni kat bawah simbol " { " ok.
#header:hover {
padding-left: 40px;
-webkit-transition-duration: 2s;
}

Last step: Preview then save. Ok sudah siap! Jadi tak? Kalau jadi sila komen and kalau tak jadi pon sila komen. Saya akan bantu awak.


P/S: Yg " left " tu boleh tukar kepada " right " kalau anda nak, ok.

Nak lagi??? Tekan TUTORIAL ok!

10 comments:

  1. Tak jumpa kod tu la , KakAin :(

    ReplyDelete
  2. @rishahAtaupun awak cari " /* Header " OR " h1.title { ". Jumpe tak? Kalau jumpa, lepas tu awak akan jumpa " #header:hover { " dan paste kan code yang awak nak kat bawah tu. Faham???

    ReplyDelete
  3. Ain yg ni gerak kanan laa, nk tnya cmna gerak ke kiri? please

    ReplyDelete
  4. ain , edit HTML tu dekat mane ye ? and then , nak cari kod tu camne ?

    ReplyDelete

Ce komen ce komen :)