Thursday, May 19, 2011

Using a Google-search-engine to add a custom search gadget to your blog

This article is about adding a Google Custom Search Engine (CSE) to a blog made with Blogger.  However much of the information is relevant to putting Google-CSE's into other blogs and websites also.

Understanding normal search vs custom search

Blogger provides a search gadget that you can add to your blog the same way you add any other gadget.   This works well, provided your blog is public, and you have allowed Google to index it (check the latter under  Settings > Basic > Privacy - edit > Let search engines find your blog = Yes)

However if you want more control over how the search in your blog works or if you are an AdSense publisher and want to (potentially) earn revenue from ads on the results page then you need to use a Custom Search Engine.  (Or some other non-Google search engine might work too - but it's not what I'm covering in this article.)

A Custom Search Engine (CSE) is like a specialised widget:  you log into the CSE-editor and set up the search options, and then are given some code to put into your blog.   Setting up the options and putting the code into your blog isn't hard, but you do need to do a few specific steps to make sure the code you are given that works inside Blogger.

If you use a CSE, as well as getting a share of the AdSense earnings, you can also customize the search, eg by searching more than just the one site, turning auto-suggestion on, modifying searches with additional keyworks, adding refinements, changing the layout of results, etc.

Creating your Custom Search Engine

Follow these steps to make your own search tool, and install it into your blog.

Log in:

1  Go to Google's custom-search-engine application

2  Log in with the Google account that owns the blog

You can transfer a blog from one Google account to another one.   But there is not currently any way to transfer ownership of a CSE between Google accounts.   So if there is any chance that you might want to hand the blog over to someone else in the future, it's a good idea to make sure that items like this are owned by a Google account that can go with it.

Start your CSE

3  Click the  New Search Engine Link (currently at the very top of the left-hand panel)

4  A simple wizard opens, to help you create the CSE.  Fill in these fields on the first screen:
  • Name - what you will know it as
  • Language - if your blog isn't in English, it's important to change this to the correct language, so that the search works correctly.
  • Sites to search:
    Enter your blog's URL.  
    Put  www. at the beginning, and  /* at the end (this says to search all of your blog, not just the home page) . 
    Example, the sites-list for the search on this blog is*

5  Click Get Code.   

6  Copy the HTML that is shown, and install it into your blog - either into an HTML gadget, or into a Post or Page.    (Or you may want to customize it before you add it - but this is optional).

How to customize your CSE

From the CSE home page, click on the name of the CSE you want to change.   This opens the Control Panel for that search.  

This has a left-hand pane with the major options, a tabs bar to provide further choices for each option and a right-hand preview panel which shows what the custom search will look like.
  • The Setup tabs have a little more information than was in the set-up wizard, but you do not need to change them - except perhaps for Make Money:

    If you don't already have an AdSense account, you can apply for one from here.   Because you will be using AdSense for Search, rather than AdSense for content, the rules and processes are a little different to those for joining AdSense for your blog.
    If you have an AdSense account on the Google account that's making the CSE, then this connection is easy - just turn it on.
    If your AdSense account is associated with another Google account, then you need to make the connection by entering the Google Account ID and certain other information that you've previously associated with the account, like phone number and postal code.:

  • The Search features tabs have some useful options:

    Refinements and Promotions let you add extra functions to your search.  They are not needed for a standard blog-search.  

    Synonyms which lets you upload a customised set of word-combinations that should be treated as equivalent in your search.  For example, in Blogger-hints-and-tips if I always use the word "gadget" in posts, it would be sensible for me to upload "widgets" and "page elements" as synonyms since they mean the same thing, and are terms that people are likely to search for.  However even though it would be sensible, I haven't actually uploaded this list, and the custom-search here seems to work well enough,

    Autocomplete offers searches similar to the one your reader (appears to be) typing:  by default it's turned off, but if people who search your site a used to standard Google search (which now has it on) then it may be good to turn it on.    You also have an option to manually include or exclude certain auto-complete patterns  could be useful if your blog is in a niche with very specific terms for which the standard auto-complete option is totally wrong.
  • The Statistics and analytics tabs give you information about how the CSE has been used, and let you attach it to a Google Analytics profile. 
  • The Look and Feel tabs have options for controlling how the search is displayed (overal window is the default), and the colour-scheme.

    Firstly, you need to choose a layout:   I've described the options for CSE screen layout for people who needed to convert existing CSEs to the most recent layout options, but the notes there will help you see what layout might be right for your blog.

    Second, under Choose or Customize a Style, you may choose a style:  by default it's set to the value you picked in the wizard.  There is also a Customize button, and this let you edit a number of features including the colours, how the Google brand is shown, and whether or not a logo is shown at the top of the search results.

Related Articles: 

Putting HTML from a 3rd party into your blog

Transferring a blog from one Google account to another

Setting up AdSense on your Blog

Showing image-only AdSense ads in your Blog

Finding a picture's URL in Picasa-web-albums.

Share this Article


HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter


  1. Me new. Learning lot here. Google search gadget the add gadget not showing search within comments. Any way pl? With Regards.Me new. Learning lot here. Google search gadget the add gadget not showing search within comments. Any way pl? With Regards.

  2. Do you have any idea why it won't search any of the contents of my blog? Mine is set "public", enabling the search engines to find my blog, but when I try the custom search with the /* URL nothing comes up...
    I put your blog URL (blogger hint and tips) to test, and it works perfectly! Can you please help?