Menambahkan Search Box di Header (blogspot)

Saya memang jarang sekali share tentang tips  blogging, maklum saya memang kurang ahli dalam hal ini. Lihat aja template nya masih pakai yang standar blogger. Hehehe..

Tapi sepertinya menarik juga untuk share tips yang satu ini. Saya baru saja mencoba menambahkan menu search pada header blog. Setelah blog walking kesana kemari, akhirnya saya temukan juga cara yang ampuh. Hasilnya dapat anda lihat di kanan atas blog saya.

Ok, langsung disimak saja,

1. Masuk ke akun blogger
2. Lihat di Dashboard > Design > Edit HTML.
3. Jangan lupa Back up dulu template untuk jaga-jaga.
4. Expand Widget Templates tidak perlu di centang.
5. Cari kode berikut pada HTML code (kodenya tidak akan sama persis):

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

6. Tambahkan kode ini setelahnya.

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

7. Keseluruhan kode jadi seperti ini :

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

8. Selanjutnya masih di edit HTML, cari kode berikut : ]]></b:skin>

9. Paste kan kode berikut tepat di atasnya,

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

10. Sekarang saatnya menginstall Widget. Pada menu tata letak, klik tambah gadget, kemudian tambahkan kotak pencarian dari google.

‘Tambah Gadget’ kadang terletak di sebelah header, seperti di blog ini :

Saya mengambil referensi dari sini (bahasa Inggris): http://www.bloggersentral.com/2010/05/add-banner-or-search-box-in-blogger.html

Semoga berguna.