Cara Membuat Header Menjadi Dua Bagian

Melakukan modifikasi blog adalah sesuatu yang sangat menyenangkan untuk mengurangi rasa bosan dengan tampilan blog kita.Pada catatan kali ini saya akan berbagi cara modifikasi header blog menjadi dua bagian.Header blog sangat penting agar blog terlihat bagus maka tampilan headerpun dibuat dengan berbagai macam tampilan.

Tampilan header yang saat ini banyak dipakai oleh para blogger adalah dengan membuat header menjadi dua bagian.Disamping untuk mempercantik blog, header biasanya berisi tentang judul blog serta deskripsi blog,tapi saat ini header banyak dipakai sebagian untuk menempatkan iklan.
 

OK sobat Darmanto semua,langsung saja bagi para sobat yang headernya masih satu bagian dan ingin membuat headernya menjadi dua bagian,berikut ini tips tentang cara membagi header menjadi dua bagian:

1. Login ke blog milik sobat dulu bila sobat belum login.
2. Klik rancangan
3. Klik Edit HTML
4. Download Template Lengka,bila sobat takut terjadi kegagalan dalam pengeditan header.
5. Sekarang cari kode CSS yang mirip seperti kode berikut:
   
   
   /* Header
   ----------------------------------------------- */
   #header-wrapper {
   width:960px;
   margin:0 auto 10px;
   border:1px solid $bordercolor;
   }
   #header-inner {
   background-position: center;
   margin-left: auto;
   margin-right: auto;
   }
   #header {
   margin: 5px;
   border: 1px solid $bordercolor;
   text-align: center;
   color:$pagetitlecolor;
   }
6. Ganti kode diatas dengan kode dibawah ini:
   
   
   /* Header
   ----------------------------------------------- */
   #header-wrapper {
   width:960px;
   margin:0 auto 0px;
   background:#ffff;
   height:90px;
   }
   #header-one {
   width:30%;
   background-position: left;
   margin-left: auto;
   margin-right: auto;
   float:left;
   }
   #header {
   margin: 0px;
   text-align: left;
   color:$pagetitlecolor;
   }
   #header_two{
   width:70%;
   float:left;
   padding-top:10px;
   }
   
   Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka width dengan lebar header template sobat.
7. Sekarang cari kode seperti berikut:
   
   
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='JUDUL BLOG MILIK SOBAT(Header)' type='Header'/>
   </b:section>
   </div>
8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang mirip kode contoh dibawah ini:
   
   
   <div id='header-wrapper'>
   <div id='header-one'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='JUDUL BLOG MILIK SOBAT(Header)' type='Header'/>
   </b:section>
   </div>
   <div id='header_two'>
   <b:section class='header' id='header2' preferred='yes'/>
   </div>
   </div>
9. Klik Simpan Template
10. Selesai

Untuk melihat hasil, klik elemen halaman, jika tampilan header sobat-sobat sekalian mirip screenshoot diatas, berarti sobat berhasil. Silahkan isi kolom baru dengan widget atau adsense sesuai keinginan sobat.

Demikian sobat semua,modifikasi blog kali ini tentang cara membuat header menjadi dua bagian.semoga bermanfaat.