How To Insert Search Box in Blogger Template

submit to reddit

Do you have a default Search box in your Blogger template ? If no , you can add one with the below code.

Step 1] Goto your blogger Dashboard -> Layout
Step 2] now say PageElements-> Add New Element – > Html Javascript.
Step 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>

Step 4] Now goto EditHtml -> and add the Following Code with in the <b:skin> and </b:skin> 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;
}

Step 5] Save and Enjoy your new Search Box … !!

Subscribe to Rockstar template by Email !!