Thursday, October 6, 2011


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;
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 - 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);
    if(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:
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="" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'fi', style : google.loader.themes.MINIMALIST});
  google.setOnLoadCallback(function() {
    customSearchControl = new'014531972749200972566:g5b3gu6awfk');
    var options = new;
    customSearchControl.draw('cse', options);
    if(searchPhrase != "")
  }, true);
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.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text


Blackbirdtj said... [reply]

Very nice post. I cannot find the navbar after installing a new template. Can you help?

MS-potilas said... [reply]

@Blackbirdtj Some templates have hidden the navbar. I'm not sure if it will help, but you could try removing this line from your template (edit template html):

#navbar-iframe { display:block }

Post a Comment

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