Cara membuat header blog jadi 2 kolom

Cara membuat header blog jadi 2 kolom  | Beberapa waktu yang lalu saya sempat mengganti template blog ini memilih template blog lebih simple dan sedikit seo friendly agar cepat terindeks google. namum ketika saya coba buat header-nya menjadi 2 kolom ternyata Cara membuat header blog jadi 2 kolom part 1 tidak berhasil di terapkan..

Akhirnya saya blogwalking dan ketemu solusinya hingga blog ini bisa memiliki 2 kolom header.

yang membuat saya memposting artikel ini, siapa tau blog anda memiliki template yang serupa dengan blog ini dan ingin membuat headernya jadi 2 kolom, dan tentunya ini menjadi tutorial yang cukup bermanfaat ..!

Dan berikut tahap-tahap pembuatannya :

1. Login Blogger
2. Pilih Tabs "Rancangan" -> Pilih "Edit HTML" -> Cek "Expand Template Widget"
3. Cari kode #header-wrapper {

Selengkapnya lihat dibawah ini

#header-wrapper {
width:970px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:970px;
text-align:left;
margin:0;
padding:0;
}

4. Buatlah kode CSS di atas menjadi seperti di bawah ini

#header-wrapper {
width:970px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:350px;
text-align:left;
margin:0;
padding:0;
float:left;
}
#header2 {
width:350px;
text-align:left;
margin-top:20px;
padding:0;
float:right;
}

Perhatian :
- Kode warna Merah dan Hijau adalah kode tambahan dari kode no.3.

5. Setelah itu Cari kode <div id='header-wrapper'>

Selengkapnya lihat di bawah ini

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

6. Buatlah kode CSS di atas menjadi seperti di bawah ini

<div id='header-wrapper'>
<div id='header'> 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Dangstars Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='header2'> 
<b:section class='header' id='header2' preferred='yes'/> 
</div> 
</div>

Perhatian :
- Kode warna Merah dan Hijau adalah kode tambahan dari kode no.6.

7. Klik "Simpan Template"
8. Selesai

Untuk lihat hasilnya anda bisa cek di Tab Menu "Tata Letak" bagian Header
Sekian tips dari saya ini semoga bermanfaat bagi anda semua ..!!

Sumber   http://dyan-seller.blogspot.com/2012/06/cara-membuat-header-blog-jadi-2-kolom.html