Custom Google Search

Posted: January 8, 2013 in HTML 5, Must Watch
Tags: ,

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s