How To Customize Google Custom Search Engine Watermark Image And Search 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
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.
Related Posts via Categories
- Adsense Earnings based on Buying Keywords
- 20+ Codes and Hacks Every WordPress User Should Know
- Use Google Related Links To Display Related Articles In Your Blog
- How To Add Gravatar Beside Post Title In Blogger : Tutorial
- How to Create Author.php Page For Your WordPress Blog
- How To Show Next and Previous Post Below Comment Box
- Understanding Different Types Of Hosting
- Moving to Custom Domain in Blogger
- Wblogger The Best Offline Blogging Client
- Welcome To HTML Tutorials : Introduction : Lesson 1
Thank you very much ! You were really helpful.
Pay a visit to my website in a few days, I will have something ready that I only accomplished because of you !
Thanks, I was looking for a way to customize the google search submit button.
Hey Gagan, Can We add custom Search Button to Adsense Search… I mean will it break TOS
This is actually great information. I’m using Google Custom Search as standard in one of my themes that I’m thinking about releasing for free. Unfortunately the height of Googles search-button is different depending on if you are using IE or FF.
This post was really helpful.I have already incorporated it in my website.Working Fine.
Thanks ,
Regards ,
Sourish
(Admin)
OneTrickADay
thx… Many usefull guides here. thx! well done!
Very helpfull, this is what i looking for…
I was wondering if it was possible to not only change how the button looks but to have it centered under the search box instead of on the side?
I think its no possible. I’ll explore the settings and will let you know sooon.
If its even possible it might not be easy. I’m glad I found this article though as I needed to use a custom button.
Ha! I figured it out. I thought whats the worst that could happen if I simply put some centering tags around it? I figured if it works it has to go somewhere, and it did… Centered right underneath the text box like I wanted.
But I still wasn’t happy as it puts it right under the text box with no space, and I want a space. I tried a break tag and it didn’t work. Then for heck of it I tried paragraph tags and it worked!
So there you have it. For anybody who wants to put the search button centered underneath the text box just use centering tags around the buttons code.
If you want the button centered under the text box with a space between the two use paragraph tags as well with the centering ones.
I haven’t tried this with a modified search button though only the stock one. I can’t see why it wouldn’t work though.
If modifying the search button and watermark are against the Adsense terms of service, and I’m pretty sure I read it somewhere, why would you want to change them and risk having your adsense account shut down and earnings confiscated?
Google offers a paid search service where you can customise these things.
So, be careful!
Hi Gaganpreet I wanna say that Google will severely treat the coders who change the code. I read it some where. Its better to make a note at bottom of post that “Try at your own Rick”.
[...] How to change the Google search engine watermark image and button. [...]
Hi, I’m having trouble finding the GCSE code on my webpage… if someone could just point me in the right direction I’d be most grateful. Thanks
Hi. Where do I find the GCSE Code? The code google gave me does doesn’t include what you’re saying I should change…
I can’t see the text it’s very small… Help plz
As far as legality is concerned you are allowed to mention anything like that looks as though the search engine belongs to google like instead of putting image logo Google Custom Search I think its fully legal to put something like this “Powered by Google ” or anything similar, great article I was looking for the same thing.
As far as modifying the Google Custom Search Logo is concerned its fully legal I think to mention something like “Powered by Google” or maybe anything similar but as far is Google is mentioned, great article helped me change on my website too, people are tired with “Google Custom Search” logo