Google Custom Search or CSE allows you to add robust search functionality to your websites and blogs. I’ve written a guide for WordPress user on integrating Google Custom Search with WordPress without using plugins. And in this tutorial, we’ll be learning how to add Google Custom Search to Blogger / Blogspot blog. The tutorial will cover two methods – Simple and Advanced. Simple method is recommended for Blogger beginners whereas Advanced method can be utilized by advanced Blogger users to add a bit more professional touch to the custom search on their blogs.

Add Google Custom Search to Blogger blog

Simple Method

Blogger provides an official Google Custom Search Gadget which gives a Search box after adding the Gadget. Adding Gadget is a matter of few clicks, and you’re all set with the custom search on your blogspot! Follow below given steps to add Google Custom Search box to Blogger:

  • Sign into your Blogger Dashboard and go to the Design section of your blog.
  • Select a position where you want to add the search box. Click “Add a Gadget”.

    add google custom search to blogger

  • A popup will be opened carrying Blogger Gadgets. Scroll down and click “Search Box” Gadget.

    add google custom search to blogger

  • Configure and preview your Google custom Search box and click “Save”.

    add google custom search to blogger

You’ve successfully integrated Google Custom Search with your Blogger blog. Now, whenever someone searches using this box, an instant search results page will be shown, with some tabs like results from your blog, linked from your blog, and the web. These tabs can be removed while configuring the Gadget.

Advanced method

The advanced method includes making our Google Custom Search integration a bit more professional. Implementing this method will help you customizing themes and appearance of Google Custom search results and Search box. You can also specify a different Search results page where the search results will be rendered. Below explained are the steps involved for advance integration of Google Custom Search with Blogger:

1. First off, create a new page in your Blogger blog with the title (headline) “Search”. Leave the content area blank and publish this page. This will be our Search results page.

2. Now, go to Google CSE and sign in using your Google account. After that, click on the button saying Create a Custom Search Engine to start.

3. You will see a form to set up the custom search engine. Just supply the required information like Name of your Search Engine, it’s description, Language, Sites to Search (one site per line) and select the Standard Edition, accept Google Terms of Service and click “Next“.

setup google custom search with blogger

4. Next, in the “Try it out” section, you can choose or customize the style, look and feel of your Search Engine. Just click on “Customize” button of any selected theme.

customize google custom search style and color

5. Customize the styles to match the resulting search engine with your site and click “Next” button.

customize google cse styles

6. In the final “Get the code” step, you’ll get the code of your custom search engine, but do not copy this code, as we have more things to set up. Just click on the Change Look and feel link below this code.

change layout google cse

7. Now, in the “Choose Layout” section, select “Two page“. The “Two page” option allows us to display the search box anywhere on our website but return search results on a specific page within the same window.

change layout google cse

Click “Save and Get Code“.

8. In the next page, leave the HTTP protocol selected in the specify website Protocol section. Put our Search page (that we created in Step#1) URL in “Specify Search Results Details” section in the textbox asking “Specify the url in your site where you want the search results to appear“. You can alter query parameter according to your need, the default parameter is q, so our search query URL will appear something like this: http://myblog.blogspot.com/p/search.html?q=keyword.

google custom search code

Below it, the code in first textbox (Code#1) is for Search Box and the code in second textbox (Code#2) is for Search Results. Just put Code#1 in a HTML/Javascript Gadget in your blog sidebar or wherever you want to display the Google custom search box. Put Code#2 in our Search page that we created in Step#1 (put the code in Edit HTML mode only (see below screenshot), else the Custom search won’t work). Save the Changes.

google custom search code for blogger

Now, you should see a search box on your website where you added the Gadget carrying custom search box code. Search using this box to test whether the integration is working or not. If everything went right, it will work and if you experience any problem with the integration, let me know, I’ll help you to integrate Google Custom Search with Blogger.

Also see Integrate Google CSE with WordPress and setup custom domain with Blogger.