Search Box on Blogspot (HTML Code Search Box)

In a previous post we discussed how to add search box into blogger, by blogger default and use Google Adsense Search. In this post we will discuss several types of search box that can be installed in our blog in addition to the two of search box that we have mentioned earlier.

1. Common type of search box

HTML Code :

<p align="left">
<form id="searchthis" action="http://doit2us.blogspot.com/search" style="display:inline;" method="get">
<strong>SEARCH IN THIS BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Remember to change http://doit2us.blogspot.com to the URL or web addres of your blog. You can also change the name of your search blog "SEARCH IN THIS BLOG" with whatever you want
You can also set the width of the search box by change size="20" and change the "Search" text with "Hit" or "Go" or whatever by change value="Search".maxlenght="255" indicates that the user may enter up to 255 characters in the search box, you can change the lenght but 255 is quite enough.

SEARCH IN THIS BLOG

If we change align="left" with "center", SEARCH IN THIS BLOG with SEARCH HERE, size="20" with "30", and "Search" with "Hit"  the search box display will look like this :

SEARCH HERE

2. Type of Expert Search Box

HTML Code :

<form action="/search" id="searchform" method="get" style=" text-align:center;">
<input class="inpsearch" id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;SEARCH HERE&quot;;}" onfocus="if (this.value == &quot;SEARCH HERE&quot;) {this.value = &quot;&quot;;}" type="text" value="SEARCH HERE">
<input id="searchsubmit" type="submit" value="Search">
</form>

In Expert type, we can provide the Words or Phrases inside the search box (SEARCH HERE) that will disappear when we click on it. You can change SEARC HERE with your words, just change those "three" of SEARCH HERE

3. Google Type Search Box

HTML Code:

<form method="GET" action="http://www.google.com/search">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<table bgcolor="#FFFFFF"><tbody><tr><td>
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" /></a>
</td><td>
<input type="text" name="q" maxlength="255" value="" >
<input type="submit" name="btnG" value="Search">
<span >
<input type="hidden" name="domains" value="http://doit2us.blogspot.com">
<input type="radio" name="sitesearch" value=""> Google Page <input type="radio" name="sitesearch" value="http://doit2us.blogspot.com" checked=""> doit2us.blogspot.com
</span>
</td></tr></tbody></table>
</form>

Change http://doit2us.blogspot.com to the URL or web addres of your blog. You can modify Logo, by change http://www.google.com/logos/Logo_40wht.gif with your Logo/picture web addres. You can also change the word "Search" in the search box by change Search.(ex. with Hit), "Google Page" and "doit2us.blogspot.com" in radio button by change Google Page and doit2us.blogspot.com with whatever you like, but the searching target still inside the Google and Your blog, unless You change the URL of http://www.google.com/search and http://doit2us.blogspot.com too.  

Google Page doit2us.blogspot.com

Note that I intentionally let the display of google search box above is in a white background, to make a contrast. You can set it to match your web page background by change #FFFFFF in table bgcolor="#FFFFFF" (#FFFFFF=White) with your HTML code of your background color. 
You don't know the HTML Code of your background color? Just see it in How to change the blogger header color, you can also download a small, smart and useful tool for free in there.

Happy search... and Good Luck...!!!