How to Integrate GCSE to Blogger Custom Search Box

Today, I am going to share some simple steps to integrate GCSE to your own Search Box! For more details about GCSE and its advantages, you can visit my post : Adding Google Custom Search Engine to Blogger

Step 1 : Creating Your Google Custom Search Engine

 Go to Google Custom Search Engine

 Sign in your Google account » Click on New Search Engine » Fill up the form » Click on Create

 Once you've successfully created your Custom search engine you can finally add it to your site by clicking on Get code

 Next, copy the code and proceed to Step #2

Step 2 : Adding the Code to your Blog

 Create a page in your blogger and name it as "Search" or something similar (?)

 In HTML tab paste the code you just copied from Google Search

*The code should look like this

<script>
  (function() {
    var cx = 'YOUR UNIQUE ID GIVEN BY GCSE';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'https:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

 Replace <gcse:search></gcse:search> with <gcse:searchresults-only></gcse:searchresults-only>

 Go to your Blogger Template » Press Edit HTML; then

 Try to look for your Search Box code which might look similar to this

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

 Replace /search with the URL of the page you have created e.g. /p/search.html; then

 Save your Template

If you successfully managed to integrate it to your site, you will notice that every time you try to search you will be redirected to the Search Page you've created.

I hope you enjoy this article. Please leave a comment! Don't hesitate to ask for help if you're facing any problem integrating GCSE! Happy Blogging.

Rate This Article

Thanks for reading: How to Integrate GCSE to Blogger Custom Search Box, Stay tune to get latest Blogging Tips.