Membuat Lebar Background Header Blog Sesuai Layar

Membuat Lebar Background Header Blog Sesuai Layar - Perhatikan layout dari pada blog ini, lihat pada bagian header, dan lihat pada background header blog yang berwarna biru. Pada background header blog ini memiliki lebar sesuai komputer Anda. Atau untuk contoh tampilannya seperti pada gambar berikut ini

Untuk membuat lebar background header blog sesuai layar, saya tidak akan menjelaskannya secara khusus tapi akan memberikan langkah-langkah dasarnya saja karena setiap template memiliki kode yang berbeda dan cara membuat lebar background header sesuai layar ini sudah saya terapkan pada template blog ini. Template blog ini bukan milik saya dan tampilan asli pada header template ini tidak memiliki lebar background seperti pada blog ini. Untuk mengetahui kode asli template blog ini, KLIK DISINI :)

Berikut cara membuat lebar background header blog;
Pertama, perhatikan kode template blog berikut ini dan saya harap kode-kode berikut ini minimal ada didalam kode template blog Anda


#body {...}
#outer-wrapper {width:960;margin:20px auto;padding:0 10px;}
#header-wrapper {width:960px;height:100px;}
#header {...}
#content-wrapper {...}
#main {...}
#footer-wrapper {...}
#footer {...}

Dari kode template blog diatas jika ditampilkan dalam bentuk HTML sederhana maka akan menjadi seperti berikut ini

<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<div id='header'>
</div>
</div>
<div id='content-wrapper'>
<div id='main'>
</div>
</div>
<div id='footer-wrapper'>
<div id='footer'>
</div>
</div>
</div>
</body>

Kode CSS dan HTML diatas masih belum membuat lebar background header sesuai layar, untuk menyesuaikannya ikuti beberapa langkah penyesuaian berikut terlebih dahulu

Atur margin dan padding yang ada di kode CSS #header-wrapper
Bagaimana mengatur margin dan padding di kode CSS #header-wrapper? Untuk mengaturnya, ambillah kode margin dan padding yang ada di #outer-wrapper
Bagaimana kalau #header-wrapper sudah memiliki kode margin dan padding? Silahkan diganti sesuai dengan kode margin padding yang ada di #outer-wrapper

Maka hasil penambahan kode margin padding kedalam #header-wrapper akan terlihat seperti berikut ini


#outer-wrapper {width:960;margin:20px auto;padding:0 10px;}
#header-wrapper {width:960px;height:100px;margin:20px auto;padding:0 10px;}

Dan hapus nilai jarak yang ada didalam margin padding #header-wrapper diatas sehingga hasilnya seperti berikut

#outer-wrapper {width:960;margin:20px auto;padding:0 10px;}
#header-wrapper {width:960px;height:100px;margin:0px auto;padding:0 0px;}

Kalau sudah menyesuaikan, tambahkan kode background untuk header blog. Sebenarnya menggunakan #header-wrapper sudah bisa dijadikan background header namun saya membuatnya lebih mudah
Untuk menambahkan kode background, ikuti langkah-langkah berikut ini

Tambahkan kode #header-outer diatas kode #header-wrapper atau seperti contoh berikut ini


#outer-wrapper {width:960;margin:20px auto;padding:0 10px;}
#header-outer {background:#666;width:100%;height:100px;}
#header-wrapper {width:960px;height:100px;margin:0px auto;padding:0 0px;}

Dari kode diatas, header blog sudah memiliki background tapi belum menyesuaikan lebar layar. Kenapa belum sesuai? Dikarenakan masih ada yang membatasi yaitu kode #outer-wrapper. Agar lebar background header blog sesuai layar, pindahkan kode HTML <div id='outer-wrapper'> tepat diatas <div id='content-wrapper'> atau seperti contoh berikut ini
```
<body>
 <div id='outer-wrapper'>
 <div id='header-outer'>
  <div id='header-wrapper'>
   <div id='header'>
   </div> <-- penutup header
  </div> <-- penutup header-wrapper
 </div> <-- penutup header-outer
  <div id='content-wrapper'>
   <div id='main'>
   </div> <-- penutup main
  </div> <-- penutup content-wrapper
  <div id='footer-wrapper'>
   <div id='footer'>
   </div> <-- penutup footer
  </div> <-- penutup footer-wrapper
 </div> <-- penutup outer-wrapper
</body>
```
<body>
<div id='header-outer'>
<div id='header-wrapper'>
<div id='header'>
</div> <-- penutup header
</div> <-- penutup header-wrapper
</div> <-- penutup header-outer
<div id='outer-wrapper'>
<div id='content-wrapper'>
<div id='main'>
</div> <-- penutup main
</div> <-- penutup content-wrapper
<div id='footer-wrapper'>
<div id='footer'>
</div> <-- penutup footer
</div> <-- penutup footer-wrapper
</div> <-- penutup outer-wrapper
</body>
Sampai kode diatas, lebar background header blog sudah sesuai dengan layar. Jika masih terlihat kurang sempurna, sesuaikan kode CSS margin dan padding #header-outer dengan membaca artikel di mengatur margin padding blog
Selamat berkreasi! Semoga berhasil
Eits, tunggu dulu, jika background header blog sudah sesuai layar, bagaimana dengan footer blog? Untuk footer, silahkan baca di Membuat Lebar Background Footer Sesuai Layar

Setelah membaca artikel ini, memang terasa sulit dan saya akui memang sulit namun jika kita mencoba dan terus mencobanya makan kita akan berhasil melakukannya. Namun jika Anda masih mengalami kesulitan dalam membuat lebar header blog sesuai layar, mari kita diskusikan bersama dimana letak kesulitan tersebut karena saya rasa artikel ini sudah saya jabarkan semudah mungkin agar bisa dimengerti untuk dilakukan dalam Membuat Lebar Background Header Blog Sesuai Layar

8 komentar:

Anonim27 Agustus 2013 pukul 21.24
Kodenya ini bisa untuk membuat lebar background yang 2 kolom ya mbak?
BalasHapus
Balasan
Anonim3 November 2013 pukul 01.52
kalau mau membuat bacground fotter sesuai dengan layar giaman mbak ...........???
BalasHapus
Balasan
Unknown16 November 2014 pukul 11.44
Mbak Ana, saya mau ganti warna font header di html editor, tapi di html, script nya tuh kyk gini: background-color: $headerBgColor;... itu apa maksudnya ya? soalnya isi html templatenya beda sama yg laen.. makasihh...
BalasHapus
Balasan
Mr.162511 Desember 2014 pukul 14.16
siang mbak... saya masih bingung ni
blog saya kok gak ada "< bod y >" ataupun "# body {...}"
apa ada simbol lain yang menerangkan/pengganti dari body it??
BalasHapus
Balasan
Unknown1 Agustus 2015 pukul 17.29
Wah keren... udah di praktekkan di blog saya dan berhasil, dari penjelasannya sangat mudah sekali dipahami, trimakasih banyak :)
BalasHapus
Balasan