Membuat Lebar Background Footer Sesuai Layar

Membuat Lebar Background Footer Sesuai Layar - Sama seperti pada artikel sebelumnya yaitu membuat lebar background header blog sesuai layar, pada bagian footer juga bisa dibuat seperti itu yaitu Membuat Lebar Background Footer Sesuai Layar

Kenapa background footer blog juga ikut-ikutan disesuaikan dengan layar? Jika kita hanya melebarkan bagian header saja maka tampilan blog kurang menarik dan tidak seimbang dan untuk itulah saya juga menyertakan artikel ini sebagai lanjutan dari artikel sebelumnya

Membuat lebar background footer sesuai layar lebih mudah dari pada di header karena pada bagian footer hanya terdapat sedikit kode CSS. Tapi kode berikut masih sama dengan kode header yang telah saya bahas sebelumnya, berikut cara membuat lebar background footer sesuai layar

Karena sebelumnya sudah membuat lebar background header sesuai layar, maka dalam template blog Anda sudah terdapat kode yang seperti berikut ini. Jika kode tidak sesuai, perhatikan susunannya
```
<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>

Agar lebar footer sesuai layar, terlebih dahulu sesuaikan lebar footer-wrapper yang ada di template. Untuk menyesuaikannya, ambillah kode-kode yang ada di #header-wrapper dan salin kedalam #footer-wrapper seperti berikut ini


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

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

Tambahkan kode background footer agar sesuai layar
#footer-outer {background:#666;width:100%;height:100px;}

Sehingga pada kode CSS footer akan terlihat seperti berikut ini


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

Selanjutnya tambahkan kode HTML untuk lebar footer tersebut, seperti berikut ini


<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-outer'>
  <div id='footer-wrapper'>
   <div id='footer'>
   </div> <-- penutup footer
  </div> <-- penutup footer-wrapper
 </div> <-- penutup footer-outer
 </div> <-- penutup outer-wrapper
</body>

Dan pindahkan penutup outer-wrapper tepat dibawah penutup content-wrapper seperti berikut ini


<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> <-- penutup outer-wrapper
 <div id='footer-outer'>
  <div id='footer-wrapper'>
   <div id='footer'>
   </div> <-- penutup footer
  </div> <-- penutup footer-wrapper
 </div> <-- penutup footer-outer
</body>

Selesai

Itulah cara membuat lebar background footer blog sesuai layar, jika ada kendala seperti tidak samanya kode itu bukanlah suatu masalah karena pada intinya semua template blog di jagad maya ini adalah sama yang perlu diperhatikan adalah susunan dari struktur kode template tersebut atau untuk lebih jelasnya mengenai susunan kode template ini, silahkan baca di Semua Kode Template Blog Sama

Dan terimakasih, semoga artikel ini membantu Anda dalam melakukan editing kode template. Jika ada yang mau didiskusikan monggo berkomentar di artikel ini, Membuat Lebar Background Footer Sesuai Layar

6 komentar:

Wahyu Eka Prasetiyarini27 Agustus 2013 pukul 23.07
sepertinya tutorial ini bagus untuk di praktekkan agar footer bisa digunakan secara maksimal. Blog saya sejauh ini bagian footer belum di beri widget apa-apa buk hehehe :D
BalasHapus
Balasan
Anonim28 Agustus 2013 pukul 17.18
Biasanya lebar dari isi footer ini cocok diisi dengan label atau kategori dari postingan kita,lengkap ini tutorial dan kodenya.
BalasHapus
Balasan
Unknown23 September 2014 pukul 16.09
Maaf, saya sudah coba namun bukan hanya backgroundnya yang sesuai layar namun widget didalamnya juga ikut sesuai layar. Mohon bantuannya, agar widget footernya tidak melebar juga
BalasHapus
Balasan