Tutorial : Membuat Layout Sendiri Untuk Blog Anda ( Part 2 )

Assalamualaikum dan Salam 1 Malaysia

Dalam Tutorial Part 1, kita dah belajar macam mana nak buat bahagian body untuk layout kita. Hari ni saya akan ajar korang cara simple untuk customize bahagian header/banner. Credit

Pergi ke Layout > Tekan ' Edit ' pada bahagian header > Browse header korang > Save! 

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 sama dengan bahagian entry dan sidebar. Dalam tutorial Part 1, saya dah ajar macam mana nak ubah width blog korang, jadi hari ni kita belajar macam mana nak ubah width header pulak. 

Step pertama : Pergi ke Layout > Edit HTML. Tekan Ctrl+f untuk kerja cari mencari..

Step kedua: Pastekan code di bawah ini untuk mengubah dan menambah code.. : -

#header {

korang akan jumpa coding beranak kan kat situ cam gini :-

 #header {
  width: 1000px;
  height: 290px;   margin: 0 auto;
  background-color: $headerBgColor;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}

Sekarang width header korang dah jadi 1000terserah pada korangpx, sama dengan width #content-wrapper yang kita dah ubah dalam Tutorial Part 1. Height tu  nak buat berapa. Sebagai contoh, saya buat header dengan height 300px je. 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 ketiga: Create new file di Photoshop dengan Width: 1000px dan Height: 300px. Contoh header yang saya buat : -

Tersangatlah simple .. 

Step keempat : Cara menukar background . Search code ini : -

body {

Nanti korang akan jumpa code ini :-

body {
  background: $bgColor;
  margin: 0;
  padding: 0px;
  font: x-small Verdana, Arial;
  text-align: center;
  color: $textColor;
  font-size/* */:/**/small;
  font-size: /**/small;
}

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

Ok ! Kita dah ada header dan background sendiri ! : )

Step keempat: Korang boleh terus upload header korang di Layout > Page Elements > Edit bahagian Header > Browse header korang > SAVE. View belog korang. Blog korang sepatutnya dah jadi macam ni: 

Selesai sudah tutorial Part 2 . Dalam part 3 nanti kita akan belajar macam mana nak buat bahagian footer pulak. 1-2 comment dari kau orang mungkin dapat menghilangkan kepenatan membuat tutorial ni ;D