Selasa, 27 Agustus 2013

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

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

Membuat Lebar Background Footer Sesuai Layar Rating: 4.5 Diposkan Oleh: ana sriwahyuni

6 komentar:

  1. 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
    1. iya mbak Wahyu, tapi kode diatas belum ada kode untuk widgetnya loh heheee

      Hapus
  2. Biasanya lebar dari isi footer ini cocok diisi dengan label atau kategori dari postingan kita,lengkap ini tutorial dan kodenya.

    BalasHapus
    Balasan
    1. untuk blog dengan kategori News & Info biasanya ada mas, tapi di blog Infosaja kok ga' ada ya :)

      Hapus
  3. 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
    1. background blog dengan background widget memiliki ukuran yang berbeda, untuk widget bisa diatur di bagian kode sidebar

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia