Pages

Saturday, October 1, 2011

23

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.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

23 comments:

Ami Hendrickson said... [reply]

This was a life-saver! I manage a client's new blog, and though the Blogger search gadget works just fine on my established blog, it doesn't on the new one. This workaround was clear even for non-tech-y me. Thanks!

MS-potilas said... [reply]

@Ami Hendrickson
You're welcome :) Thank you for trying it, I'm glad you got it installed.

MS-potilas said... [reply]

You might also be interested in my hack for navbar search.

If navbar is not used in your blog, you might want to edit the cse gadget code, so that the links open in the same window, see this.

Tony Bayfield said... [reply]

First of all, thank you so much for responding to my post on the Blogger Help forum. I have been looking at your work-arounds for the Search Box and Navbar problems. I have a limited understanding of coding but I understand the concepts of your fixes for these broken Blogger elements and I'm very impressed with your work.

I decided to start by creating a Google CSE for my blog and then to test it. Certainly the results for the more recent posts (which do not appear in the standard Search Box results) are much better, but I have discovered also an issue with some keywords producing far too many results, most of which are duplications resulting from incorrect associations with other pages throughout the blog. I wondered whether you have found the same with some CSE search results?

MS-potilas said... [reply]

@Tony Bayfield
My blog is under 200 entries, and the results have been good "out of the box". But you can control the your CSE:s search results by:
- excluding some url paths from the results, for example all paths that contain _arhive.html
- if you have some common keyword(s), you might want to add refinements for those keywords that user can choose. See Helping your users refine their searches for explanation about refinements.

These I know, but there might be more. There's a lot of documentation out there about CSE.

Tony Bayfield said... [reply]

Thanks for your reply. The test keyword I used, Khlebnikov, appears only once on one page of the blog, yet CSE returns 39 results and I can't figure out how it's making the associations! I'll look into controlling search procedures as you suggest - thanks. I'm beginning to wonder whether all this is worth it though, since very few of my visitors ever use search tools!

MS-potilas said... [reply]

@Tony Bayfield
I checked google's caches from http://www.google.fi/search?q=site%3Atonybayfield.blogspot.com+Khlebnikov and the extra search results for other pages are coming from the popular posts widget, there's a snippet of the post. That widget is problematic for search results. I did not come up with any solutions other that turning off the post snippet. Would be a pity, though. I would just blame google for the extra results ;)

You are right, not many users use the search, either they are regular followers or come already from (google) search to the blog and some post. Or through some link. I personally like to have a working search so I can get easily to old posts, and this was also a (programming) challenge for me. :)

Tony Bayfield said... [reply]

So, the Popular Posts widget is the culprit - I did wonder whether this might be affecting the results. I know that a lot of visitors use this sidebar widget to look at other posts (I think it gets more use than my archive widget or internal links list) and who can resist clicking on a thumbnail! It looks a little empty without the snippet text so I wouldn't want to disable that.

It's very kind of you to check this out for me and I appreciate your help very much. Thank you. I need to give this whole search box issue some more thought...

my best
Tony

Kimai Huirama said... [reply]

Hi - I tried carrying out the steps your provided and everything seemed to go ok. However, I'm still not getting any results coming up (at all) when I type in a keyword. Any ideas why this might be?

MS-potilas said... [reply]

@Kimai Huirama
Hi, I think it is because your blog is so new, that Google has not indexed it yet. If you try to search "site:learning-gracie.blogspot.com" from google.com, there are no results. The custom Google search uses the same indexes as google.com.

It may (I'm not sure) speed up the indexing process, if you add your blog's sitemap to Webmasters Tools. Here's Webmaster tools help.

But it should start working eventually, even if you did nothing. It has taken about a week for my blogs to get initially indexed, and after that new articles have been indexed in less than a day.

Diane Theron said... [reply]

I tried your way and the steps are easy to follow and when I tested it worked beautifully but then explorer won't allow me to save it. So frustrated here!

Advanced Health said... [reply]

The custom Google search "almost" worked for me. First. the search box is slightly narrower than the original. And it puts a white bar just under news ticker (my background is black). It (the white bar) is slightly wider than my article area. And the list of results is way too long. No way to close it. Was hoping same length and function as original. I'm not too html savvy, obviously. Don't have patients to figure it out. What I cant understand is why the original search gadget stopped working to begin with. First it stopped showing "some" results - most popular articles. Then it just went down :( as though it was tampered with. or blocked. or something?

http://www.articleblogspot.net

MS-potilas said... [reply]

@Advanced Health Hi, yes it is a pity the original search gadged is so unreliable. It just may not work, or return none to too little results.

The white background could be resolved by changing CSE styles in http://www.google.com/cse/manage/all. Normally the style is for white background. Also you can customize the search results, for example leave out archive pages etc. to have less results.

So CSE is quite customizable, but needs some effort to "fine tune" it.

Laura @ Hip Pressure Cooking said... [reply]

Thanks, very elegant and easy solution. At first I didn't understand about the vertical space until I looked at my website and realized that everything was shifted down.. now everything looks great!

I couldn't figure out for two years why "octopus" would not come up on the blog's search! Now, I see it and the resuults are really nice with little piictures, too!

Ciao,

L

Laura @ hip pressure cooking said... [reply]

@Laura @ Hip Pressure Cooking

I re-installed the Google Custom Search, today and found that the code is in two versions.

I originally installed the first version in April and your style sheet fix worked perfectly. Just installed Version 2 (there is a link to version 1 or 2 when you click "get code" from the CSE page) and it brought the entire center colum of my website down.

: (

Going to try re-installing version 1 to see if I can get it all fixed.

Long story on why I'm doing this again.. lost my domain just got a new one and have to re-install everything.

Brooke Roberts said... [reply]

This is great! Thank you so much! However, I'm having trouble removing the extra space. I add the CSS code as you describe but it's still showing a pretty big gap between my posts and the header. Can you help?

www.insidestudyabroad.com Thanks!

MS-potilas said... [reply]

@Brooke Roberts
Hi, the CSS code in the article for removing extra space works for the V1 code of custom search, which can select at the bottom of the page where you get the code. I have not used the version 2 codes as the old one still works for my blogs.

If you want, you could try this CSS with the V2 code, but I have not tested it :)

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

If it does not work, I suggest you try V1 code.

Brooke Roberts said... [reply]

Hey There! Thanks for the quick response. I reinstalled everything using the V1 code (and removed all the old code). However, it's still leaving the gap at the top. Any ideas?

Brooke Roberts said... [reply]

never mind! It's working now. :) Thanks for all your help! Great tool!

zohaib anwar said... [reply]

ordinary Windows seek with a substantially speedier one. Not at all like Windows hunt, Everything at first shows each record and envelope on your

zohaib anwar said... [reply]

volume through the document metadata in the NTFS Master File Table. Everything is a web crawler for Windows that replaces the

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: