Nurulbalqis 'Olive' Izzuddin ; 16 years old.

“Time is an illusion, lunchtime, doubly so."

[Tutorial]: Blog Template (Header Bersambung Dengan Body)

, Thursday @ 8:00 AM ♥ } 2 comment (s)


Assalamualaikum w.b.t !
Best kan pergi sekolah ? *out of topic*
act., ramai dah tanya pasal benda ni, so Cik Bee tak nak menghampakan korang semua.,
eh, tutorial apa ni?
 
* klik untuk jadi gumuk !
yup ! yg itu ! so tanpa banyak bebelan lagi, mari kita start !

1. go to Design > Edit HTML , dan klik pada Select Layout Template, kat bawah sekali tu..,


2. Lepas tu diorang suruh pilih template , kan?? Klik kat Denim Template;
3. Dah tekan Save Template , korang klik edit HTML balik.,
4. CTRL+F serentak pada keyboard dan dalam kotak yang keluar tu cari kod /* Header
 Lepas tu kat bawah /* Header tu ada kod macam ni kan?

#header-wrapper {
  margin:0;
  padding: 0;
  background-color: $headerCornersColor;
  text-align: $startSide;
}

#header {
  width: 760px;
  margin: 0 auto;
  background-color: $headerBgColor;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}
 Yang dihighlight dan nombor yang dimerahkan tu , korang tukar kepada 0, so resultnya akan jadi macam ni;
#header-wrapper {
  margin:0;
  padding: 0;
  background-color: $headerCornersColor;
  text-align: $startSide;
}

#header {
  width: 760px;
  margin: 0 auto;
  background-color: $headerBgColor;
  border: 0px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}
 5. Lepas tu cari kod /* Footer, nanti ada kod macam ni kat bawah footer;
#footer {
  clear: both;
  text-align: center;
  color: $textColor;
}

#footer .widget {
  margin:.5em;
  padding-top: 20px;
  font-size: 85%;
  line-height: 1.5em;
  text-align: $startSide;
}

Tulisan merah tu korang tukar dengan 0 . Nanti kod korang akan jadi macam ni;
#footer {
  clear: both;
  text-align: center;
  color: $textColor;
}

#footer .widget {
  margin:.5em;
  padding-top: 0px;
  font-size: 85%;
  line-height: 1.5em;
  text-align: $startSide;
}
 Kemudian, klik Save Template.,

7. Seterusnya, sila klik ke TEMPLATE DESIGNER, klik pada Advance;

Klik 'Page Header Background Color' dan tukar kepada Transparent , same goes to 'Page Header Corners Color' dan tukar juga kepada Transparent.,
So resultnya akan jadi macam ni;

 8. Untuk header, design header mengikut citarasa korang , dan buat seolah-olah dia bersambung dengan body; faham tak?? contohnya macam ni;


9. Tukar header dan blog korang akan jadi macam ni;

10. Lepas tu edit blog anda balik supaya jadi semakin cun seperti anda ;) Untuk tutorial Template Layout, boleh pergi >SINI< atau >SINI<.,
11. Hasilnya;

Labels:


♥ 2 commenter(s)