How to add Custom Google Search to your Blogspot blog

When I moved my MS-potilas blog from Wordpress.com to Blogger, the first problems I noticed were with search capabilities. The navbar search would not find blog posts whose dates are over one week older than blog's creation day. Of course in my imported blog most of the posts were like this.

Fortunately, I thought, there is a search gadget that can be inserted in the side bar. I did that, but the gadget gave me no results. Google already found my blog, so that was not the problem.

Searching through Blogger forums I noticed that navbar search problems have been around since 2009 and search gadget has stopped working in February 2011. So fixing those might take a while... On the meanwhile, something would be nice.

How to create a CSE for your blog

Because Google already found the blog and I could search it there, I figured that a Custom Google Search Engine would work, too. Free version displays ads before/next to search results, but it is better than nothing.

Here is how you create one for your blog:

1. Go to http://www.google.com/cse/. Click Create a Custom Search Engine (CSE)
2. Give your CSE a name and a description (MyBlog's search, Search for my blog MyBlog, for example). Put your blog's url in Sites to search. Read terms of service and click Next.
3. Select the style. Here you can also try out what results CSE will find for your blog. Then click Next
4. You're done. You don't need to copy the given code. From now on, if you wish to modify your CSE or get the codes, just go to http://www.google.com/cse/ and click manage your existing search engines.

Integrate search box into sidebar and results in main column

The search gadget displays this way, and we can make CSE work so, too. Go to your CSE's control panel, and choose "Look and feel". Select the two column layout and then click Save & Get Code. We use those codes in a while.

Now go to your blog's design, Page elements. Add gadget to sidebar. Choose HTML/Javascript gadget, optionally give it a title, and paste the longer code into this gadget. Arrange to your liking and save page layouts.

Then edit template html. Select Expand Widget Templates. Search for line

<div class='column-center-inner'>

After that add the shorter code, i.e. this:

<div id='cse' style='width:100%;'/>

If you did not find the column-center-inner -line, then search for line which begins:

<b:section class='main' id='main'  [...]

And put the shorter code immediately before it.

Now the search already works, you can try it out.

Styling to remove the excess space

The div which we inserted had initial height of 28, and CSE scripts double that when run, so the main column gets pushed 56 pixels downward. I fixed that by styling the <div id="cse"> by infamous negative margins.

Here's how: Go to Template Designer, Advanced, and Add CSS. Add the following definition:

#cse { 
min-height: 28px;
_height: expression(this.scrollHeight<29?"28px":"auto"); /* IE6 min-height */
margin-top: -28px;
margin-bottom: -28px;
}

Setting the min-height just makes sure the initial height is 28px. Apply to blog and now the main column is back to normal and we have a working search. Nice, innit :) You can see it working on this blog, and also the non-working out-of-the-box search gadget. You can try searching for "smilies", for example, using those gadgets.