Cara Membuat Full Width Header, Navigasi, dan Footer di Blogspot

Tutorial ini saya dapatkan dari artikel dengan judul yang sama: Cara Membuat Full Width Header, Navigasi, dan Footer yang dipublikasikan tahun 2018 yang lalu di blogpress.id. Saya mencari tutorial ini karena tidak bisa mengandalkan width=100%; atau margin=0; saat ingin membuat footer lebar dari ujung kiri ke ujung kanan laman blog. Akhirnya saya menemukan artikel ini dan mencatatnya kembali sebagai catatan yang ringkas, dan jikalau blog sumber sudah tidak beroperasi lagi, saya masih punya catatan untuk dilihat kembali.

Sepertinya artikel di atas juga mendapatkan sumber dari blog lain, bahasa Inggris, karena saya temukan kalimat Di antara <b:skin> dan </b:skin> mencari tubuh, ini adalah salah satu kode pertama. Anda akan melihat kode seperti ini. (((mencari tubuh))) body kali maksudnya ya, ehehe.

Oke, mari kita langsung ke inti Cara membuat Full Width Header, Navigasi, dan Footer

Mengganti padding di body

Cari kode body di CSS, maka akan bertemu kode seperti ini:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
  top: 30px;
}

Ubah bagian padding menjadi 0px.

Di script, saya bikin jadi begini, untuk menandainya:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
/* MENGUBAH KODE PADDING SUPAYA FOOTER FULL WIDTH
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
*/
padding: 0px;
  $(body.background.override)
  top: 30px;
}

Mengganti padding di .content-inner

Pada artikel sumber, disebutkan bahwa .content-inner adalah bagian yang membungkus (menggabungkan) header, navigasi, posting/content, sidebar dan footer.

Cari kode .content-inner di CSS, maka akan bertemu kode seperti ini:

.content-inner { padding: $(content.padding) $(content.padding.horizontal); }

Lalu mengubah angkanya.

Di script, saya bikin jadi begini:

.content-inner {
/* MENGUBAH PADDING UNTUK FOOTER FULL WIDTH
padding: $(content.padding) $(content.padding.horizontal);
*/
padding: 10px 0px;
}

Mengubah max-width di .content-outer, .content-fauxcolumn-outer, .region-inner

Dengan mengandalkan ctrl F lagi (saya pakai Windows), dan mengetikkan kata kunci. Maka akan bertemu kode seperti ini:

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

Ubah max-width menjadi 100%.

Di script, saya bikin jadi begini:

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
/*MENGUBAH max-width UNTUK FOOTER FULL WIDTH
max-width: $(content.width);
*/
max-width: 100%;
_width: $(content.width);
}

Sampai saat ini, bagian konten (termasuk sidebar) jadi bergeser merapat ke sisi kiri dan kanan. Untuk menyiasatinya, bisa menambahkan kode .main-outer ini di bagian CSS (di area atas ]]></b:skin>)

Tambahkan script di CSS

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

atau

.main-outer { max-width: 1000px;  margin: 0 auto; }

Saya pakai script kedua karena script pertama error di tempat saya.

Sampai di sini, saya melihat perubahannya sudah aman. Tapi di tutorial ditambahkan satu script lagi untuk diletakkan di CSS, tanpa keterangan untuk apa spesifiknya. Sampai tulisan ini dibuat, saya pun belum menemukan class apa ini, dan apa pengaruhnya. Ketika saya tambahkan, tidak ada perubahan yang kentara.

Ini kodenya.

.tabs-inner { padding: 0px; } .section { margin: 0px; } .header-inner .widget {margin: 0px; }

Sekian cara membuat Full Width Header, Navigasi, dan Footer.