Cara Menciptakan Full Width: Header, Navigasi, Dan Footer Di Blogspot (Ukuran Penuh Browser)
Blogger.com-Saya mempunyai banyak seruan untuk ini akhir-akhir ini jadi hari ini saya akan mengatakan kepada Anda cara menciptakan lebar header, navigasi, dan footer Anda di Blogger. Cara template Anda diatur yaitu mempunyai nilai margin, padding, dan max-width untuk "membangun" tata letak Anda. Untuk menciptakan header, navigasi, atau lebar footer Anda harus menghapusnya dan menambahkannya kembali hanya ke konten utama (area posting + sidebars).
Harap dicatat bahwa ini hanya untuk menciptakan area lebih luas, sehingga Anda sanggup menerapkan CSS ke layar penuh. Jika Anda memakai gambar header dan gambar hanya selebar 900 piksel, tutorial ini tidak akan mengubah itu. Ini akan memungkinkan Anda untuk menambahkan warna latar belakang memakai CSS untuk menjangkau lebar penuh layar di belakang gambar 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 isyarat berikut
.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
6. Temukan
Harap dicatat bahwa ini hanya untuk menciptakan area lebih luas, sehingga Anda sanggup menerapkan CSS ke layar penuh. Jika Anda memakai gambar header dan gambar hanya selebar 900 piksel, tutorial ini tidak akan mengubah itu. Ini akan memungkinkan Anda untuk menambahkan warna latar belakang memakai CSS untuk menjangkau lebar penuh layar di belakang gambar Anda.
SEBELUM + SETELAH CONTOH
Rollover / Arahkan kursor ke gambar untuk melihat teladan sebelum dan sesudahQ. APA NILAI NILAI-NILAI DENGAN $ SEBELUMNYA DALAM TEMPLATE SAYA?
Kode apa pun dalam template Anda yang terlihat menyerupai dengan $ (contoh); intinya yaitu isyarat yang dikontrol oleh Variabel di bab atas CSS Anda dan dipakai oleh Perancang Template (Tema > Edit > Customize). Anda sanggup mengedit isyarat variabel standar atau mengedit area CSS utama (mengubah dari nilai variabel menjadi "nyata" nilai-nilai menyerupai warna atau nomor) tetapi jikalau Anda menghapus isyarat variabel lalu mengubah opsi terkait di Perancang Template tidak akan berfungsi berhati-hati ketika melakukannya. Lebih lanjut wacana ini dalam tutorial gres nantinya.CARA MEMBUAT HEADER ANDA, NAVIGASI + FOOTER MENJADI FULL WIDTH
Anda sanggup melakukannya dengan mengedit nilai variabel menyerupai yang dijelaskan di atas yang saya rencanakan untuk melaksanakan posting di masa mendatang, tetapi kami akan tetap mengedit CSS utama alasannya lebih gampang untuk dijelaskan dan dipahami. Harap tidak isyarat 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 isyarat berikut
<b:skin> ... </b:skin>2. Di antara <b:skin> dan </b:skin> mencari tubuh, ini yaitu salah satu isyarat pertama. Anda akan melihat isyarat menyerupai ini :
body {Ubah
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);menjadi
padding: 0px;3. Cari .content-inner. Ini yaitu bab yang membungkus (menggabungkan) header Anda, navigasi, posting, sidebar dan footer. Cari untuk itu, lewati bab variabel dan temukan sesuatu yang terlihat seperti
.content-inner { padding: $(content.padding) $(content.padding.horizontal); }Ini yaitu isyarat yang kita bicarakan sebelumnya. $(Content.padding) ditetapkan ke 10px dan $(content.padding.horizontal) yaitu 40px sebagaimana diatur di bab variabel. Kami ingin menghapus padding 40px yang ada di kedua sisi konten kami sehingga header tidak akan mempunyai ruang kosong. Ubah itu supaya terlihat seperti
.content-inner { padding: $(content.padding) 0px; }atau jikalau Anda lebih suka
.content-inner { padding: 10px 0px; }4. Sekarang cari bab template Anda di bawah ini </b:skin> yang terlihat menyerupai 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 menyerupai 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 isyarat 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 isyarat berikut di atasnya
.tabs-inner { padding: 0px; } .section { margin: 0px; } .header-inner .widget {margin: 0px; }8. Simpan template dan Anda seharusnya sanggup melihat header penuh, navigasi dan area footer kini dengan konten utama Anda tetap sama lebar menyerupai sebelumnya. Saya telah menguji ini di semua Template Blogger default dan berfungsi, beberapa template memerlukan lebih banyak / sedikit pengeditan tamabahan.
