How To Customize Google Custom Search Engine And Search Button

Posted By: Poketors - September 28, 2011
If you are on web then needless to tell about the Google search and a lot of product related to the brand Google. In normal practice whatever we want to know, we simply open Google page and search it. So how about the search engine where you will specify teh parameters i.e. how and where to search? It sounds great. Okay, then we will tell you how to make a customize google search and also how to change the watermark of Google search bar and its button. Google provides a very user friendly platform where you can customize your google search with your required query and result.

How To Customize Google Custom Search Engine And Search Button

So now we will explain you how Google Custom Search Engine (CSE) works. Here we go:

Textbox Customization:

The Google CSE code looks like somewhat given in the below image. If you want to change the watermark image, copy the javascript source link i.e and open it in browser. Download the javascript. If you see the js, you will find some codes like following with a imagone link in it :
(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′) { = ‘border: 1px solid #7e9db9; padding: 2px;’; } var b = function() { if (q.value == ”) { = ‘#FFFFFF url(http:\x2F\\x2Fcoop\x2Fintl\x2Fen\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat’; } }; var f = function() { = ‘#ffffff’; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test( { b(); } } })();

Below are the steps to change the watermark:

1. Copy the entire javascript code and paste it in Notepad.
2. Change the watermark.gif image link with your own desired image.
3. Save the file as google.js and upload it on web.
4. Again go to Google CSE code and replace the javascript code with your own edited code.

Submit button Customization :

It is very easy to customize as we do not have to edit any javascript here. We will do it via CSS.
Just open the Edit HTML and paste this code before

 <code>]]&gt;&lt;/b:skin&gt;<br /></code>


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

Please change the width according to the size of the button image and suitable to your site.
Done with teh size customiszation. Now go to Google CSE code and search for
<code> &lt;input type=”submit” name=”sa” value=”Search” /&gt;<br /></code>
Replace the above entry with the following :
<code>&lt;input type=”submit” name=”sa” value=” ” id=”SearchButton”&gt;<br /></code>
Here you are done with the button customization too. Hope the watermark and the button look like the same what you always wanted to appear on your page.

Copyright © 2010-2023 Poketors | The content of this website is copyrighted and may not be reproduced on other websites.| Email us at :