How To Customize Google Custom Search Engine Watermark Image And Search Button

ADVERTISEMENTS

Before starting this tutorial I would like to tell you I do not know weather this tutorial is legal or not, I do not know are we allowed to customize the Google Custom Search Engine (GCSE) or not, do it at your own risk. Today I am going to tell you, how you can change the watermark image and how to tweak the search button in GCSE. Lets start :

Customizing the textbox

Now, the GCSE code looks like this :

To change the watermark image, copy the javascript source link i.e http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en and open it in browser. When you will carefully look at the javascript code you can see an image link.

(function() { var f = document.getElementById(‘cse-search-box’); if (!f) { f = document.getElementById(’searchbox_demo’); } if (f && f.q) { var q = f.q; var n = navigator; var l = location; if (n.platform == ‘Win32′) { q.style.cssText = ‘border: 1px solid #7e9db9; padding: 2px;’; } var b = function() { if (q.value == ”) { q.style.background = ‘#FFFFFF url(http:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fen\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat’; } }; var f = function() { q.style.background = ‘#ffffff’; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();

We have to perform the following steps to change the watermark image :

1. First copy all the javascript code and paste it in Notepad.

2. Now change the watermark.gif image link with your own desired image.

3. Now save the file as google.js and upload it on web.

4. Now, go back to the GCSE code and replace the javascript code with your own edited code i.e

5. And you are done.

For your ease you can download the original javascript code from here and edit the image link.

Customizing the Submit button

Customizing the submit button is very simple, we do not have to edit any javascript rather we will tweak the Style.css file.

Open style.css file and paste this code at the end

#SearchButton {
background:url(Your-Submit-Button-Image-Link-Here) no-repeat;
width:70px; }

Please note : Change the width according to the size of the button image.

Now, in the GCSE code look for

<input type=”submit” name=”sa” value=”Search” />

and change it to

<input type=”submit” name=”sa” value=” ” id=”SearchButton”>

Save you work and you are done!

I know its bit confusing and if you are facing any problem in using this tutorial, drop your comments and I’ll reply to to your queries as soon as possible.

If you like this post, you will love these :

1. Submit Your Blog URL To 20+ Top Search Engines In Just A Single Click : Get Traffic From Search Engines : Part3
2. How To Make Your Blogger Template Search Engine Optimized
3. How To Customize Blockquote In Blogger
4. How To Submit Your Blog To Google :Get Traffic From Search Engines : Part1
5. How To Submit Your Blog To Yahoo : Get Traffic From Search Engines : Part2
6. Improve Your Google Experience : Customize Google [ Firefox Addon ]
7. Compare Google, Yahoo, and MSN With One Search