Cara Menciptakan Header 2 Kolom Di Template Blogger

Membuat header 2 kolom Blog - Banyak sekali pertanyaan dari sahabat blog aku yang menyampaikan bagaimana sih menciptakan kolom header menjadi 2 kolom atau lebih pada template blogger. Sebenarnya gampang sekali menciptakan tampilan header di template blog menjadi 2 kolom atau lebih, anda hanya harus jeli melihat instruksi HTML di template blog anda dan melaksanakan sedikit perubahan pada template blog. Kita semua tahu bahwa instruksi HTML di template blogger mempunyai beberapa instruksi yang hampir sama sehingga kalau kita tidak jeli melihatnya kadang kita salah meletakkan kode-kode tersebut di dalam template.

Baiklah tanpa berpanjang lebar lagi berikut cara membuat kolom header menjadi 2 kolom atau lebih, terlebih dahulu berikut preview tampilan dari hedaer blog anda nanti jadinya:

 Banyak sekali pertanyaan dari sahabat blog aku yang menyampaikan bagaimana sih menciptakan kol Cara Membuat Header 2 Kolom di Template Blogger
Membuat Header 2 Kolom di Template Blogger

Langkah langkah menciptakan header 2 kolom atau lebih di header blog:

1. Log in ke Blogger
2. Unduh atau cadangkan template blog anda dulu untuk berjaga-jaga
3. Masuk ke Template dan Edit HTML
4. Cari instruksi ]]></b:skin untuk mempermudah tekan Ctrl+ F dan masukkan instruksi berikut ini diatas instruksi tadi:

#header {width:50%;display:inline-block;_float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
50%  Pengaturan panjang dan padding kolom header kanan dan kiri

5. Kemudian cari instruksi yang hampir menyerupai dengan instruksi berikut ini alasannya ialah setiap instruksi template masing-masing blog berbeda:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog Sobat (Header)' type='Header'/>
...
</b:section>

Merupakan jumlah kolom yang anda kehendaki
Ganti dengan 'yes'
Merupakan instruksi yang agak panjang jadi aku tidak menuliskannya

6. Di bawah instruksi <b/:section> letakkan instruksi berikut di bawahnya:

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Sehingga tampilannya akan menyerupai di bawah ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' Judul Blog Sobat  (Header)' type='Header'/>
...
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>


7. Sekarang cari instruksi ]]></b:template-skin>  dan letakkan instruksi dibawah ini diatasnya:

#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}

8. Pratinjau template anda bila tidak ada yang error save atau simpan template anda.