Membagi kolom header menjadi 2 kolom

Oke langsung aja, caranya seperti berikut:

1. Login pada pada Blogger menggunakan id blog sobat
2. Template
3. Edit HTML lalu Lanjutkan
4. pertama - tama cari kode #header-wrapper { atau lebih lengkapnya mirip seperti di bawah ini

   #header-wrapper {
   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk1bPwh0Tu7G2H7c2xfd2_1rxhq0wH4AxyiPqwyTagN4MbJ8fPmWvYGPlnbMiBNDmBQtyboa-3QAwrHODHEJYrndbG2uxD9fVLWHQn0EbUXjoV00heUPRJNwqvobxx1clHR9p__7xZvFQh/s1600/line.gif) repeat-x scroll left bottom;
   height:119px;
   width:900px;
   }
   #header-inner {
   background-position:center center;
   margin-left:auto;
   margin-right:auto;
   }
   #header {
   color:#000000;
   text-align:left;
   }

5. hapus dan ganti kode tersebut dengan kode dibawah ini:
   

   #header-wrapper {
   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk1bPwh0Tu7G2H7c2xfd2_1rxhq0wH4AxyiPqwyTagN4MbJ8fPmWvYGPlnbMiBNDmBQtyboa-3QAwrHODHEJYrndbG2uxD9fVLWHQn0EbUXjoV00heUPRJNwqvobxx1clHR9p__7xZvFQh/s1600/line.gif) repeat-x scroll left bottom;
   height:100px;
   width:900px;
   }
   #header-inner {
   width:428px;
   margin:0 auto;
   padding-top:6px;float:left;
   }
   #header {
   color:#000000;
   text-align:left;
   }
   #r_head{
   width:468px;
   float:right;
   padding-top:6px;
   }

6. selanjutnya geser scroll ke bawah dan cari kode <div id='header-wrapper'> atau lebih lengkapnya mirip seperti di bawah ini
   

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
   </b:section>
   </div> 

7. hapus kode di atas dan ganti dengan kode di bawah ini
   

   <div id='header-wrapper'>
   <div id='header-inner'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
   </b:section>
   </div>
   <div id='header-kanan'>
   <b:section class='header2' id='header2'/>
   </b:section>
   </div>
   </div>

8. Simpan Template

Selesai deh, jika semua langkah sudah sobat lakukan seperti di atas, tampilan kolom sesudah diedit akan menjadi seperti pada gambar di bawah ini

Bagaimana sob ? susah apa mudah ? oh iya, kang reggy baru ingat, jika sobat ingin mengubah ukuran setiap kolom, tinggal utak - atik kode yang berwarna merah dengan ukuran yang sesuai dengan kebutuhan sobat.

Berikut Cara lain Membuat Header Blog Menjadi Dua Kolom :
Untuk membuat header blog menjadi 2 kolom ini, saya tidak memberikan ketentuan khusus karena setiap kode header yang ada di template blog memiliki perbedaan. Namun secara dasar setiap template memiliki id header dengan kode #header dan id #header ini ditempatkan dalam satu element #header-wrapper atau lebih sederhananya sebagai berikut;

#header-wrapper {
#header {

Element #header memiliki lebar sesuai dengan lebar terluar dari element #header-wrapper, sehingga untuk membagi header blog menjadi 2 kolom, cukup membagi id #header menjadi 2 dan mengganti namanya menjadi nama yang berbeda, dan contohnya seperti berikut ini

#header-wrapper {
#header {
#header-right {

Lalu bagaimana untuk mengatur lebar dan jarak tepi (baca: margin padding) untuk dua kolom header ini? Karena id #header ini berada dalam element element #header-wrapper maka untuk mengatur lebar jangan sesuaikan dengan lebar element #header-wrapper tapi bagilah menjadi 2 bagian yang memiliki jarak antar tepinya

#header-wrapper {width:980px;}
#header {float:left;width:450px;text-align:left;}
#header-right {float:right;width:510px;text-align:left;}

Dari kode sederhana diatas, saya belum memberikan jarak tepi (margin padding) dari 2 kolom header tersebut. Hanya membagi lebar dan letak dari kolom tersebut yaitu float dan width. Float untuk kolom header kiri adalah left dan lebar untuk kolom kiri adalah 450. Untuk mengatur margin padding (jarak tepi) silahkan baca caranya di Margin Padding Blog
Jadi saya tidak akan memasangkan margin atau padding dalam kode diatas karena itu harus menyesuaikan antar kode di id #header dan #header-right. Namun sebagai acuan agar tampilan 2 kolom header ini sama, coba pasangkan kode margin di id #header-right seperti berikut ini

#header-wrapper {width:980px;}
#header {float:left;width:450px;text-align:left;}
#header-right {float:right;width:510px;text-align:left;margin:5px 0px;}

Ingat, margin pada id #header-right ini hanya sebagai acuan, silahkan diganti untuk menyesuaikan agar tampilannya sama atau sejajar dengan id #header. Kenapa saya tidak menetapkannya sebagai kode utama? Selain tiap kode template berbeda, hal ini juga menyesuaikan dengan id-id yang lain yang ada didalam id #header. Di id #header masih ada beberapa id lagi yaitu #header h1, #header a, #header p, #header .description dan #header img

Setelah mengganti kode CSS header blog diatas, tambahkan juga kode HTML id #header-right tersebut, seperti contoh berikut ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Info Template Blogger (Header)' type='Header'>
<b:includable id='main'>
Disini ada kode header h1, header a, header p, header .description, header img
</b:includable>
</b:widget>
</b:section>
<div id='header-right'>
<b:section class='header' id='header2' preferred='yes'/>
</div><div class='clear'/>
</div>

Jadi, sesuaikan dengan kode header yang ada di template blog karena artikel blog ini hanya sebatas penjelasan umum saja bukan secara khusus untuk mengganti header blog. Dan jika masih bingung atau kode header berbeda  coba dengan ini Bikin Header 3 kolom 
kalo masih bingung juga kaya ane sendiri silakan brosing hehe atau ke link asal post ini dibawah
sumber: http://www.panduantemplateblog.com/