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

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.