Membuat Lebar Background Header Blog Sesuai Layar ~ New Trick

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 sobat. Atau untuk contoh tampilannya seperti pada gambar berikut ini

Membuat Lebar Background Header Blog Sesuai Layar

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 sobat


#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 sobat 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

New Trick

About

Membuat Lebar Background Header Blog Sesuai Layar

Label

Like Us