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
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”.
- A popup will be opened carrying Blogger Gadgets. Scroll down and click “Search Box” Gadget.
- Configure and preview your Google custom Search box and click “Save”.
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.
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“.
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.
5. Customize the styles to match the resulting search engine with your site and click “Next” button.
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.
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.
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.
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.