Bahagian Header Untuk Template Whita Part 2

Dalam Tutorial Part I, kita dah belajar macam mana nak buat bahagian body untuk layout kita.Sekarang kita belajar   cara simple untuk customize bahagian header/banner.

Pergi ke Layout > Page Elements > Tekan ' Edit ' pada bahagian header > Browse header korang > Save! Cara ni semua orang pun dah tahu kan? Dengan menggunakan function Edit ni, korang tak payah susah-susah nak upload header korang di Photobucket untuk dapatkan direct link dan juga tak perlu nak resize gambar yang nak dibuat header. Cukup dengan tick pada kotak macam dalam gambar di bawah SEBELUM korang browse gambar yang nak diupload sebagai header tu:


Sebelum customize header, korang mungkin nak tukar width header korang supaya sama dengan outer-wrapper (area dimana entry dan sidebar korang berada). Kalau tak, header korang akan jadi kecik dan tak ngam dengan bahagian entry dan sidebar. Dalam tutorial Part I, aku dah ajar macam mana nak ubah width belog korang, jadi hari ni kita belajar macam mana nak ubah width header pulak.

Step pertama: Pergi ke Layout > Edit HTML. Tekan Ctrl+f untuk memudahkan kerja-kerja pencarian.

Step kedua: Untuk pengguna template Minima, korang boleh tengok dekat title belog korang tu ada 2 border. Sekarang kita akan hilangkan border tu. Paste code ni dalam kotak find: 

#header-wrapper {

korang akan jumpa something 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;
}

Erase seluruh code tu.

Step ketiga: Di bawah code yang korang dah erase tu korang akan jumpa code ni:

#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;
}

Untuk memudahkan korang (dan aku, sebab aku malas nak ajar satu2, bahaha), highlight seluruh code tu, dan paste code dibawah ni:

#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 width header korang dah jadi 1000px, sama dengan width outer-wrapper yang kita dah ubah dalam Tutorial Part I. Height tu terserah pada korang nak buat berapa. Sebagai contoh, aku buat header dengan height 300px je. Kali ni aku taknak banner aku ada border, sebab tu aku set-kan border kepada 0px (tulisan biru). Jangan lupa SAVE template. Selepas tu, korang boleh edit layout seperti biasa di Layout > Page Element. Korang boleh cari gambar yang sesuai dekat internet untuk dibuat header, ataupun buat header korang sendiri. Kalau nak buat header sendiri, kita teruskan ke step ketiga.

Step keempat: Create new file di Photoshop dengan Width: 1000px dan Height: 300px. Design header menggunakan ke-kreatif-an korang. Aku buat simple-pimple macam ni je untuk tutorial kali ni:

Click untuk pembesaran rajah.

Kalau korang nak buat header macam contoh aku bagi ni, pastikan background belakang header tu sama dengan warna background belog korang. Kalau nak tukar warna background belog, cari code ni:

body {

Nanti korang akan jumpa code macam ni:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;font-size: /**/small;
text-align: center;
}

Pada $bgcolor tu, gantikan dengan code warna yang korang nak, contohnya #000000 untuk warna hitam. Mana nak cari code warna? Dekat Photoshop ada, dekat SINI pun ada. Kalau dah pilih warna yang berkenan di hati, tekan SAVE.

Code warna di Photoshop.

Ok, sekarang kita dah ada header sendiri. Yeay!

Step keempat: Korang boleh terus upload header korang di Layout > Page Elements > Edit bahagian Header > Browse header korang > SAVE. (dah 2 kali ulang part ni T___T). View  belog tengok sama tak header gan body...kalau tak sama terus edit lagi okey...biar betul2 sama cam kat bawak...:

Nie baru bahagian header...tunggu bahagian Footer pulak...buat template nie memang pening sikit....kena banyak sabar...

Kredit By:Belog Cap Ayam

---

TERIMA KASIH SUDI BACA DAN KOMEN

---