Home
tutorial
Tips-Tips

12 February 2011

Tutorial : Centerkan Header

Hiii .! Sekarang , Lyssa ada tuto request dari:

 

Dia tanya , mcm mana nak center kan header ?
Oh , Mari sini . ikot my step ! :)
Ada 2 cara . ikot korang lah nak ikot cara mana satu erkk ?

CARA PERTAMA

1. Dashboard > Design > Edit Html

2. Tekan Crtl + F , dan cari kod kat bawah ni :

#outer-wrapper {
3. Pastu , bawah kod yang korang carikan tadi tuh , ada kod ni kan ??

background:#FFFFFF;
width: 1000px;

*Itu pun , sebagai contoh jer~
4. Makna nyer , outer wrapper tuh . 1000px taw ?? Korang nyer ,tak tahu lah .

5. Tapi , tak siap lagi ni . Then , korang cari pulak kod ini..

#header-wrapper {

6. Dah jumpa kan ?? Pastikan width dekat header dengan outer wrapper tu sama .So korang punya header akan jadi center la .

7 . Preview dulu . Dah jadi , baru SAVE ok ? :)


CARA KEDUA

1. Dashboard > Design > Edit Html

2. Tekan Ctrl + F , cari :

/* Content

3.  Lepas tu , copy kod kat bawah ni , then paste ATAS kod yang korang carikan tadi tu  .


.Header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

4. Paham ke tak ? if korang tak paham , tengok contoh ni :

.Header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
/* Content
----------------------------------------------- */

5 . Preview dulu . Kalau jadi , SAVE yerk ^_^




373 000 orang Pengomen Terhebat !!:

«Oldest   ‹Older   1 – 200 of 373   Newer›   Newest»
hanis blogspot said...

thanks buatkan!

hanis blogspot said...

kenapa x leh pun?..kluar cmni
We were unable to save your template

Please correct the error below, and submit your template again.
Invalid variable declaration in page skin: Variable is used but not defined. Input: startSide

Lyssa Dollixious said...

@hanis blogspot

okie darl~

Lyssa Dollixious said...

@hanis blogspot


ohhh.... try cara ke-2 lakkkk...

hanis blogspot said...

cara satu x boleh sbb code outer wrapper tu x der..
try cara 2 lak kluar message cam tu..:(

Lyssa Dollixious said...

@hanis blogspot

lol. btol ker ? haiyakk . cm ner lah boleh tk jadi niyh ?:9

Syakira Qaisara said...

tk jdy : (

nuramira said...

thanks yaww . dah jadi ;)

Firdaus Kasim said...

x dpt pun? huhu

Lyssa Dollixious said...

@Syakira Qaisara

lol . tk jadi ?? :( hmm . nk buat cm ner mehh ?

Lyssa Dollixious said...

@nuramira

mira ; hehhe , menjadi ehh ? GUD ! >.^

Lyssa Dollixious said...

@Firdaus Kasim


lol . apa yg tk de? haha!

hanis blogspot said...

knapa byk yg x jd nih? ;(

Comics Gurlzz said...

hurmm..kak lyssa x jdi leh
yg kdua 2..dye tlis niy
"We were unable to save your template
Please correct the error below and submit your template again.
Invalid variable declaration in page skin: Variable is used but not defined. Input: startSide"

Lyssa Dollixious said...

@Comics Gurlzz

lol. tol ker ?? tp , nape kaka nyer blog jadi jer ??? masalah template kot ?? template tak sesuai lah tuh ..enn ~

eVariena♥ said...

dh center la..jd2..thnx..huhu..byk da tutorial yg eva ambk dr lyssa..

Lyssa Dollixious said...

@eVariena♥

hehehe .okie darl ;)

cik fza said...

thanks..
tutorial yg menjadi..

Lyssa Dollixious said...

@cik fza

ehee . oraitt dear ^_^

AyusLina♥ said...

hai sis!nak tnye ni,cmne nak upload header banner yg kne edit kat software aleoflash?dorang de gtau step2,tpi xphm la.

Sofie Ezzaty said...

@Lyssa Dollixiouskak lyssa , takde pon code tu . blogger saye yang 1 ade ,, tapi yg lagi 1 takde .. cam mane erk ?

Lyssa Dollixious said...

@Sofie Ezzaty

guna cara kedua. senang ciket.t.

Sofie Ezzaty said...

Tyouyou kak lyssa ! jadi lerkk . TQ soo much ! lame dah carik tuto neii tao !

Sofie Ezzaty said...

ohhh , okay ! TQ soo much !

Lyssa Dollixious said...

@Sofie Ezzaty

yupp . welcome yunkk ! ahaaXD :))

Sofie Ezzaty said...

@Lyssa Dollixiouskak lyssa , macam mane nak buadd blkang page tu ade background ?

farah said...

sys , ctrl F tuh cmne eh ? then nak ltk kod tuh kat mana ? lol pening gler

Lyssa Dollixious said...

@farah

ohh . cm niyh.. kalau tekan ctrl serentak dgn huruf F kat keyboard.. dia akan keluar satu kotak search.. selalo nyer.. bawah kiri ... paste kod yg nk cari tuh.. nnty. dia akan terhighlight warna ijau or kelabu ;)

Ifti Larina said...

yeayy jadi! thanks sis!

Lyssa Dollixious said...

@Ifti Larina

heheh .welcome ! shukeww yeww;)

Miss E said...

Yeaa!!!! Siap Thanks Kak Lyssa

atyn nayn said...

follow tuto niy.jd suda.tp cm plik cket.huhu.tengs lyssa :)

Haizad Jaidi said...

kenapa tak jadi eh? yang care pertama tu tak ada, yang cara kedua ada tapi dia tak boleh jugak? :/

tentang EME ;) said...

sis,
TRY jugakk.
MENJADI.
muahmuahh.hehehe ;D

Lyssa Dollixious said...

@Miss E

haha .welcome :)

Lyssa Dollixious said...

@atyn nayn

pelikk mcm mana tuh . ?huhu ;)

Lyssa Dollixious said...

@Haizad Jaidi


hmm . Lyssa thu knapa tk boleh cara kdua tuh.. tak ! mcm niyh.. kalau nak save header.. kena tekan instead bkn behind

Lyssa Dollixious said...

@tentang EME ;)

hehe .gud gurl ;)

qistina said...

kaka lyssa ta pham maa . tlong buadkan boleh sis ?

Lyssa Dollixious said...

@qistina

lol.. tk phm mmehh ? tp pe.. kasik emel ngn psword kt FB yer ;)

qistina said...

baik kak lyssa :) tq .

Haizad ♥ said...

Tak faham lah kak Lyssa, boleh tolong buat kan? :)

Lyssa Dollixious said...

@Haizad ♥

ohhoo .boleh . kasik emel ngn psword kat inbox FB akk .~

Haizad ♥ said...

Serious boleh? Thank youuuu :D Jap, nama fb akak apa?

Lyssa Dollixious said...

@Haizad ♥

klik je dekat sebelah kiri , atas sekali .. oke ?:)

Haizad ♥ said...

Okay thank you banyak banyak k akak? Hihihi :D

Lyssa Dollixious said...

@Haizad ♥

okee. oke.. welcome ~

yaya dluver said...

Yeahhhh I berjaya tenz lyssa buat tuto ney !!!!

edayahzaid said...

thanx lyssa! dah jadi da :)

Diyana Ayuni said...

kenapa x jadik eh lyssa? mcm mana nieyh. pening la.

syaza nuraya alia said...

kakak lyssa :( tak jadi pun . mcm mane ehh ? die tulis msg yg same mcm org lain tuu . both cara tak bole :(

Sofie Ezzaty said...

kak lyssa ! dah jadik . thanks kak comel :) ILY . semua tuto kak lyssa yg sofie gna nie jadik . thanks so much ! follow my newest blog ; www.mystory-mory.blogspot.com = simple je . hehe . 2nd ; www.budak-colourful.blogspot.com thanks !

Sofie Ezzaty said...

sis , mcm mne nak buat blkang page tuh ade background ?

Lyssa Dollixious said...

@Sofie Ezzaty

ohh. waktu edit gmbar tuh , guna transparent ..

lynn onew said...

Tak menjadi lahh geram jee :(

fareiyka said...

thanx lyssa,, really appreciate that.. semua tuto lyssa menjadi.. ^_^ keep it up

yaya dluver said...

@Lyssa Dollixious

kak lyssa x mnjadi !!!!!!!!!!!

♣ Irnaa ahmad ♣ said...

thanksyou lyssa ! menjadi laa :)

Rentak Naluri said...

lysaa...cam nei pulak klu kita nak hias harder???cam header lysaa 2???

feeqien's said...

like like .dahh jadik .tengs lyssa :)

Byla said...

x jmpe pon kod #outer-wrapper { tu.....

chu~ said...

da jadi! thanks akaq!

mizz ILa said...

banyak kali sy buat tpi x jdi..
tpi lepas bace sume komen..
and kak lisa ckp kena save jdi insted bru jdi...
thx so much kak lisa.. sy happy giler ni XD

Fatin Adlina said...

thnk kak !

Liyana Madihah said...

jadi jadi ! tq tq ;)

* Zaleta * said...

jadik dah...tq

miemie dott dott said...

heeyy akak! cm ne nk buat header cm akak punya tuu?
saia nk buad cm 2 tp x jd punn

Miz MoriEdyLyn said...

Tak dapat lah...huhu...puas sy cari #outer-wrapper
tak dapat juga ..
cam mna nak buat..?

mizfyza said...

lyssa! hyep~ pless help me! serius ta rety buad... adesh~ xphm kt mna nk cari suma uh~ :(

myra hamzah said...

lysa..xreti wat..da bnyk kali wat..tp xley gak..da jd blur jep..klu wt header center gune template blog..blog post jd kcik..nk wt cm lysa wt..tp xmuley..can u help me..waaaa (-_-)

myra hamzah said...

lysa..xreti wat..da bnyk kali wat..tp xley gak..da jd blur jep..klu wt header center gune template blog..blog post jd kcik..nk wt cm lysa wt..tp xmuley..can u help me..waaaa (-_-)

aleeya nurzareen said...

akak menjadi..thanks!:)

nur ain afira said...

awk xbleh pown..xjadik laa :(

fahadila said...

kak lyssa x jadi pon ..
cane ??

fina said...

lyssa :)
thanks a lot. lebiu la

ieqa said...

thanks sys for the tutorial . banyk membntu . hee~ :)

AQILAH ALIAS said...

kak lysa. TQ ..dh lme cri mnde ni.. tutorial kak lysa bnyk mmbntu sy..TQVM

Minnn said...

Kak lysa omey omey sgt2 , tak jumpa code tu . :'(

fateen adila said...

kak lyssa mcm mne nk buat header mcm akak nie?

fateen adila said...

kak lyssa mcm mne nk buat header mcm akak puya blog??

MSfaten said...

tengss dear.. after dah try 2,3 cara, akhirnya cara ni berkesan..tengssssss....

aizamia3 said...

thanx dear.. ;)
akak berjaya buat.. sukenye.. hikhikhik.. ;)

Waniwisy said...

macam mana nak centerkan tab menu sama dgn header?

xaRa MaCKasHa said...

kak lyssa , code cara pertama & cara kedua xara takda la . klau tak silap yg #header-wrapper tue kt sini :

/* Header
----------------------------------------------- */
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 20px;
padding-right: 20px;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 2px 2px rgba(0, 0, 0, .1);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: 140%;
color: $(description.text.color);
}

tapi nak letak mne ? seharian xara cube . xpat . pening . sakit otak .

Beby Barniey said...

thanz ya sbb buadkn tutorial . even ade yg xmnjdi pon . btw , blog kaq lyssa mmg terbaekk . =)

izLya LigHtsoME taLEs....! said...

kak LySsa... TLg juP bUAd aT Lya...! pLish hELp me..! =(

izLya LigHtsoME taLEs....! said...

kak LySsa... TLg juP bUAd aT Lya...! pLish hELp me..! =(

izLya LigHtsoME taLEs....! said...

kak LySsa... TLg juP bUAd aT Lya...! pLish hELp me..! =(

atynsepet said...

dah mnjdi..
tq..:)

Miss Aleyn said...

akak , bole tlg wat an x header 2

cik nabeelah said...

kenape x jmpe kod 2?
nie yg sedih nie~

salwaismail said...

thanks! :D
http://salwaismail.blogspot.com

alepridz said...

thanks cik lisa.... tutorial awak banyak membantu saya....


^^

http://www.alepridz.com/

aziza esa said...

thnx a lot cik lyssa!

umairah.aris said...

akk .. x jadi lorhh . :(

babunscandal said...

akak!! ta dapat la :(
ta jadi pun :(

Shyna Akma ^^ said...

Kaq lyssa .. tk jdi pun jumpe pun tkde :)

YASMIN :) said...
This comment has been removed by the author.
YASMIN :) said...

Adoii ! Kak Lyssa Da Tak Jadi balik La ... :(

Nurzura Adriana said...

thanks kak lyssa , tutorials yg berguna (:

Farah Farouk said...

lysa buatkan kat fara..fara xreti lew..hehe

Farah Farouk said...

sayang..buatkan..please

syra said...

akak , tak jadi ponn :(

fysa said...

@Lyssa Dollixious tq kak ! die menjadi . :) ily.

g ha said...

Kak lyysa yg comel,
kenape tak jadik?
Hmmm, isk.
Buatkan boleh ? hehe :D

g ha said...

Akak lyssa yang comel.
Kenape tak jadik?
Hmmm.
Buatkan boleh? Hehe

Nur Hanis said...

jadi pun..thanks Lyssa.. :)

AQiLaH QeYLa said...

thanz ya da boleh..
ada ikut tutorial nih.. ^_*@hanis blogspot

AQiLaH QeYLa said...

thanz ya da boleh..
ada ikut tutorial nih.. ^_*
http://aqilahhaliqa.blogspot.com

AQiLaH QeYLa said...

Thanz Cik Lyssa ya da boleh..
Da ikut tutorial nih..:))
*maaf terguna *hanis blogspot lak* atoi sory..
maklumlaa bwu nk bljr...hee

Cik Kasut said...

alhamdulillah jadi jugak tq lyysa :)

farra said...

thankss!!!!:)

xoxo

NaDyA said...

lysaa i da buat tp x jd jgk lah,,npe erkk ermm BTW thanks 4 da tutor,,

Meera Zizan said...

Kak Lyssa , susahlahh .. Saya tak buleh buat 2-2 cara. Sebab kod nya tak ada...

erin eyin said...

jadi,,,tengs kaq lyssa,,:)

ainomileku said...

menjadi :') thanks kak lyssa <3

NADDY said...

tuto sis semua jadi ! thanks sis :)

Mohamad Nur Asshrullah said...

Akak , mcm mane nk hilangkn header(blog title) ? mcm mane ?

yaya salvatore said...

dah try wat yg second one but tak jadi pon. :(

Niza Affandi said...

Assalamualaikum . thanks . niza amek tuto ni . :D

Normaya Shafiqah said...

x jumpe la..outer tu...

cweet capucyco said...

ta jadi pon :(

nadzira hamzah said...

@Lyssa Dollixiouslyssa mcm mane nak cari hide blog title ye . tq

nadzira hamzah said...

lyssa mcm mne nk cri hide blog title yee . tq

Mashitah said...

yeayhh . dapat pun . tq kak

Adilah Subkhi said...

kenape tak jadi ?

Diraf said...

Done :D

liyanazainal said...

kak lyssa, cara pertama &&kedua tak jadi lah kak. code yang akak suruh carik tuh tkde. mcm mana erkk?

FynadzNad98 said...

Kak Lyssa , nape kite ta jumpe code yang akak suruh carik ?

KhairuL Najmi said...

tanx lysa..got it =)

miyra eiya said...

tengs sis :)

SimpleLovelyStories said...

salam sysLyssa , da bnyk kli adikk buatt , tk jdi2 . cara yg ptama tuhh , kod yg akk suru cri tk de laa . cara yg ke2 pula , tk jadieyyy 1 cm mne erkk ?

SimpleLovelyStories said...

akk lyssa , tlg buatt kn leh takkk ?

Nurul Ezzati said...

kak lyssa nape x jdi ?? cube kak lyssa buat yg baru punyer baru kitorang pham ..

Nur Fatimah Isa said...

@Lyssa Dollixious kak, tak boleh pon. cara 1 code tu takde. try cara 2 ok je dia save, tapi header tak center pon?

ShaMomey~ said...

Hai Kak Lyssa , Hrmp . macam mana nak buat background title?

honey_simple19 said...

trimas. .;P suke tutorial kamu...;)

Anis Farzana said...

Hihi~ sudah jadik ! Thanks byk2 !

Sha Dhira said...

mekasih~ ^^

Achu said...

tenkiu sis lyssa. jadik pn =D

Neesa said...

Thank you Sis Lyssa!

sha said...

tak jadi la akk

fyraa ♥ said...

Thanks :)
first time jadi centerkan header :)

Me_Yana said...

@Lyssa Dollixious

salam .. npe yna x jumpe pn dashbord> design>edit Html tu eak ..?? bile yna clik kt edit Hmtl tu kua edit template ..x jumpe p0n yg tick wiget tu .. blh tlg ajakn x ..?? urm ..

missleana said...

thanks lyssa.. dah jadi.. :)

SA ♥ said...

Tak jadi pun Kak Lyssa, dah byk kali try dah ni ;/

azizahrahmah said...

care kedua jd le

my lyrics said...

nape bt cara kedua xjdi hah???
xjdi center pon....:(

ShahizanAzmi said...

Terima kasih daun keladi, ada masa bolehlah cuba lagi ;D Haha

Intan Juwana Hj. Hashim said...

Hi.. nk tye.. klu tajuk header tuk second page & seterusnya hilang camner nk wat ek? Tq...

domoBUNNY said...

tolong elly ,banyak ta jumpa kod .ta tahu lah kenape .

Muhd Nazmi said...

@hanis blogspot
x jadi pown...=(
needed help here..=(

Muhd Nazmi said...

x jdi pown...=(
needed help here..=(

Siti Naziha Armalia said...

Tumpang tanye,Kak Lyssa cari template blog kat mne.

Hippo Nana said...

camne nak ctrl F tu??

SyafyNajihah said...

@Lyssa Dollixious erhh kenape x jdik..?

Ikah Jafri said...

tak dapat kod pon . huhu . tolon2

Budak Coklat said...

tq kaq..

Budak Coklat said...

tq kaq..

Nur Fathira Aimi said...

Arigatou Sys Lyssa !! Akhirnya menjadi jgk !! :)

FiqaSaleh said...

thank you very much for the tutorial.. fuhhh...

Muhammad Amierrul said...

Best tuto ni.. :)

fatyn said...

xjadi pun kak lyssa :'(
2 2 code da try tp xbole .

fatyn said...

tak bole pon :(

Nur Syazwani Khirizan said...

thank you kak lyssa. hihi <3

Nabila :) said...

terima kasih kak lysaa ! :D

Hai aieQa said...

x jadi pon . =(
dia x nk ke tengah .

Intan Zulhilmi said...

lalala...lalala...da berjaya...lalalala...hihihi

Kartieyna affandy said...

thankz..berjaya gak saye center kn header sye..:)

Intan Juwana Hj. Hashim said...

Hi.. nk tye.. klu tajuk header tuk second page & seterusnya hilang camner nk wat ek? Tq...

Puteri Diana said...

salam,
thanx kak lyssa!

Farrah Umairah said...

X JADI POWN KAK LYSSA..

love story said...

yey! jadi..huhuuu..tuto yg kak lisa ajr,smua jd..yg cra p'tma tu,xde kode dy,cra ke-2 tuyg sng n konfem jdik nyer larh..heheee

Apit said...

tak jadi pertama tak de kod tu.. cara kedua still sma je. tak center pon.

Casandra ♥♥ said...

hehe , thanks yerr. kite memang dah lama carik tutorial nak centerkan header .

Ewin Mulawin's said...

OKAYY thankyou kak lysaa . akhirnya jadi jugak ! lebiu !

mama ieqa said...

tq lyssa..... akak dah try n menjadi... dah lama akak nak toturial mcm lyssa buat.. maceh yea..

Nizza said...

@mama ieqa nape x dpt??

syera taeyunn said...

yeay jadi , hee tahnkyou kak lyssa :'3

looknice said...

yeah jadi suda :D

nasha sanza said...

thank you lyssa..the best of lyssa!

sabrina zuhairi said...

eh eh , jadilah ^^
thankyou :{D

aimy syira said...

m
lyssa , mcm mne nak guna header yg transparent ? dah cuba guna , tpi stil background putih yg dekat blkg header tuh ada lg :(

zairien azriena said...

kak lyssa ! mcm mana niey .. tak jumpa pon kod tuh :( lgy satu napa tgakley bgy blog jdy transparent ? mesti ad wana putih kat blakang --' dah bg transparent guna template designer .. tpy sama jha .. tlg lew ek ..

Siti Nurhafizah said...

yeah ! jadi . thanks kak :D

MARDIAH MOHAMAD said...

Mekaseh :DD .

Pieqa Tomey ! said...

Tak jadi :'(

Nur Maya Shuhada Binti Mohd Tajuddin said...

kak lyssa..saya try buad tapi tak buleh lah...cm mna neh..i need your help..

Kistina Luciana said...

Kak lyssa x jadi pon..kak lisa leh tlg editkan x?hehe..:D

★ wani pepeng ★ said...

tak jd lah . serius tak paham :(

akk tade code dye ke ?
t just copy paste jer . heheh .

Lieya Yaya said...

hmm kak lyssa . tak jadi pom ?

Lieya Yaya said...

hmm kak lyssa . tak jadi pom ?

Lieya Yaya said...

hmm kak lyssa . tak jadi pom ?

Nurul Ain Mohd Nasir said...

serious tk phm ...pening la ..nk uat cm ne ??n cm ne nk uat header yg nice cm lyssa tu ????blog yg tomey2 ..tk reti la ..ajr ckit ..

syaza said...

kak lyssa, mcm mne nk wt home n older posts ada gmbar . yg ada at bwh skali tu . ajar kn boleh ?

Eyzatie said...

thanks ya ? dah jadi puns !

syafieka nur said...

makaseh..da jd pun..lama dah cri bnde nie

fathiyyahISMAIL said...

thanks kak lyssa. bnyak bantu saya :D

m e e y o n said...

huhuh~ it w o r k s ! thx sis~

nutracker nas'z lyn said...

bole tolong buatkn tuto untuk cm mne nak buat header x??sory sy budak baru blog..

«Oldest ‹Older   1 – 200 of 373   Newer› Newest»