ASSALAMUALAIKUM | SALAM SEJAHTERA

Untuk tutorial kali ini, aku nak share macam mana nak buat header mcm aku ni. Yang ada background stripes kat belakang tuu. Tutorial ini direquest oleh seorang kakak comel ni. Hehe.

Lihat gambar di bawah. Header mcm tu laa yang dimaksudkan. Untuk pengetahuan, header ni bukan yang mcm selalu uols buat, pergi kat layout, upload header mcm tuu ya. Header mcm ni kena main coding sikit. Sikit jee tak banyakk. Hehe. Untuk dapatkan hasil mcm ni, korang kena buat dua kerja iaitu buat background kat belakang [yang stripes tu] dan header. Dan tutorial ini untuk pengguna denim template je yee..

Okay jom mulakan!

Mula-mula sekali, kalau uols ada header yang upload kat layout tuu tolong remove okay. Lepas dah remove boleh save dan pergi kat template dan seterusnya edit html.

Cari kod ini:

/* Header

----------------------------------------------- */

Di bawah kod di atas, korang akan jumpa #header-wrapper { dan #header {

Kedua kod ini yang kita nak ubah. Kalau tak jumpa, tekan ctrl + f untuk cari kod tersebut. 

1) Cari #header-wrapper 

Korang akan nampak coding mcm kat bawah ni:

#header-wrapper {

  margin:0;

  padding: 0;

  background-color: $headerCornersColor;

  text-align: $startSide;

}

Padam yang aku merahkan tuu. Dan gantikan dengan kod di bawah:

margin: 0 auto;

padding: 0;

background-color: transparent;

text-align: center;

height:594px;

background: url(http://i.imgur.com/M6KMcsB.png) repeat-x;

background-position: center;

}

So. Dia akan jadi begini:

2) Cari #header {

Korang akan nampak coding mcm ni:

#header {

  width: 760px;

  margin: 0 auto;

  background-color: $headerBgColor;

  border: 1px solid $headerBgColor;

  color: $headerTextColor;

  padding: 0;

  font: $headerFont;

}

Delete yang dimerahkan dan gantikan dengan kod di bawah:

margin: 0 auto;

padding: 0;

background-color: transparent;

width: 1060px;

height:594px;

background: url(http://i.imgur.com/zJR1TGq.png) no-repeat;

background-position: center;

color: transparent;

font: normal 15px century gothic;

}

So. Dia akan jadi macam ni:

Preview. Kalau takde error boleh laa save. Yang koding di atas tuu sengaja aku bagi sekali url gambar header dan background header supaya korang boleh nampak hasilnya. Dan hasilnya korang akan nampak header korang jadi mcm gambar kat bawah ni. Dan sudah tu, korang boleh laa tukar url background dan header tu dgn background & header korang yaa. 

http://i.imgur.com/M6KMcsB.png

http://i.imgur.com/zJR1TGq.png

Warna biru dan hijau tu korang boleh ubah ikut citarasa korang okay. 

Koding bawah #header-wrapper adalah untuk background.

Koding bawah #header { pulak untuk header yang stay strong tuu.

Height pulak, aku sarankan samakan antara background dan header. Width header pulak aku samakan dgn width blog aku iaitu 1060. Height tu sila pastikan tepat okay. Jangan terkurang atau terlebih dari yang sebenar. Contohnya, korang dah edit background korang tu ada reben atas bawah ke then kalau korang letak height terkurang, reben korang tu mungkin tak nampak kat bahagian bawahnya. Macam kat gambar bawah ni. Nampak tak? Aku dah siapkan border polka dot kat atas bawah background tuu then sebab aku terkurang height dia jadi mcm yg bawah tuu, kosong je takde apa hilang dah polka dotkuuu hehee. Jadi, HEIGHT tuu penting ok.

Lagi satu. Kalau korang perasan header aku, ada ruang sikit bawah background tu berbanding header yang aku bagi ni. Rujuk gambar di bawah.

Nampak tak perbezaannya? Untuk dapatkan header mcm aku yang ada ruang sikit tu, aku tambah sikit shape kaler coklat yang mana kaler coklat dia sama dengan warna background blog aku. kalau blog korang guna background bercorak, korang edit lah crop sikit corak tu letak kat bawah background header tu. Edit kat background header tuuu tauuu. Bkn header. Hehe. Mohon uols jangan pening lah ye dgn tuto aku ni. Hiihi

Harap tutorial ini dapat membantu. Sebarang pertanyaan sila tinggalkan komen anda yaa..

Btw offer edit blog dgn harga RM5 masih lagi berlangsung! Akan tamat sampai 15hb ni. Lepas ni harga akan kembali kepada harga asal iaitu RM15. Wasap me at 019-6373924

Tataaa!