How To Insert Search Box in Blogger Template

August 6th, 2008 • Related • Filed Under

First Time Visitor , then why not subscribe to our feed .
Subscribe Via RSS or Subscribe Via EMAIL .

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

Related Posts :

There Are 2 Responses So Far. »

  1. Comment by Sagar on 27 August 2008:

    Hi,
    Nice article. But not enough for me. I am using a customized blog template and there is already a search box. What I want to do is, Replacing this search box with google custom search(Adsense for search).Can you please tell me how to do this?

  2. Comment by admin on 27 August 2008:

    @ Sagar , Just replace your blogspot search code with the google search code .

Post a Response