Customize Google Custom Search

In this CSS Tutorial we will Customize Google Custom Search Input Box up to a certain degree with CSS maintaining Google AdSense Policy.

You must understand up to what level you can customize Customize Google Custom Search input box. You can not change the logo appearing and saying that is Google Custom Search. You are using it for free, you can not do it. That is why in this tutorial we will change only the button, which looks quite ugly by default, we will not even change the width and height of the input box as the logo will appear within it. One should not customize Google Custom Search box to a level so that the button has some arrow, thumb etc. inviting click as we are using Google AdSense’s Google Custom Search.

However, if you are apprehensive that its borderline to customize Google Custom Search input box, ask Google AdSense team whether they will allow it. We can not take any responsibility for your customization leading to banning of your AdSense account.

What we need to customize Google Custom Search Input Box

In order to customize Google Custom Search Input box, we need a good text Editor like Gedit, however, notepad will work fine, a button as the search button.

You can read how we customized our FeedBurner, almost in the same way as we are going to customize Google Custom Search input box.

Get ready to Customize Google Custom Search input box

The procedure we are going to show is for CSE for AdSense that uses iframe. So, you need an AdSense account. Go to your Google AdSense account and go to My Ads (New Interface) > Custom Searthing Engines > Click the New Custom Search Engine and choose the option “on my website using an iframe” under Display results (which is in turn under “Ad and search results style”), you will get two codes.
To display the results you need a new page, you can name the page as “search” or “search-result” ; copy the full code from “Search results code” after hitting the “Save and Get Code” button. Do not alter any thing. Go to the page, change to HTML mode and paste the code and publish it. Forget it. Our search result page is here : https://thecustomizewindows.com/search/

Now, copy the “Search box code” ; you can not alter the javascript injected logo. The default Google Custom Search code is like this :

<form action=”https://thecustomizewindows.com/search/” id=”cse-search-box”>
<div>
<input type=”hidden” name=”cx” value=”partner-pub-YOUR ID” />
<input type=”hidden” name=”cof” value=”FORID:9″ />
<input type=”hidden” name=”ie” value=”UTF-8″ />
<input type=”text” name=”q” size=”40″ />
<input type=”submit” name=”sa” value=”Search” />
</div>
</form>

<script type=”text/javascript” src=”http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en”></script>

You can customize the Google Custom Search Input Box’s button by replacing

<input type=”submit” name=”sa” value=”Search” />

With

<input type=”image” style=”margin: x px;” onclick=”submit” src=”FULL URL OF THE BUTTON”>

Here is what we are using –

You might need to alter the margin to align with the default Google Custom Search Input Box.