Google Custom Search Box for Blogger

Search box helps your blog visitors in finding the content of their
interest without moving away from your blog.Google has a fantastic
service for adding their custom search box to any website or blog .It is
also known as GCS or Google Custom Search.Their is a simple method for
adding a Google Custom Search box in your blogger blog .

 
Part 1: Getting the ID of your Google Search Box

• Go to  Google CSE.


• Click on Sign in to Custom Search Engine.


• Login with your Google ID.


• After login Select New Search Engine option.


• It will ask for some basic information about your blog.


• Enter your information in the required fields.

• At the bottom of the page Select Standard Edition option.


• Select I have read and agree to the Terms of Service and Click Next

• Next Page is about design of your Search box. Select the design of your choice and Click Next

• On Clicking Next Source code for your search Box  appears.


• We are only interested in the ID of your search Box .Which will look like following one. Just Copy this ID.

var cx = '0058191456654674713064:ifd1qejpkgc';

 Part 2 : Adding Modified code to Blogger template

• Copy the following code in the notepad and replace the ID in the Code with your own ID which is obtained in the previous step.

<script>
  (function() {
    var cx = '0058191456654674713064:ifd1qejpkgc';
    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>

 After modifying the code Go to Blogger Dashboard.

• Select Template.


• Click Edit HTML.


• Click Proceed.


• Search for following code and paste your modified code just above it.

paste your modified code here

</head>

• Save the Template.

Part 3: Adding Search Box to your Blog

• Go to your blog Layout Option.


• Click Add a Gadget Option.


• Add a Search Box Gadget to your blog.

• The design of the search box will be automatically configured according to your settings in Google Custom Search service.


• Now whenever you change something in Google custom search service
  .The changes are automatically applied to the search box in your blog.