Selasa, 27 Agustus 2013

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

Membuat Lebar Background Header Blog Sesuai Layar
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 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

Membuat Lebar Background Header Blog Sesuai Layar Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni

8 komentar:

  1. Kodenya ini bisa untuk membuat lebar background yang 2 kolom ya mbak?

    BalasHapus
  2. kalau mau membuat bacground fotter sesuai dengan layar giaman mbak ...........???

    BalasHapus
    Balasan
    1. sama saja mbak Siti, pertama harus memperhatikan dari stuktur kode template. dari penjelasan saya diatas, ganti strukturnya seperti berikut ini:
      <body>

      <div id='header-wrapper'>
      <div id='header'>
      </div>
      </div>

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

      <div id='footer-wrapper'>
      <div id='footer'>

      </div>
      </div>
      </body>

      selanjutnya tambahkan element ID pada footer seperti yang saya jelaskan pada bagian Header diatas

      Hapus
  3. 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
    1. saya sudah membuatkan artikelnya buat mbak Imet bisa baca di http://www.panduantemplateblog.com/2014/11/mengganti-warna-blog-untuk-css-variable.html

      Hapus
  4. 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
  5. Wah keren... udah di praktekkan di blog saya dan berhasil, dari penjelasannya sangat mudah sekali dipahami, trimakasih banyak :)

    BalasHapus

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

Direktori

direktori weblogger
Direktori WeBlog Indonesia