Alternate Methods to add Google Search Box in Blogger Blog

I was searching for alternate methods to add a search box in Blogger. The default navigation bar that provides a search box on the top of Blogger’s blog is very boring, I wanted a more customized search box for my blogs.

UPDATES: All the methods as here is only a SIMPLE FORM SEARCH. Subscribe to my news letters and i will update you some more regarding the AD-SENSE PART ASAP.

Later Google provided bloggers with a search function in their “add a gadget” section and they introduced a free Custom Search Engine (CSE) for any website as well. The problem with these two options introduced by Google is that by following their default instructions to install the search box, the blog may take too long to load.

So here, I am showing 3 alternate methods to add the same search box with similar functions using forms, it is using simple HTML, and therefore the loading time will be lightning fast.

Just cut and copy the below HTML code to any where you want it to appear in your blog.

Method 1
The default search box provide by Blogger. If you have removed your navigation bar on top and you still want the same search box that comes along with it.

Method 1 Demo

Method 1 HTML code
<center><div style="padding:3px; border:1px solid #000;"><form action="/search" method="get"><table><tr><td><img style="width:56px; height:20px; border:0px; align:absmiddle;" src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" /><input name="q" type="text" size=”20” onfocus="this.value=''" value="Search this blog…"/><input value="Search" type="submit"/></td></tr> </table></form></div></center>

Method 2
This method is simply a search box based on the normal Google search engine. However this method will only display results from within your blog. You will need to change the ‘http://YOURSITE.blogspot.com’ address to your blog URL in the HTML code below.

Method 2 Demo

Method 2 HTML code
<center><div style="padding:3px; border:1px solid #000;"><form action="http://www.google.com/search" method="get"><table><tr><td><img style="width:56px; height:20px; border:0px; align:absmiddle;" src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" /><input name="q" type="text" size=”20” onfocus="this.value=''" value="Search this blog…"/><input value="Search" type="submit"/></td></tr> </table><input value="http://YOUR SITE.blogspot.com" type="hidden" name="sitesearch"/></form></div></center>

(Method 2 - Variation)
You can add a checkbox for your readers to choose from just searching the web or just your blog. Use this form instead.

Method 2 Variation Demo

Search this BlogWeb Search

Method 2 Variation HTML code
<center><div style="padding:3px; border:1px solid #000;"><form action="http://www.google.com/search" method="get"><table><tr><td><img style="width:56px; height:20px; border:0px; align:absmiddle;" src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" /><input name="q" type="text" size=”20” onfocus="this.value=''" value="Search this blog…"/><input value="Search" type="submit"/></td></tr> </table><p><input checked value="http://YOUR SITE.blogspot.com" type="radio" name="sitesearch"/>Search this Blog<input value="" type="radio" name="sitesearch"/>Web Search</p></form></div></center>

Method 3
This method is a modification of Google’s product Custom Search Engine (CSE). They provide a free CSE for anyone; a paid upgrade is available though. However CSE provide JavaScript codes which sometimes slow the blog loading time. So here below is the alternate HTML method.

1. Sign up with Custom Search EngineCustom Search Engine and after you get your Search Engine.
2. Find your Search Engine Unique ID and replace it in the form below.

Method 3 Demo

Method 3 HTML code
<center><div style="padding:3px; border:1px solid #000;"><form action="http://www.google.com/cse" id="cse-search-box"><table><tr><td><img style="width:56px; height:20px; border:0px; align:absmiddle;" src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" /><input name="q" type="text" size=”20” onfocus="this.value=''" value="Search this blog…"/><input value="Search" type="submit" name="sa"/></td></tr> </table><input value="YOUR UNIQUE SEARCH ENGINE ID" type="hidden" name="cx"/><input value="UTF-8" type="hidden" name="ie"/></form></div></center>

Note that I have added a simple JavaScript to all three methods and that is when the default text is on focus, it will automatically disappear. This will make things easier for your user as they do not need to delete the text before they enter a new key search.

Also if you would like your search results to open in a new window. Just add this code.
target="_blank"

to your new search box.

Example:
Original Code:
<form action="http://www.google.com/cse" id="cse-search-box">

Add your the extra code here as shown below;
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">

There are many ways to add a search box using simple HTML forms. However, I believe Google is the favorite as they currently have the largest database and that probably also contain more information form your blog then the other search engines.

Thank you for reading. Please link to this post if it helps and feel free to comment and ask.

More reference:
Google Custom Search Engine official site.
Google Simple Search Box and guidelines.

Link To This Post:
<a href="http://kingofcomplain.blogspot.com/2010/04/alternate-methods-to-add-google-search.html" target="_blank" rel="dofollow">Alternate Methods to add Google Search Box in Blogger Blog</a>