Cara membuat Full Width: Header, Navigasi, dan Footer di Blogspot (ukuran Penuh Browser)

Blogger.com-Saya memiliki banyak permintaan untuk ini akhir-akhir ini jadi hari ini saya akan menunjukkan kepada Anda cara membuat lebar header, navigasi, dan footer Anda di Blogger. Cara template Anda diatur adalah memiliki nilai margin, padding, dan max-width untuk "membangun" tata letak Anda. Untuk membuat header, navigasi, atau lebar footer Anda harus menghapusnya dan menambahkannya kembali hanya ke konten utama (area posting + sidebars).

Harap dicatat bahwa ini hanya untuk membuat area lebih luas, sehingga Anda dapat menerapkan CSS ke layar penuh. Jika Anda menggunakan gambar header dan gambar hanya selebar 900 piksel, tutorial ini tidak akan mengubah itu. Ini akan memungkinkan Anda untuk menambahkan warna latar belakang menggunakan CSS untuk menjangkau lebar penuh layar di belakang gambar Anda.

SEBELUM + SETELAH CONTOH

Rollover / Arahkan kursor ke gambar untuk melihat contoh sebelum dan sesudah

Q. APA NILAI NILAI-NILAI DENGAN $ SEBELUMNYA DALAM TEMPLATE SAYA?

Kode apa pun dalam template Anda yang terlihat mirip dengan $ (contoh); pada dasarnya adalah kode yang dikontrol oleh Variabel di bagian atas CSS Anda dan digunakan oleh Perancang Template (Tema > Edit > Customize). Anda dapat mengedit kode variabel standar atau mengedit area CSS utama (mengubah dari nilai variabel menjadi "nyata" nilai-nilai seperti warna atau nomor) tetapi jika Anda menghapus kode variabel kemudian mengubah opsi terkait di Perancang Template tidak akan berfungsi berhati-hati saat melakukannya. Lebih lanjut tentang ini dalam tutorial baru nantinya.

CARA MEMBUAT HEADER ANDA, NAVIGASI + FOOTER MENJADI FULL WIDTH

Anda dapat melakukannya dengan mengedit nilai variabel seperti yang dijelaskan di atas yang saya rencanakan untuk melakukan posting di masa mendatang, tetapi kami akan tetap mengedit CSS utama karena lebih mudah untuk dijelaskan dan dipahami. Harap tidak kode yang ditunjukkan di bawah ini mungkin terlihat berbeda di template Anda.

1. Pertama kita harus pergi ke area CSS utama Anda. Pergi ke Tema > Edit HTML dan klik panah hitam di sebelah kiri di samping kode berikut

<b:skin> ... </b:skin>

2. Di antara <b:skin> dan </b:skin> mencari tubuh, ini adalah salah satu kode pertama. Anda akan melihat 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)
}

Ubah

padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);

menjadi

padding: 0px;

3. Cari .content-inner. Ini adalah bagian yang membungkus (menggabungkan) header Anda, navigasi, posting, sidebar dan footer. Cari untuk itu, lewati bagian variabel dan temukan sesuatu yang terlihat seperti

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

Ini adalah kode yang kita bicarakan sebelumnya. $(Content.padding) ditetapkan ke 10px dan $(content.padding.horizontal) adalah 40px sebagaimana diatur di bagian variabel. Kami ingin menghapus padding 40px yang ada di kedua sisi konten kami sehingga header tidak akan memiliki ruang kosong. Ubah itu agar terlihat seperti

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

atau jika Anda lebih suka

.content-inner { padding: 10px 0px; }

4. Sekarang cari bagian template Anda di bawah ini </b:skin> yang terlihat seperti itu

<b:template-skin> ... </b:template-skin>

5. Di antara <b:template-skin> dan </b:template-skin> cari .content-outer, .content-fauxcolumn-outer, .region-inner dan temukan sesuatu yang mirip dengan
.content-fauxcolumn-outer, .region-inner and find something similar to

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

max-width: $(content.width);

menjadi

max-width: 100%;

ini akan mengubah lebar blog kami menjadi ukuran penuh browser.

6. Temukan

]]> </b:template-skin>

dan tambahkan kode berikut di atasnya untuk mengubah area konten utama (posting + sidebar) lebar blog Anda dan terpusat.

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

atau

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

7. Sekali lagi temukan </b:skin> dan tambahkan kode berikut di atasnya

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

8. Simpan template dan Anda seharusnya bisa melihat header penuh, navigasi dan area footer sekarang dengan konten utama Anda tetap sama lebar seperti sebelumnya. Saya telah menguji ini di semua Template Blogger default dan berfungsi, beberapa template memerlukan lebih banyak / sedikit pengeditan tamabahan.

RATA TENGAH GAMBAR HEADER

Karena Anda membuat area ini dengan lebar penuh, mereka mungkin akan default untuk muncul di sebelah kiri kecuali Anda sudah mengkodekan mereka sebaliknya. Jika Anda perlu membuat gambar header menjadi rata tengah, lihat tutorial ini.