Thursday, April 10, 2008

Hack Google Custom Search form watermark

DeTToX: hack google custom search watermark Integrating the Google Custom Search in a site or blog, it's useful to replace the default watermark (the image displayed in the input box) to customize the form to your needs. This makes it possible to add additional useful information without losing the cool effect. The hack is still valid for any input box.

DeTToX: hack google custom search watermark

In the GCS control-panel selecting the watermark branding style, the Google code to insert in the web pages would be something like this:



<form action="http://www.google.com/cse" id="cse-search-box">
  <input type="hidden" name="cx" value="XXXXXXX" />
  <input type="text" name="q" size="25" />
  <input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" 
src="http://www.google.com/coop/cse/brand?form=searchbox_XXXXXXX">
</script>


The JavaScript code immediately after the <form>, (not strictly necessary to the functioning of the search box) shows the watermark and creates the cool effect.
Put the script URL in the browser, the link will be something like this: http://www.google.com/coop/cse/brand?form=searchbox_XXXXXXX and you'll see the complete code and the URL of the image watermark: http://www.google.com/coop/images/google_custom_search_watermark.gif

DeTToX: hack google custom search watermark

then you have to modify the code and replace the image URL with the new watermark. For example I prefer to explain the usefulness of the input box.

DeTToX: hack google custom search watermark

Naturally the new .is file and the new watermark image will have to be hosted by you. Then in the Google code, replace Google's URL to the new .js file, for example:



<form action="http://www.google.com/cse" id="cse-search-box">
  <input type="hidden" name="cx" value="XXXXXXXXXXXXXXXXXXXXXXXX" />
  <input type="text" name="q" size="25" />
  <input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" 
src="http://dettox.blogspot.com/gcs.js">
</script>


3 comments:

PWN said...

Is it really allowed? I have not used that one, only 'Adsense for search'. Is it the same?

Nice post... i always like learning from Adsense blog posts and it is my new niche.

It is always good to stop to drop a few. I hope you drop by and support my blog with a comment and some extra reciprocation.

Keep it up!
MoneyLogger

Anonymous said...

awesome job!!! Works great! Using AJAX CSE too....

Anonymous said...

Thanks, really helped

Post a Comment