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

Today I m going to tell you how to change the watermark of google search bar and its button.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

tipsfor Customize Google Custom Search Engine Watermark Image

Customizing the Submit button

Customizing the submit button is very simple, we do not have to edit any javascript rather we will tweak the CSS.
Open Edit HTML  and paste this code before of  ]]></b:skin>

#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!

These Articles can be helpful to you

1. [How-to] Add Digg button to Blogger Post
2. Add Favicon To Your Blogspot Blog
3. Google 1 Button For your blog to increase site visiblity
4. How to show 10 posts instead of 5 posts in blogger
5. How to add Orkut Share button

Article by WordPress Expert

WordPress Expert has written 123 articles.

If you like This post, you can follow free-tricks.com on Twitter. Subscribe to FT feed via RSS or EMAIL to receive instant updates.

Tweet Facebook Google