Membuat Lebar Background Footer Sesuai Layar ~ New Trick

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

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 sobat 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 sobat dalam melakukan editing kode template. Jika ada yang mau didiskusikan monggo berkomentar di artikel ini, Membuat Lebar Background Footer Sesuai Layar

New Trick

About

Membuat Lebar Background Footer Sesuai Layar

Label

Like Us