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

Assalamualaikum dan Salam 1 Malaysia

Ini adalah tutorial yang terakhir sekali.. = ) Tahniah korang kerana sampai juga korang mengikuti khusus khas.. Lalalaa  Credit Part 1 , Part 2 Terima kasih kerana sudi mengikuti tutorial ini.. = )

Step pertama: Pergi ke Layout > Edit HTML. Tekan Ctrl+f untuk memudahkan korang mencari code yang aku nak suruh cari ni. Paste kan code kat bawah ni dalam kotak find:

#footer{

Step kedua : Korang akan jumpa code ini kan ?

#footer {  clear: both;  text-align: center;  color: $textColor;}

Highligtkan semua code diatas dan pastekan code dibawah ini :-

 #footer{
background: url("URL FOOTER")
no-repeat bottom center;
width:1000px;
height:305px;
margin: 0 auto;
padding: 0;
text-align: center;
}

Ok, setel . Pada tulisan merah tu nanti kita akan masukkan URL footer kita. Tapi, sebelum tu, kita kenalah buat footer kita dulu. 

Width dan height ikut koranglah.. : ) 

Step ketiga : Create new file di Photoshop dengan width 1000px dan height ikut suka hati.Saya buat simple macam ni:

Step ketiga: Upload footer yang korang dah buat tu dalam Imgur untuk dapatkan URL. Copy url dan paste-kan dalam code HTML yang saya suruh tadi. Selepas dah siap paste, preview dulu blog korang sebelum save template. Blog korang sepatutnya dah jadi macam ni:

Alhamdulilah ! Syukur siap jugakan.. Ok! Yang lain korang editlah sendiri tau.. = ) 

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