Style Google Custom Search Engine Using CSS For Blogger

One of the major problem faced by blogger developer is the built in search engine of blogger. Sometimes it display nothing when a user search a different keyword. The one and only solution for this problem is implementing Google Custom Search Engine.

Do you know what is Google Custom Search Engine? This is a service by Google that let users to create their own search engine that will only search a specific URL or multiple URLs according to users need.

But there is two problems. The first problem is its very simple look and Google Watermark. Suppose your Blog has very responsive CSS and the Google search Box you have provided does not go with it. You can 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 your custom CSS into it and get rid off Google’s default design right? The second problem is the search results displayed in a popup window. That’s very boring for everyone.

In this article I will share you some simple tips to implement google custom search into your custom search form and also you can display the search results in a new page.

Now here is the solution, what I have used in my blogger blog. 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 blog something like this:

<script>  (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:') +        '//cse.google.com/cse.js?cx=' + cx;    var s = document.getElementsByTagName('script')[0];    s.parentNode.insertBefore(gcse, s);  })();</script><gcse:searchbox></gcse:searchbox>

Then GCS will tell you to paste this snippet in those page of your blog 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 Blogger Blog:

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.

<form action='http://www.smartpik.in/p/search-results.html' id='search-form' style='display:inline;'>

<input name='cx' type='hidden' value='partner-pub-XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY'/>

<input name='cof' type='hidden' value='FORID:10'/>

<input name='ie' type='hidden' value='ISO-8859-1'/>

<table>

<tbody>

<tr>

<td class='search-box'>

<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/>

</td>

<td class='search-button'>

<input id='search-button' type='submit' value=''/>

</td>

</tr>

</tbody>

</table>

</form>

Don’t forget to replace XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYYwith your unique id. Also replace the URL in blue with a new blogger page for displaying search results.

Now you can always use your custom CSS to this form whatever you want. What I have used in my blog, I am copying here everything. To add them in your template, search for ]]></b:skin> tag in template and paste following codes just above this tag.

#search-form {
background:#333;
float:right;
margin:0 0;
width:200px;
}
#search-form table {
width:100%;
margin:0;
}
#search-form td.search-box {
padding-right:30px;
}
#search-form input#search-box[type="text"] {
background:#ffffff;
height:29px;
line-height:29px;
margin:5px 0px 5px 10px;
padding:0 10px;
width:99%;
color:#666666;
border:none;
}
#search-form input#search-button[type="submit"] {
font-family: FontAwesome;
background:#E73037;
color:#ffffff;
height:29px;
line-height:29px;
margin:5px 10px 5px 0;
padding:0 12px;
border:none;
outline:none;
}
#search-form input#search-button[type="submit"]:hover{
opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
cursor: pointer;
}
#search-form input#search-box[type="text"]:focus {
background:#eee;
outline:none;
}

Now come to the Search result part. As you have seen in the form, there is an attribute “action” which will call the "http://www.smartpik.in/p/search-results.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 code into your page. To add this code, go to page and click edit then go to the HTML section and paste the below code and click publish. Also replace the unique id in red color with your unique id.

<script>
  (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:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

If its not working (The search results displaying in a popup window), then go to GCS and change its layout into Two-column.

These are all you need to make a cool search box supported by Google. If you need any help, leave a comment below. Don't forget to Share.Thank you!