Tutorial Header Hover Part 2

8:34 PTG

Assalamualaikum w.b.t


Okay tadi D'ya dah buat tutorial header hover part 1 di mana header hover ini akan senget ke sebelah.Kali ini D'ya nak sambung header hover part 2 pulak (amboi, nak update tutorial banyak2 time ada mase free ni, ehhehe). Header hover part 2 kali ini simple sangat-sangat di mana ia hanya melibatkan position kiri atau kanan.


Contoh ni header D'ya Marshmello sebelum hover.Bila korang halakan cursor,
header tersebut akan bergerak ke kiri atau ke kanan.Kalau dah paham, jom tutorial :)

 Pergi ke dashboard > design > edit HTML

 Tekan ctrl+f/F3 dan search code ini - h1.title {

 Copy code di bawah ini dan paste di ATAS code tadi.

#header:hover {padding-right50px;-webkit-transition-duration: 0.5s;}

 Kalau still tak jumpa code tu, boleh search code ini #header { dan letakkan code yang sama di BAWAH code tu. Okay?

 Preview dulu sebelum save, kalau takde error boleh la lompat suka hati hee.Semoga berjaya :)

 Nota Kaki:

 MERAH - boleh tukar into left / right
 PINK - boleh tukar beberapa number sesuka hati korang 
 OREN - Kalau nak lambatkan boleh tukar ke 1, 2, 3 dan sebagainya.


You Might Also Like

5 marshmallow komen