How To Insert Search Box in Blogger Template

To Insert Search Box in Blogger

1. Goto your blogger Dashboard -> Layout

2.now say PageElements-> Add New Element - > Html Javascript.

3. Add the Following code :

<div align=’center’>

<form expr:action=’data:blog.homepageUrl + &quot;search&quot;’ id=’searchform’ method=’get’ name=’searchform’>


<div align=’right’>

<input id=’s’ name=’q’ type=’text’ value=”/>

<input id=’searchIcon’ type=’submit’ value=’Search’/>


</div>

</form>

</div>

4. Now goto EditHtml -> and add the Following Code with in the and tag .

#searchform {
padding: 5px 0 0;
padding-right: 15px;
text-align: center;
}
#searchform #s {
width: 150px;
padding: 3px;
padding-right: 15px;
margin: 0 0 5px 0;
background: #fff;
border: 1px solid #A2A295;
color: #6A6A6A;
font-size: 11.5px;
font-family: Arial, Sans-Serif;
}
#searchIcon {
height: 24px;
width: 60px;
padding-right: 15px;
background: #941200;
border: 0px solid #941200;
padding: 0px 0px;
vertical-align: top;
color: #fff;
font-weight: bold;
}

5. Click Save Html

Blogger Search Ready