Blogger posts in chronological order, 2011 version

Many bloggers and readers would like to have the option to read the blog, or part of the blog, in chronological order. In Wordpress this is possible and I used it in my blogs, but unfortunately, Blogger does not support this. So we need a hack.

This hack is based on David Merrimans hack, thanks to David for that. But that hack did not work in Internet Explorer, and no longer worked on other browsers either. I first fixed the script for my MS-potilas blog, where I wrote an article about that hack. Now I have rewritten the code, so this is a completely new and better version. It works on new templates (at least on Simple, september 2011) and possibly on old ones, too.

What the script does

The script is placed before </body> tag, so it executes just after the page elements have been constructed. We dig into the DOM model of the page, find the posts, and reverse the viewing order of the posts on that page.

We can make the script reverse the posts on different conditions. For example, I reverse posts when the url contains argument order=ASC (like it worked in Wordpress). I also include the script only for index-type pages (including front page and label searches) using widget tags, so posts and other pages won't have this script.

My script also modifies the previous/next posts links at bottom of the page, adding argument order=ASC there, so user can browse through all the posts, from first to the latest.

Posts in chronological order hack script

Edit your template's html. Find </body> tag, and insert before that this code:

Data provided by Pastebin.com - Download Raw

Now, if you view your blog, nothing is changed. But, if you add #order=ASC to the url of your blog, like http://yourblog.blogspot.com/#order=ASC (you must reload page, F5), the posts on the page should be reversed. If not, something went wrong and you probably should also read this.

How to use it - building the link's url

The code version checks, if url contains order=ASC, so we need a link with order=ASC in it. You probably want this link to go to page with your first page. Link's url looks like, for example (in MS-potilas blog), this: http://mspotilas.blogspot.com/search?updated-max=2011-02-14T08%3A08%3A00%2B02%3A00&max-results=7. We add #order=ASC there (& instead of ? because there are arguments already), and the resulting url is http://mspotilas.blogspot.com/search?updated-max=2011-02-14T08%3A08%3A00%2B02%3A00&max-results=7#order=ASC.

You need to modify the red and green parts and possibly the blue parts of the url to get your first post displayed. First change your blog url, that's easy. Then there is updated-max parameter, which contains the date of the first post not shown anymore on the first posts' page + your time zone. And then the number of posts per page, from your blog's settings.

Let's assume you have 7 posts per page. Go to Edit posts, find the 8th oldest post you've written to your blog, and get it's publishing date and time, say for example 2010/06/30 5:14 pm. And your time zone is PST (Pacific time, GMT-7). Here is your url parameters: ?updated-max=2010-06-30T17%3A14%3A00%2D07%3A00&max-results=7#order=ASC

And explained: 5:14 pm must be changed to 24 hour clock, that becomes 17:14. Time zone must be changed to GMT +- #. Plus sign (+) in the time zone encodes to %2B and minus sign (-) encodes to %2D, so the time zone part is %2D07. First two blue 00:s are the seconds of post timestamp. Last two blue 00:s are minutes of timezone, usually 0, but if not, you need to change them.

Test your url. If result goes off by one post, try incrementing/decrementing the minutes value in the url by 1. Test the next/previous posts links at bottom of the page, too.

Gadget for the link

In my MS-potilas blog, I added the link to the right sidebar using HTML/Javascript gadget. Go to Page elements and add HTML/Javascript gadget where you want it. Contents of this widget (you need to change the red part for your blog, see previous chapter, to get to the page with your first post) are:

<script type="text/javascript">if(window.location.href.indexOf('order=ASC') == -1) document.write('<a href="/search?updated-max=2011-02-14T08%3A08%3A00%2B02%3A00&max-results=7#order=ASC" title="Show all articles in chronological order"><b>Articles in chronological order</b></a>');</script>

Link is shown only, if posts are not already shown in chronological order (the if clause). You can change this, if you want. And of course use your own blog's url, and the link text to your liking. If you're completely lost, read know your way around.

Several posts on same day?

Blogger groups all posts with same date to a group, which in the DOM model looks like one big post. The above script cannot reverse order of the posts inside the group. But if you have posts in your blog with same date, the fix is simple, just install my Show date on all Blogger posts within same date hack, and the posts in same day can now be shown in chronological order.

Option: use script on specific url (label, for example)

Because I wanted to give the reader (and me) the option to read posts in chronological order, while preserving the default view's order, I made the script run with the url paramerer order=ASC and gave user the link. Depending on your needs, you may want to run the script on other conditions. For example, when showing posts with a specific label.

In the code before </body> change <b:if cond='data:blog.pageType == &quot;index&quot;'> to <b:if cond='data:blog.url == &quot;http://yourblog.blogspot.com/search/label/yourlabel&quot;'>. Then replace if(window.location.href.indexOf('order=ASC') > -1) { with only {. You can also use other urls between the &quot;'s.

Tested on

Firefox, Opera (on Linux)
Chrome (on Linux and Windows Vista)
Internet Explorer 8 (on Windows Vista)

I will install this hack on this blog, too, so you can see it working and inspect the source codes.

Update Oct 16th 2011: I made another chronological post hack which uses blog feed, you might want to check that out, too.