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 aba-aba HTML di template blog anda dan melaksanakan sedikit perubahan pada template blog. Kita semua tahu bahwa aba-aba HTML di template blogger mempunyai beberapa aba-aba 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:

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 aba-aba ]]></b:skin untuk mempermudah tekan Ctrl+ F dan masukkan aba-aba berikut ini diatas aba-aba 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 aba-aba yang hampir ibarat dengan aba-aba berikut ini alasannya ialah setiap aba-aba 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>

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

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

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

Sehingga tampilannya akan ibarat 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 aba-aba ]]></b:template-skin>  dan letakkan aba-aba 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.

Share this post