February 3, 2010

How to Make Blogger Search Form

Nowadays, search engine can't be separated from internet world. With search engine, we can look for something that we want to know by typing its keyword. And know, I'll tell you how to add search form to your blog although there are many blogger templates had been already installed its search form, but by reading this tips you will know how to make and costumize it.

Steps to Make Blogger Search form


1. Login to your Blogger account

2. Go to Layout » Page Elements

3. Add Page Elements with HTML/Javascript, then paste the next code to content box:

<style>
#searchform {
overflow:hidden;
display:inline;
vertical-align:middle;
}
#searchbox {
background: #333; /*form background color*/
width: 200px; /*form width*/
color: #fff; /*form text color*/
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin:0 0 0 5px;
padding: 2px 0 3px 5px;
display: inline;
vertical-align:middle;
border:1px solid #333; /*form border*/
}
#searchbutton {
background: #333; /*button background color*/
color: #FFF; /*button text color*/
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin:0 0 0 5px;
padding: 2px 2px 2px;
font-weight: bold;
border:1px solid #333; /*button border*/
}
</style>

<form action='/search' id='searchform' method='get'>
<input id='searchbox' name='q' onblur='if(this.value==&quot;&quot;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&quot;&quot;;' type='text' value='Search here...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>

4. Finally, click Save.

Good luck...

Comments :

Post a Comment