How to add search box in blogger header

                  In this post, we will see how to add search box in blogger header.

Follow the following steps:


1. Go to www.blogger.com. Get log in using your gmail credentials.

2. Go to Theme -> Edit HTML.

3. Go to Jump to widget -> Header1

Scroll down until you get </b:section>

Add following lines just after </b:section>

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

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

Click on Save theme.

4. Now go to Layout -> header-right -> Add a Gadget. Add Blog Search gadget.

5. To adjust position of search bar on the right hand side of Title:

Again go to Theme -> Edit HTML

Search for ]]></b:skin>

Just before ]]></b:skin> ,  add following lines:

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

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

]]></b:skin>

Click on Save theme. It is done. 

6.  If you want to show this search bar on mobile version, 
Go to Theme -> Edit HTML -> Jump to widget -> BlogSearch.

Add attribute mobile='yes' in tag <b:widget

For Example:
<b:widget id='BlogSearch2' locked='false' title='Search This Website' type='BlogSearch' mobile='yes'>
 


I have added this feature on my blog www.comrevo.com. Check it. 

Thank You.