The other navigation drawback of Blogger (apart from the lack of categories) is the absence of next/prev post buttons. Freshblog has seen an ingenious earlier solution via ecmanaut, though it apparently requires daily archiving plus a complete re-publish each time. I've gone for the Pareto 80/20 rule: 80% as good, for 20% of the effort.

This hack requires the publisher to link to a small (3K) JavaScript file and put a whole lot of code into their template. If you've got a standard blog, it takes about 5 minutes. Once done, you get next/prev links (or buttons) next to each item (posts and comments) on your main, archive and post pages. This means readers can simply jump up and down the page from post to post, and between pages when they "fall off" the top or bottom of the page. For a demo, check out Vent or Speccy.

Prequisites: This blog hack makes certain assumptions about your blog. I think these will be met by the majority of blogs, but still, you should check. Firstly, it assumes that you have anchors defined for each post item (where the NAME is the <$BlogItemNumber$>). It also assumes that each comment has an anchor too (where the NAME is c<$BlogCommentNumber$> ie using a leading c). Further, it requires knowledge of your archive (set of URLs pointing to your archive pages). At the moment, it works with the FreshTags archive, drop-down menu archives and normal list archives. If your blog is like 99% of blogs and in reverse chronological order ("latest post first"), then your archive should be in chronological order ("earliest first"). This is usually the case, unless you've applied the reverse archive hack. (In which case, reverse it after this script has run.)

Implementation: Simply visit the setup page, enter your blog details and paste the code into the designated parts of your template. Once it's working, you can tidy it up and customise it to your blog. You can use the function provided - jumpNav(postID, direction) - to set buttons or links to jump anchors ('up', 'down'), within the page ('top', 'bottom') or between archives ('earlier', 'later'), for whatever makes sense for your blog.

Troubleshooting: If you're having problems, try using the "development" version of the script to aid with troubleshooting. (This is also the "human readable" code.) Find where the external script calls "/blog-nav/blog-nav.js" in the header and replace that part with this URL.

Advanced Usage: I've been playing around with some "fixed" buttons on my blog to let readers scroll up and down from any element. I'm not sure if I like it, but FWIW you can replicate it by putting this in your header:

<style>
div.fixed { position: fixed; }
</style>

<!--[if lte IE 6]>
<style type="text/css">
html, body
{ height: 100%; overflow: auto; }
div.fixed { position: absolute; }
</style>

and this in your body section:

<div class="fixed" style="top: 50px; right: 20px;">
<input type="button" value="&and;" onClick="jumpNav(window.location.hash, 'up');"><br/><br/>
<input type="button" value="&or;" onClick="jumpNav(window.location.hash, 'down');"></div>

Thanks to Brett Merkey for the "faking position: fixed; in Internet Explorer" hack.

As usual, please direct your questions, suggestions and other feedback (including working code!) to the comments below. Also, if you've got it working and looking good, please post a pointer in the comments too!

Filed in: freshtags, blogtech, blogger-hacks, how-to