Add banner, Adsense or search box in header to blogger

One blogger asked me about how to add am search box on the right side of blogger title so i think about i share my answer in this post.

In the tricks you can add anything inside your header bar. you can add adsense banner, a search box, social networking button like facebook like, google+, twitter button or add any html widget in header.



For adding Adsense ad, banner ad, search box in to header bar you have to add a new section. A section function as widget show a dashed lined box in the blogger layout and always comes with a add a gadget link. Once you get the add a gadget you can add anything in header. so i here learn about how to add "add a gadget" option to header

1. Add a new gadget section In html

Login your blogger account
click on Templates and Select Edit HTML
First i would recommend you to back up your templates
Make sure the expand widget templates check box is unchecked
Find the below HTML code

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

For adding new section insert the below code just right under it...

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

So you can see the final code like below

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

Styling the css section

if you want to change the section side by side floating the section containing the blog title to left or right...
1. Go to Edit HTML page find the word
]]></b:skin>
2. Add the below css code right before the above word

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

Now for installing the widget

Now the time for adding a banner, adsense ad or search box with your header. You can add it by click on "add a gadget" widget
Add your html code and save your blog ...