How to integrate google custom search to your website?

How to integrate google custom search to your website?:Google custom search is the best search tool which you can integrate to your website. If you are using any CMS(wordpress, joomla etc.,) softwares for your blog/site , then lot of ready-made plugins are exist. One important drawback with google custom search is it searches only from the google indexed pages. So if your website is new and integrated with google custom search then google may not search and provides the results as expected because it would have not indexed all your pages.

 

Requirements:

• Google custom search Javascript code. Steps are shared below.
• Bootstrap CSS & JS
• jQuery

 

Note: All the css & JS files you will get when you download this project.

 

 

 

Steps to get google custom search Javascript code:

1. Open Google custom search site.
2. Enter your website name and receive the code.

 

 

 

 

 

3. Check the look & feel tab for all the customization options.

you can find the different customization options for searchbox and searchresults in single page or with two different page or using model view.

 
4. Take the code and place it like below.

 

 

Add searchbox to header section:

 

[php]
<div class=”navbar-right” style=”overflow:hidden;width:50%;margin-top:20px;”>

<script>
(function() {
var cx = ‘011227168080149672033:egpamlrpbws’;
var gcse = document.createElement(‘script’);
gcse.type = ‘text/javascript’;
gcse.async = true;
gcse.src = ‘https://cse.google.com/cse.js?cx=’ + cx;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox></gcse:searchbox>

</div>
[/php]

I have added the above snippet inside the nav tag.

 

 

 

Add the search results javascript tag code to body:

 

[php]
<div class=”container” >
<gcse:searchresults></gcse:searchresults>
</div>
[/php]

 

 

Google custom search integration Demo Snippet:

 

 

Feel free to share any thoughts/comments in the below comments section.