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:
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.
Posts (Atom)