The ultimate hack for broken Blogger navbar search

My first workaround for navbar search was not too shiny: it redirects user to google search with the keywords user entered, search limited to your blog. Works though. But I wanted something better, and finally came up with this hack. For this hack you need custom Google search installed in your blog, see How to add Custom Google Search to your Blogspot blog. You also better have getElementsForClassName installed for better old browser support, and count blogger posts on page hack.

This is quite a long story, so to get you motivated, I'll first show you how it works. With keyword "bedica" the "original" navbar search found nothing from my MS-potilas blog (in Finnish), but with my hack, it looks like this:

Navbar search has had problems since 2009. Also the search gadget is now broken (broke this year). Search gadget can be replaced by custom Google Search, but what about navbar? We certainly don't have access to the code that searches the posts.

So, the (broken) search executes when user tries to use the navbar search, without us having any control. But, we can do things after that, when the results, or no results, are displayed. That is what my hack is based on.

Start with these:

1. Know your way around
2. Install getElementsForClassName function
3. Install Count Blogger Posts on Page hack
4. Install Custom Google Search in your blog. Test that it works.

After successfully completing these steps you have done most of the work already :) Now edit the template html. Find </head>, and before that add:

<script type='text/javascript'>
var searchPhrase = "";
var customSearchControl = null;
</script>

You can also add those two variable definition lines into some existing <script> block there before </head>, if you want. Then, find </body> and before that add:

Data provided by Pastebin.com - Download Raw

Save template, then open page elements. Open custom search gadget (HTML/Javascript) you made. In that code change: var customSearchControl = ... to customSearchControl = ... (i.e. remove "var" from that line). Don't alter the rest of the line. Don't add the ellipsis.

Then, after line:

    customSearchControl.draw('cse', options);

add:

    if(searchPhrase != "")
      customSearchControl.execute(searchPhrase);

For a nice finishing touch, let's make the search result links open in the same window. This also applies for the sidebar search gadged, naturally, because we're editing it's code. After line:

    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

add:

    customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_TOP);

After those modifications the code looks something like this (don't copy this code directly, this searches my Finnish blog, no use for you), changed/added lines highlighted:

<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'fi', style : google.loader.themes.MINIMALIST});
  google.setOnLoadCallback(function() {
    customSearchControl = new google.search.CustomSearchControl('014531972749200972566:g5b3gu6awfk');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_TOP);
    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    customSearchControl.draw('cse', options);
    if(searchPhrase != "")
      customSearchControl.execute(searchPhrase);
  }, true);
</script>

Save gadget and you're all done.

Interesting detail discovered during coding: In Firefox, Chrome and Opera the customSearchControl is created after the before-</body> script is run. In Internet Explorer customSearchControl was created before the script is run. That's why we need the execute function in both places (script & gadget), so we can run it when customSearchControl is created and we have the search keywords. Both are needed, and we cannot be sure, which is set first.

Now when you use navbar search, in the search results first are google results, and after those are, if any, navbar's own findings. If navbar search did not find anything, the "No posts found" text is removed (this needs the post count hack). In this blog the navbar search happens to work pretty good, but I'll install this hack here anyway for demonstration.

Update January 20th 2012: You might be interested in adding a clear results button to the search results, hack here.
Update March 2012: Commented nine (line 24-32) lines from the source, if you had this installed you might want to do the same. By commenting the lines, the new "Sort by date" link is not hidden.

Workaround for navbar search bug

Navbar search problems have been around since 2009, as known issues blog tells. And still outstanding (as opposed to fixed). This was the first things I noticed when I switched from Wordpress.com to Blogger.

Known issues blog instructs us:

As a workaround, you can use search operators on Google.com to search for content specifically on your blog. For example:

site:yourblog.blogspot.com KEYWORD KEYWORD

OK, maybe good for blog writers, but what about our users... not very user friendly. My first solution to fix the navbar search was to automate that googling. Here's how it can be done.

Navbar search to Google search

Edit your template html. Insert this code either just before </head> or just before </body>.

<script type='text/javascript'>
//<![CDATA[
  var blogUrl=window.location.protocol + "//" + window.location.host + "/";
  var qPos = window.location.href.indexOf('/search?q='); // length 10
  if(window.location.href.indexOf('/search/label/') == -1 && qPos != -1) 
  {
    var urlGoogle = "http://www.google.com/search?q=" + window.location.href.substring(qPos+10) + "+site:" + encodeURIComponent(blogUrl);
    if(confirm("Navbar search is broken. Search with Google?"))
      window.location = urlGoogle;
  }
//]]>
</script>

If you put the code before </head>, the page below won't draw before user is asked to move to google search (the question pops up on white screen). If you put it before </body>, the page loads and then pops up the question, so user can see if the broken search actually found anything. You can test it in both places and choose which ever you like the most.

You can also customize the code to your liking, for example remove the confirm question, if you know how to. Know your way around.

This was my first solution to the broken navbar search, and it works nicely, and is very simple to install. I used this solution for a while, then came up with something completely different... I'll write about my second navbar workaround later on.

In the meanwhile, because search gadget is also broken, you might consider adding a custom Google search to your blog's sidebar: How to add Custom Google Search to your Blogspot blog.

3.10.2011 Navbar search works actually quite well in this blog (surprise, does not work for my other blog), but I installed this hack here for demonstration. I will remove it when I install the second generation navbar search hack and blog about it.
5.10.2011 This hack is removed, installed The ultimate hack for broken Blogger navbar search