Blogger Hacking - Chronological Order

So, for the last 10 years, I have kept a journal. Except for the 2 years I was on my mission, I have always done it with a computer. Actually, I even did it with a computer for the 8 months I was in the mission office, to tell the truth... At first I used Wordperfect, but that got really long, and long files are a pain in the butt to open. Then I converted it to HTML files, and I would hand-edit an index I made.

Then I started learning about PHP and MySQL, and I fired up my own webserver and made what was basically a blog program. It was nothing compared to Blogger, but it kept all my journal entries all nice and neat, let me add them, search them, read them in chronological order, and jump around by date. It was wonderful, but not very easy to customize the layout, and I could only get at it from my home computer.

Blogger solved all of these problems for me - EXCEPT the chronological order part. Blogger posts things in reverse chronological order. And you can reverse the order of the archive, but not the actual posts. I searched all over the Internet for a widget or gadget or straight up template hack that would post them in the order I wanted, but I couldn't find anything except for "Just change the dates!" Yeah, that doesn't work very well for a journal, where dates matter. So, I made my own, and I'm writing about it here so that hopefully all the other frustrated people can benefit.

It turned out to be pretty simple. Go to your blog's Layout tab and click Edit HTML. Scroll all the way to the bottom, and find where it says </body>. Now, just before that, paste this code:

<!-- Start post reversal code -->
<script type='text/javascript'>
  var Blog1 = document.getElementById('Blog1');
  var postContainer = Blog1.childNodes[1];
  var first = postContainer.firstChild;
  var child = first.nextSibling;
  var childNext = null;
  var classes = '';

  var dateHeaders = false;
  while (child != null) {
    if (child.className == 'date-header') {
      dateHeaders = true;
      break;
    }
    child = child.nextSibling;
  }

  child = first.nextSibling;

  while (child != null) {
    if (child.className != null) {
      if (child.className.match('date-header') != null) {
        childNext = child.nextSibling;
        postContainer.insertBefore(child, first);
        first = child;
        child = childNext;
      } else if (child.className.match('post hentry') != null) {
        childNext = child.nextSibling;
        if (!dateHeaders) {
          postContainer.insertBefore(child, first);
          first = child;
        } else {
          postContainer.insertBefore(child, first.nextSibling);
        }
        child = childNext;
      } else {
        child = child.nextSibling;
      }
    } else {
      child = child.nextSibling;
    }
  }
</script>
<!-- End post reversal code -->

And that should do it! I'd love to get feedback from anyone who uses this; feel free to leave it in the comments section.  You can see it in action here: http://reversepostorder.blogspot.com