Custom Google Search

Google Custom Search is one of those tools whose list of Plus points is nearly endless. From providing super relevant search results  to options for On-Demand Indexing. GCS is a boon for all Blog and Website Owners.But the one thing that doesn't fit in place is its exceedingly over simple Search Form ,that again with Google Watermark. In this post I will be telling you how to change the Look of your GC Search Box with a CSS3 search Box.

I am assuming that you have already setup your Google Search Custom search engine if you haven't then check this tutorial. There are many variations GCS but normally the code contains a <script> tag , and it looks something like this:

01	<div id="cse" style="width: 100%;">Loading</div>

02	<script src="http://www.google.com/jsapi" type="text/javascript"></script>

03	<script type="text/javascript">

04	google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO});

05	google.setOnLoadCallback(function() {

06	var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');

07	customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);

08	customSearchControl.draw('cse');

09

}, true);

10

</script>

Here you can't really see where to apply the styling. Now the following code also works the same way as the above Code, only thing is that it is easy to Customize :

1	<form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown">

2	<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>

3	<input value="FORID:11" name="cof" type="hidden"/>

4	<input id="q" style="width:150px;" name="q" size="70" type="text" />

5	<input value="Search" name="sa" type="submit"/>

6

</form>

In the id "searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" , XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY is your "Search engine unique ID" which you can find on the Control panel of your search engine.

If you are using the Adsense linked GCS then your search Box should look something like this:

01	<form action="URL of the page where the Result open id="cse-search-box">

02

<div>

03	<input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" />

04	<input type="hidden" name="cof" value="FORID:10" />

05	<input type="hidden" name="ie" value="ISO-8859-1" />

06	<input type="text" name="q" size="21"  />

07	<input type="submit" name="sa" value="Search"  />

08

</div>

09

</form>

10	<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>

(If you want to remove the default styling then exclude the script tag above and also remove id="cse-search-box" from the 1st Line)

Courtesy:-Prayag Verma http://www.stylifyyourblog.com/2011/07/customize-google-custom-search-box.html

-By Parthiv Patel