Membuat Header Full Page Dengan Mudah

Jika kebetulan memakai template standart blogger yang header nya hanya sebatas lebar content janganlah khawatir. Sebab header tersebut dapat dirubah atau dibuat menjadi full page atau sesuai dengan lebar halaman penuh.

Untuk merubah lebar header menjadi full page satu halaman penuh hanya perlu mengganti dan merubah beberapa css yang terkait dengan header, content dan body.

STANDART ☑

FULL PAGE ☑

Langkah membuat header menjadi full page dengan lebar penuh satu halaman:

Pertama:
Letakkan kode css berikut di atas  ]]></b:skin>:

$(content.background.color.selector) {
    background-color: $(body.background.color);
}
.main-outer {
  background: $(content.background.color) !important;
}
body, .content-inner {
 padding: 0px;
}
.tabs-inner {
  padding: 0px;
}
.section {
  margin: 0px;
}
.header-inner .widget {
  margin: 0px;
}
.content-outer {
  box-shadow: none;
}
.body-fauxcolumn-outer .fauxcolumn-inner, .body-fauxcolumn-outer .cap-top, .body-fauxcolumn-outer .cap-top .cap-left {
  background: none;
}

Kedua (selesai):
Letakkan kode css berikut di atas </head>:

<style>
.content-outer, .content-fauxcolumn-outer, .region-inner {
  max-width: 100%;
}
.main-outer, .titlewrapper {
  max-width: $(content.width);
  margin: 0 10%;
}
</style>

Untuk mengatur lebar content (posting+sidebar) dan lebar footer dapat dilakukan dengan mengganti kode css warna hijau pada langkah kedua di atas dengan kode:

A. Lebar header, content dan footer 100% atau lebar halaman penuh:

.main-outer, .titlewrapper {
  max-width: $(content.width);
  margin: 0 auto;
}

B. Lebar header penuh, lebar content dan footer kurang dari lebar halaman:

.main-outer, .titlewrapper, .footer-outer {
  max-width: $(content.width);
  margin: 0 10%;
}

C. Lebar header dan footer penuh, tapi lebar content kurang dari lebar halaman:

.main-outer, .titlewrapper {
  max-width: $(content.width);
  margin: 0 10%;
}

Catatan:
*Jika efek warna content dan body tidak berfungsi dengan baik pada point B dan C, gantilah kode css (pada langkah Pertama):

$(content.background.color.selector) {
    background-color: $(body.background.color);
}
.main-outer {
  background: $(content.background.color) !important;
}

Dengan kode 

.content-inner {
  bakground: #bbb; /*ganti dengan warna body (awal) atau warna lainnya*/
}
.main-outer {
  background: #ffffff;/*ganti dengan warna content-inner (awal) atau warna lainnya*/
}

* Nilai 10% bisa diganti sesuai keinginan.

Semoga manfaat.