Tutorial Header Hover Part 2

by D'ya Marshmello - 11/04/2011 08:34:00 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-right: 50px;-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.

Tags :

5 marshmallow komen