Cara Membuat Header, Navigation dan Footer Penuh pada Blogger. Template default berguna bagi anda yang sedang belajar membuat blog, tetapi hal-hal baik tentang memiliki blog anda sendiri adalah bahwa anda memiliki kesempatan untuk menambahkan sentuhan pribadi anda sendiri sesuai dengan keinginan anda. Template blogger tidak dibuat untuk membatasi kebebasan anda untuk mendesain sebuah blog, tetapi sebaliknya template default ada untuk memberikan dasar untuk membangun sebuah template yang baru.
Sebelum membuat Header, Navigation dan Footer menjadi penuh terlebih dahulu BackUP Template blog yang anda gunakan. Membuat perubahan pada Header, Navigation dan Footer di blog dapat dilakukan dan tidak membutuhkan banyak waktu. Pentingnya backup template blog ini digunakan bila terjadi kesalahan dalam pengeditan, anda dapat mengembalikan template sebelumnya yang sudah anda backup.
Cara Membuat Header, Navigation dan Footer Penuh Lebar di Blogger:
Langkah # 1: Akses file CSS pada Blogger
Jika anda belum pernah membuka file CSS sebelum, login ke akun Blogger anda, pilih blog anda dan arahkan ke Template > Edit HTML. Ini akan memunculkan kode template anda berisi semua file internal yang blog anda di satu tempat
Langkah # 2: Memodifikasi Background
Klik di manapun dalam area code > tekan tombol
CTRL + F dan ketik baris berikut > tekan Enter untuk menemukannya
body {
Tepat di bawah
body{ anda akan melihat beberapa baris yang akan terlihat 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)
}
Lihat kode yang berwarnah merah di atas hapus dan menggantinya dengan
padding: 0px;
Template yang berbeda akan memiliki variasi yang berbeda, tetapi anda masih harus dapat menemukan kode tersebut di dalam setiap Template.
Langkah # 3: Mengubah Bagian Konten
Selanjutnya cari kode dibawah ini dengan cara tekan
CTRL + F
.content-inner {
Tepat dibawah kode tersebuat anda akan menemukan kode
.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}
Hapuslah kode berwarnah merah tersebut dan gantilah dengan
padding: 0px;
Langkah diatas akan menghapus salah satu bantalan di sekitar konten dalam, sehingga tidak akan meninggalkan ruang di kedua sisi.
Selanjutnya carilah kode berikut
$(content.background.color.selector) {
Tepat dibawah kode tersebut anda akan menemukan kode seperti berikut
$(content.background.color.selector) {
background-color: $(content.background.color);
}
Hapuslah kode berwarnah merah tersebut dan gantilah dengan
background-color: $(body.background);
Terakhir carilah tag berikut
]]></b:skin>
Dan tepat di atasnya, tambahkan CSS berikut
.main-outer {
background: $(content.background.color);
}
Langkah # 4: Membuat Content Outer Penuh Lebar
Konten yang ditampilkan berbeda-beda antara browser, sehingga anda akan memerlukan perbaikan untuk mengubah lebar di seluruh tampilan. Carilah kode berikut
.content-outer, .content-fauxcolumn-outer, .region-inner {
Dan tepat di bawah, anda akan melihat baris berikut
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
Hapuslah kode berwarnah merah tersebut dan gantilah dengan
max-width: 100%;
Langkah # 5: Penutup
Sekarang anda memiliki dua baris lagi anda hanya perlu mengubah. Carilah kode berikut
</b:template-skin>
Dan klik pada panah kanan untuk memperluas gaya. Catatan: Anda akan perlu untuk mencari
</b:template-skin> tag lagi, dan sebelum itu anda akan melihat simbol-simbol ini ditandai dengan warna kuning
]]>
</b:template-skin>
Di atas kode ini
]]> </b:template-skin>, tambahkan kode berikut
.main-outer {
max-width: $(content.width);
margin: 0 auto;
}
Selanjutnya carilah kode berikut
]]></b:skin>
Tambahkan baris kode sebelum/diatasnya
.tabs-inner {
padding: 0px;
}
.section {
margin: 0px;
}
.header-inner .widget {
margin: 0px;
}
Selanjutnya
SAVE dan keluar dari editor
CSS
Selesai
Tutorial diatas tidak akan mempengaruhi atau mengubah gambar yang anda gunakan di blog, hanya desain area konten. Jika Anda memiliki logo yang membentang di layar yang digunakan untuk 1/3 halaman header, anda akan perlu untuk mengubah ukuran dan meng-upload ulang konten ini sehingga mampu bekerja dengan penyesuaian baru.
