Adding Gadget Inside Header

Ingin punya template dengan header dua bagian, yang satu berisi header berserta description dan yang satunya lagi berisi widget. Widget di Header dapat pula diisi sesuai dengan keinginan kita.

Dari hasil bertanya pada dukun sakti, Mbah Google, dihasilkan satu jawaban yang cukup memuaskan. Sesuai dengan prediksi dari Mbah Google, dalam link ini terdapat jawabannya. Berikut hasil yang diperoleh:

1. Login ke Blogger >> Design >> Edit HTML, kotak di samping Expand Widget Template tidak perlu dicentang.

2. Temukan kode di bawah ini.

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

3. Masukkan kode berikut di bawah kode pada no. 2.

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

4. Jika sudah selesai, maka hasil yang didapat akan seperti ini:

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

Pada tahap ini berarti kita telah memiliki 2 bagian dalam Header, hanya tinggal sedikit diperbaiki kembali.

5. Temukan kode berikut ]]></b:skin>

6. Masukkan kode berikut tepat di atas kode pada no. 5.
a. Template lama

#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;}
body#layout #header {width: 50%; float: left;}
body#layout #header-right {width: 50%; float: right;}

b. Template yang lebih baru

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

Jika menggunakan template yang lebih baru, maka harus pula mencari kode </b:template-skin> dan meletakkan kode berikut ini di atas kode tersebut.

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

7. Save template. Setelah itu silahkan lihat pada Page Element, di situ akan terdapat tempat untuk gadget. Letakkan sebuah gadget di sana.

8. Jika ingin mengatur lebar Header dan gadget sesuai selera, silahkan atur kode pada no. 6 terutama dua baris pertama.

Selamat menikmati Header baru dengan sebuah gadget di sampingnya.

Sumber: Tweak My Blogger