Tutorial:Design Layout Blog Sendiri (HEADER)

 Assalamualaikum.

Semalam CZ ada buat tutorial design layout sendiri untuk part BODY kan? bagi sesiapa yang belum terjah, tekan SINI.

Sekarang ni kita akan ke fasa yang kedua iaitu design part header pulak. So, jom kita mulakan pengembaraan bersama CZ!

1)

2) kalau korang perasan, dekat blog tue ada border kan kat bahagian header. Kita nak hilangkan border tue. So, tekan ctrl+f serentak dan cari code kat bawah nie di kotak search.

#header-wrapper { 

dibawah code tue, korang akan jumpa macam ni:

#header-wrapper {
 width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}  

Delete code tersebut.

3) Di bawah code yang korang delete tue, korang mesti akan jumpa code yang kat bawah nie. Confirm jumpa punya laa

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center; 
color:$pagetitlecolor; 
}


#header h1 {
margin:5px 5px 0; padding:15px 20px .25em;line-height:1.2em;
text-transform:uppercase;letter-spacing:.2em;
font: $pagetitlefont;
} 

Kemudian gantikan code yang diatas dengan code yang di bawah nie.

#header {
width: 1000px;
height: 300px; 
border:0px solid $bordercolor;
color: $pagetitlecolor;
 text-align: center; } 

#header h1 {
margin:0px 0px 0;
padding:15px 20px .25em; line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
 }

sekarang nie kita dah tetapkan lebar layout kita 1000px sama dengan tutorial BODY kan. yang height tue terserah dekat korang nak letak berapa pun. So korang boleh la search kat internet header-header yang chomel.

4) Step nie untuk sesiapa yang ingin buat header sendiri. Yup, macam biasa kita akan gunakan photoshop untuk buat header. Photoshop>File>New.

Ini adalah contoh header yang saya buat. Korang mesti lagi kreatif kan? so gunakan ke-kreatif-an korang tu untuk menghasilkan header yang cantik.

Oh oh, pastikan background header tue sama colour dengan warna background belog, ok?

7) Untuk upload header,

Dashboard>Design>Page Element>Tekan 'edit' dekat header

Dan keluar la pop out macam nie. Tekan upload dan browse la kat mana korang letak header korang tue dan jangan lupa tick kat bahagian 'instead of title and description' taw..Dah sudah, tekan la butang 'SAVE'.

6)

Blog anda akan jadi macam nie. Nampak tak yang kaler background tue tak sama dengan header. So, kita kena tukar la kaler background blog. Macam mana? Macam ni yaa

Dashboard>Design>Template Designer>Advance>Page Background Colour

DAh siap!

Selamat mencuba! Jangan segan nak tanya k.

CREDIT: BELOGCAPAYAM