Membuat Header Menjadi 2 Bagian / Kolom

Header di blog yang standart biasanya hanya terdapat 1 kolom/bagian saja, yang berisi judul blog dan deskripsi blog anda. Hal ini membuat anda yang ingin menambahkan widget di header menjadi kesulitan. Sebenarnya anda tetap bisa menambahkan widget di header, tetapi ini akan membuat lebar atau tinggi header menjadi berubah mengikuti seberapa besar widget yang anda tambahkan.

Akan tetapi masalah ini bisa di atasi dengan cara membuat header anda menjadi 2 bagian/kolom. Kolom pertama berisi judul blog dan deskripsi, dan kolom kedua berisi widget yang anda tambahkan (lihat gambar di atas). Dengan merubah header menjadi 2 bagian, anda bisa menambahkan iklan atau widget lainya tanpa merubah lebar dan besar header blog anda.

Bagaimana cara membuat header menjadi 2 bagian/kolom ? Silahkan ikuti langkah-langkahnya di bawah ini :

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Widget"

Langkah 2
Cari kode: ]]></b:skin> 

Lalu letakkan kode dibawah ini diatasnya

#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;}

Langkah 3
Setelah itu cari kode ini atau yang mirip, karena beda template biasanya beda kodenya

<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>

Yang bertanda ................. berisi kode yang panjang dan mungkin berbeda-beda. Perhatikan saja kode terahir </b:section>.

Lalu Setelah kode </b:section> paste-kan kode di bawah ini

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

Contoh penerapannya seperti 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;'/>

Langkah 4
Sekarang cari kode ]]></b:template-skin>  

Kemudian letakkan kode dibawah ini diatasnya

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

Langkah 5
Save template anda

Kemudian lihat hasilnya

Postingan yang Bersenggama