Add your own CSS and customize Google Custom Search box for your website
Add your own CSS and customize Google Custom Search box for your website

Google Custom Search is one of those tools whose list of Plus points is nearly endless. From providing super relevant search results to options for On-Demand Indexing. But the problem is its very simple look and Google Watermark. Suppose your website has very responsive CSS and the Google search Box you have provided does not go with it. You ca still change the look and feel of GCS but that’s not enough. You have a customize search box form and you want to put you custom CSS into it and get rid off Google’s default design right?

So here you go.

I suppose you have already setup your GCS for your website. If not then go to this link and setup your custom search engine. And then you will get a code generated for your website something ling like this:

<script type="text/javascript">// <![CDATA[
(function() { var cx = 'XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })();
// ]]></script>

Then GCS will tell you to paste this snippet in those page of your website where you want your search box. And this is not the end, you need to put <gcse:searchbox-only></gcse:searchbox-only> tag exactly where you want to put your the search box and <gcse:searchresults-only></gcse:searchresults-only> for the search result. These are actually like <div></div> tag. But after all there you will not be able to fit your own CSS to the search box. But you don’t need to do all this.

Now here is the solution, what I have used in my website:

Please note the unique id for your website provided by Google which is like this: XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY. All you need this id and nothing else. Now you need the common <form></form> tag, I guess you already have written this. If not, follow this code.
<div class="top-search">
<form method="get" id="searchform" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="search-result.html">
<div>
<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
<input type="submit" id="searchsubmit" value=" " />
</div>
</form>
</div>

Don’t forget to replace XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY with your unique id.

Now you can always use your custom CSS to this form whatever you want. What I have used in my website, I am copying here everything:

.top-search{
position: absolute;
top:118px;
right: 50px;
}
#searchform #s{
color: #49494b;
font-size: 12px;
width: 160px;
height: 21px;
margin: 0px 0px 5px 0px;
padding: 2px 35px 2px 8px;
border: 0;
background: #f0efeb;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#searchform #searchsubmit{
position: absolute;
top: 0px;
right: 0px;
width: 25px;
height: 25px;
border: 0px;
background: url(../img/search-submit.png) no-repeat transparent -3px 2px;
}

You don’t need to copy the entire <script></script> tag into the page. Just note the unique id. That’s all for setting up the search box.

Now come to the Search result part. As you have seen in the form, there is an attribute “action” which will call the “search-result.html” after clicking the submit button or pressing Enter key. So, now you need to setup another html page to show the result. You can put your existing common styles to this page. Now, put the following <div></div> and <script></script> where you want your search result.

<div id="page-content">
<div class='post-body entry-content'>
<div id="cse" style="width: 100%;">
<ul id="loadbar">
<li><div class="bar" id="layerFill1"></div></li>
<li><div class="bar" id="layerFill2"></div></li>
<li><div class="bar" id="layerFill3"></div></li>
<li><div class="bar" id="layerFill4"></div></li>
<li><div class="bar" id="layerFill5"></div></li>
<li><div class="bar" id="layerFill6"></div></li>
<li><div class="bar" id="layerFill7"></div></li>
<li><div class="bar" id="layerFill8"></div></li>
<li><div class="bar" id="layerFill9"></div></li>
<li><div class="bar" id="layerFill10"></div></li>
</ul>
</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var orderByOptions = {};
orderByOptions['keys'] = [{label: 'Relevance', key: ''},{label: 'Date', key: 'date'}];
customSearchOptions['enableOrderBy'] = true;
customSearchOptions['orderByOptions'] = orderByOptions;
var imageSearchOptions = {};
imageSearchOptions['layout'] = google.search.ImageSearch.LAYOUT_COLUMN;
customSearchOptions['enableImageSearch'] = true;
customSearchOptions['imageSearchOptions'] = imageSearchOptions;
var googleAnalyticsOptions = {};
googleAnalyticsOptions['queryParameter'] = 's';
googleAnalyticsOptions['categoryParameter'] = '';
customSearchOptions['googleAnalyticsOptions'] = googleAnalyticsOptions; var customSearchControl = new google.search.CustomSearchControl(
'XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
options.enableSearchResultsOnly();
customSearchControl.draw('cse', options);
function parseParamsFromUrl() {
var params = {};
var parts = window.location.search.substr(1).split('\x26');
for (var i = 0; i < parts.length; i++) {
var keyValuePair = parts[i].split('=');
var key = decodeURIComponent(keyValuePair[0]);
params[key] = keyValuePair[1] ?
decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
keyValuePair[1];
}
return params;
}
var urlParams = parseParamsFromUrl();
var queryParamName = "s";
if (urlParams[queryParamName]) {
customSearchControl.execute(urlParams[queryParamName]);
}
}, true);
</script>
<div style='clear: both;'></div>
</div>

You can put your own CSS for search result as well, like I used here:

ul#loadbar {
list-style: none;
width: 140px;
margin: 0 auto;
padding-top: 50px;
padding-bottom: 75px;
}
ul#loadbar li {
float: left;
position: relative;
width: 11px;
height: 26px;
margin-left: 1px;
border-left: 1px solid #111;
border-top: 1px solid #111;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
background: #000;
}
ul#loadbar li:first-child { margin-left: 0 }
.bar {
background-color: #2187e7;
background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
background-image: -ms-linear-gradient(45deg, #2187e7 25%, #a0eaff);
background-image: -o-linear-gradient(45deg, #2187e7 25%, #a0eaff);
background-image: linear-gradient(45deg, #2187e7 25%, #a0eaff);
width: 11px;
height: 26px;
opacity: 0;
-webkit-animation: fill .5s linear forwards;
-moz-animation: fill .5s linear forwards;
-ms-animation: fill .5s linear forwards;
animation: fill .5s linear forwards;
}
#layerFill1 {
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#layerFill2 {
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
#layerFill3 {
-moz-animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#layerFill4 {
-moz-animation-delay: 2s;
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
#layerFill5 {
-moz-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
animation-delay: 2.5s;
}
#layerFill6 {
-moz-animation-delay: 3s;
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
#layerFill7 {
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-ms-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#layerFill8 {
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
#layerFill9 {
-moz-animation-delay: 4.5s;
-webkit-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
}
#layerFill10 {
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
}
@-moz-keyframes fill {
0% { opacity: 0 }
100% { opacity: 1 }
}
@-webkit-keyframes fill {
0% { opacity: 0 }
100% { opacity: 1 }
}
@-ms-keyframes fill {
0% { opacity: 0 }
100% { opacity: 1 }
}
@keyframes fill {
0% { opacity: 0 }
100% { opacity: 1 }
}
.vcard, #HTML2, #AdSense1, #BlogArchive1, #Label1, #AdSense2 {display:none;}.post {font-size:14px;}
.footer, .post-footer, .feed-links, .sidebar,.fauxcolumn-right-outer,.column-right-outer, #HTML6 , .home-link, .banners {display:none !important;}
.main-inner .columns{padding-right:0 !important;}.column-center-outer{width:95% !important;}

These are all you need to make a cool search box supported by Google but without the Google watermark.

Enjoy… 🙂

About the author

Scientific History Blog Writer • Art enthusiast and Illustrator • Amateur Photographer • Biker and Hiker • Beer Enthusiast • Electrical Engineer • Chicago

Leave a Reply

Twitter Feed
%d bloggers like this: