ADVERTISEMENTS

Share
Bookmark and Share
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 :

original gcse code javas12345cript

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

edited gdcse code

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

and change it to

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.

top