Saturday, February 14, 2009

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

72 comments:

keviN said...

wow... i'm speechless.
quit knowing things about computers. haha.

tsouXtra said...

what do u mean? i don't see anything changed in your example! the order is still reverse (normal for blogspot, but reverse chronologically speaking).

David Merriman said...

I don't have it applied on this blog. You can see it in action here: http://reversepostorder.blogspot.com

tsouXtra said...

i just emailed you a screenshot of the other blog... :)

CrazyChicMagnet said...

Worked like a charm, thank you!

Anja said...

Thank you so much - this was excactly what I was looking for :)

`Foolishly`In`Love` said...

that was great! thanks.

mvag said...

So wonderful. Thank you for posting this!

Al said...

Many thanks! I've never understood why blogger.com hasn't realized that top to bottom reading is a good thing.

I pasted the code in and it worked perfectly!

Anja said...

For me it works on mozilla, but not on internet explorer.

Anything I do wrong?

Maybe there is a newer code version...?

Cheers :-)

Kristen (GamerWoman3D) said...

So far, I am loving it. I've only just started with Blogger, but I have some storytelling to do! My only concern with it is that for a person with a slow connection, it sticks in reverse-chronological order for a split second before going into chronological order. But a split second is just enough time to catch a spoiler!

However, I do appreciate this. Thank you.

P.S. I started a blog where more than one story will be going on at once. If you've any recommendation on how to sorta organize them so that they are split into their own sort of novels (without building a new site for each story...) I am ALL ears.

Thank you again!
~gamerwoman3d
angelwing3d.blogspot.com

David Merriman said...

Kristen,

For now, we're kind of stuck with the delay, because what this code is doing is waiting for your page to load, then rearranging it on the fly. It's the best solution I have until Google gives me a way to reverse the order before the page loads.

As for keeping separate stories, I think the best solution is to make use of Blogger's labels. There's a tutorial on them here: http://help.blogger.com/bin/answer.py?hl=en&answer=44498 I suggest using one label for each story. As long as you have the Labels gadget on your page, your users can click on the story they want there, and get only the posts that correspond to that story.

Hope that helps! Good luck!

fED said...

GREAT JOB!Thanx for sharing.Such a confusing little code (I hate using siblings in DOM) for such a common problem.I wish I had thought of that one...

  said...

Works fine! Thank you!!

Buckles and Buffs said...

I was very happy to find this page as the only other solution I could find was to change the post dates which would completely ruin the blogging experience for me. However I can't get the code to work. I put it in before the /BODY tag at the end of the html box but didn't see any effect when I saved the changes and viewed my blog. I also use Internet Explorer - could this be the same problem that Anja had?

S-ta said...

I am using Google Chrome and I just followed step-by-step, it's still not working. I am not using those default blogspot's templates; instead, I downloaded teh template and inserted that into my blog. Is that the reason why?

Thanks,
Esther

Didier Kervegan said...
This comment has been removed by the author.
Kat said...

Fantastic! Thank you so much!

Mike said...

Hi, How did you learn to do this coding? I'm intrigued as I write in html as a hobby. Anyway, I couldn't get it to work just as I wanted, so that my whole story, archives & all, would flow correctly but if it worked for others, bravo=)
Please see my blog to give me some insight on reversing it if you would.
Thanks
Cap'nMike

Glen and Vanessa Waller said...

Thanks for posting this...this is exactly what we needed. Thanks for sharing your solution.

Doriana Chase said...

This did not work for me. I can't figure out why Blogger doesn't let us do this on our own.

John said...

This isn't working for me either -- I've tried it several times and it just doesn't reverse the order of the archive OR the posting order. :( Maybe blogger plugged the hole and it no longer works?

Team Wellness Community said...

THANK YOU!!!

Jenzobean said...

Worked a treat in firefox, brilliant, thank-you. Doesn't seem to work in IES though? Is there anything else I can do to remedy this?
Thanks a lot.
J

David Merriman said...

Thanks for all the comments. I'm glad this is helping.

A lot of you have had problems with this in Internet Explorer. That is a known issue, and should have a simple fix, but since I never code for IE I don't know it off the top of my head. I think the issue is the getElementById() call at the beginning, but I'm not sure. If anyone knows about the peculiarities of DOM in IE, feel free to enlighten us. :)

From Jeff said...

I just wanted to say thanks for the code. I was very frustrated by the absence of that tool.. much appreciated.

Entertain This said...

AWESOME Hack!!! Where have you been my whole (Blogger) life? THANK YOU, THANK YOU, THANK YOU!!!

Sally said...

Thanks, this was exactly what I was looking for! It worked like a charm on one of my blogs that was only one year of entries with a few entries, but not on my other one that spanned 2007-2009 with multiple entries every month. Once I pasted the code in, it started in February of 2009, which is weird because there are entries in January 2009. And entries in 2007 and 2008. Weird, huh? But it did work for my other blog, so thank you!

ThePacster said...

Just thought I would drop in and say thank you very much. I was looking all over as well, and this is exactly what I needed.

George Wootton said...

Thanks! It seems to have worked perfectly!

Ila R. Asplund said...

THANKS FOR YOUR HELP

Lynn and Nick Booth said...

I tried this and it happily reversed about the last half of the blog but left out the older posts. Is there anything I can do about that.
This is the blog of our trip, which is now complete. When I use your script it puts everything from Tuscany the Beautiful onwards in order.

lynnnnick.blogspot.com

Amy Jean said...

Amazing! It worked! Thank you so much! I am new to this and I was afraid I'd be be discouraged right out of the gate because I wanted my blog to display in chronological order. Thanks to the Merriman Family, I can forge ahead!

Lynn and Nick Booth said...

Hi
tried the code on an older blog and it worked perfectly but on the latest holiday blog it divides the blog into three parts and puts each of those in order (but all together starts in the middle) and does not reorder the directory at the side of the blog. Most odd. Any ideas why?
Lynn

Scoolman said...

Fantastic. This just what i needed.

PLONK said...

I have 47 posts in my blog. This code only works if I choose to display 47 posts per page. But if I decide to divide that number and opt to publish, let's say, 10 posts per page for example, than my initial page will show posts 37-47 as oppose to show the initial posts 1-10.

Any idea why this is going on?

amottc said...

Thank you for this code. It works for me!

I'm setting my blog so it makes sense as a narrative, and your code is what I needed to do it.

David Merriman said...

@PLONK:

This code is only able to manipulate posts that are on the page. The selection of which posts appear on the page is something that the Blogger API controls. I suspect there may be a way to modify the template code and do reverse order that way, but I don't know how. I tried that first, actually, and had to settle for this method. It's less than ideal, but it's better than nothing.

My advice to you about cutting posts into sections (1-10, 11-20, etc) is to do it with labels or the Archive widget, rather than limiting the number of posts per page. You won't see the strange ordering that way.

Lynn and Nick Booth said...

Hey, I altered the number of entries per page and applied your magic formula and it all worked this time. Many thanks. My holiday is now in order.
Lynn

Bruce Spitzer said...

Can't say as I agree with your politics nor your graphic design sense, but your template hack to change the chronological order worked perfectly.

Thanks!

Jenna the Moose Nanny said...

For over a year your amazing code has worked to put my entries in chronological order, but starting last week, now my blog displays a random post from the middle as its first entry. I re-copied and pasted your code, and it is still no longer working. Do you have any idea why? This happened on both of my blogspot blogs :( Is it just me, or have other peoples' stopped working too?

Lynn and Nick Booth said...

Mine has done the same, both blogs.

helot said...

I don't see any change at all with this code. I found another site but I am not able to get that to work either.

http://adivina.blogspot.com/2006/03/blogger-tip-cambiar-el-orden-de-los.html

WonderWomanMom said...

I'm using firefox but I can't get this to work. HTML coding is all correct by your instructions, but still not working for me!

http://wonderwoman-mom.blogspot.com/

Scoolman said...

I have run into problems with the order as well. I recently downloaded the latest update of Firefox and lost my chronological order. I tried to re-paste the code, but nothing.
Any Ideas?

Peter said...

I tested it at Health Fitness Nutrition but didn't work. Where did I go wrong?

Peter @ Enviroman said...

I checked your demonstration blog Reverse post order with Firefox and found the newest post February 7 at the top while the oldest post February 1 is at the bottom.

Could something have changed to make your hack no longer working?

Beben said...

what is this...ugh!!
i am not understand :-s

jimmyparky said...

I think this only works for the posts on one page. Therefore, if you want to rearrange posts on all the pages you're out of luck.

Lynn and Nick Booth said...

jimmyparky
it did work just fine, then it stopped working. I don't know why, whether it was a change to Blogger or what. However, despite repeated comments here about it no longer working, David has not indicated whether he has read these comments nor whether he has any idea what we can do. As it was a free service to begin with I would hate to demand anything of him but it would be nice to know if he has even seen the comments.
So David, any idea what is going on?
Lynn

Merliny said...

I think the reason why the code is not working an longer is the Auto Pagination Blogger rolled out in February 2010.

http://buzz.blogger.com/2010/02/auto-pagination-on-blogger.html

Lynn and Nick Booth said...

You may well be correct but I don't think David is monitoring this post any more as we are getting no comments from him.

David Merriman said...

I am aware that something is going on. Due to my own job and my wife's nursing school, I don't have time to look into it and fix it. If anyone knows anything about DOM, it should be fairly simple for them to look into this and post a fix. Heck, if someone could get into the Google API and write a whole new post widget, that would be even better. I would love to do both. But I can't right now. Good luck!

JenTheRN said...

ok, it worked. But my blog displays my newest post at the top to the oldest post at the bottom of the page. How do I reverse this?


Thanks,

Jen

Wieczna Podr├│┼╝niczka said...

Hi!

I used this code. Everything seems fine, but I dont know why it shows posts not from beginning but like 9 on the main page and previous ones ar enot available, I am wondering maybe this particular post is wrong or soething not ok with it hmmm...

innocent1 said...

This is not working for me.....I'm using Firefox and the latest templates, maybe it only works with some templates.

If someone figures out a way to make it work all the time, I'd like to know about it!

Andrew Lark said...

This also isn't working for me. If anyone knows of a solution or alternative, please let me know. I'm surprised such a basic feature is beyond the Blogger team, given the number of people interested in creating a chronological blog. I might have to host my own blog...

Sara said...

You poor guy! I hope everyone will cut you some slack for not correcting all of our blogger problems in your spare time. Thanks for posting it at all. If I come up with something I'll send it your way.

Asad Manzoor said...

it soes not apply on my blog u can see it here
http://alldownloadfree-mania.blogspot.com

Shaiksoft said...

I tried in Firefox&Chrome,perfectly working.

But not working in IE8.

Any fixes?

Adam said...

This is an elegant solution! Or was, since apparently it no longer works in IE.

I don't use IE, but most of my readers do, and I have to respect their needs.

I hope therefore that David will not mind if I post a link to a less-elegant workaround that seems to work in all browsers. It's here:

http://too-clever-by-half.blogspot.com/2010/05/first-blog-post-order.html

Eric Kamander said...

I tried this, not thinking it would work because of the pagination, but I had a special usecase for it and it worked (not on IE of course though). I wrapped the 'post reversal code' in this if





You can preview it here:
http://blog.mmaratings.net/search/label/Upcoming

Eric Kamander said...

IF:

b:if cond='data:blog.url == "YOUR URL HERE"'

Tony said...

Brilliant! Works fine in Chrome 10 and Firefox 4 on Ubuntu (lucid) NBR Linux.

In the ideal world no one should use Internet Exploder, being on virtually all MS Windows computers IE is a huge target for the virus and malware writers to attack. Get smart and download and install both Chrome and Firefox, you can then copy your bookmarks/favourites to the new browser.

Sergio Urra said...

In an ideal world, Blogger coders should implement the "Newer/Older first" option.

Nowaday, the reversal script didn't work for me (mo matter the browser)

@Tony the brilliant: "Get smart" and "Don´t be stupid" are saying exactly the same thing. But the first one uses a hypocritical style.

Eric Kamander said...

I still have it working at http://upcoming.mmaratings.net/ with a conditional statement for just that label/page, and what's more not only does it work in Chrome and Firefox, but it works in IE 9 as well. So don;t give up too easy. It is working.

MS-potilas said...

I modified this script to work with newer Blogger templates and with Internet Explorer, too.

See How to show Blogger posts in chronological order.

(my blog is mostly in Finnish, but this post is in English)

Eric Kamander said...

MS-potilas, I couldn't get it to work with your script for posts matching a specific label.

Did you get it to work with all versions if IE?

Please see how I have it working at Upcoming Events on MMA Ratings

MS-potilas said...

@Eric Kamander:

I think you have old style template, that's why you had Merriman's hack still working (except on IE) while many others did not. I'm not familiar with old templates, I just started on Blogger this month. :)

But if you want to make your script work on IE, you should add functions getNextSibling and getFirstChild, as in my source. Then replace references to firstChild, nextSibling and childNodes[1] with calls to functions getNextSibling and getFirstChild (same way I changed them). But don't change references of "date-header" to "date-outer", because you have old tempale. If you do so, script won't work on any browser. You should change/add nothing more to your script.

MS-potilas said...

I rewrote the script, here: Blogger posts in chronological order, 2011 version. It works with new templates and all major browsers including IE, and may work on older templates, too.

Inner Vessel said...

Unfortunately none of these solutions work for me. I'll keep looking.

David Merriman said...

I haven't been on here in a while, but it seems like people are still finding this when trying to order posts chronologically.

I appreciate all the work people have done to update my solution for other browsers and newer templates. You guys rock!

One issue that may be affecting even these newer scripts is a fundamental change Blogger made a while back, to keep page loads fast. Rather than loading a whole month if you click on a month, or a whole year if you click on a year, or a whole label if you click on a label, etc., they only load the N most recent posts for the given criteria, where N is the number of posts needed to cross a certain data threshold. That all happens on the server side, which means that by the time our JavaScript gets a shot at it, the older posts are already filtered out. We can re-sort the ones we get, but usually that produces a result that isn't what we wanted.

A lot of people have complained about this, and even filed bug reports on it to Google, but so far the answer has been basically this: "We're not going to change it, because you're trying to use Blogger to create a website, rather than a blog, and we prefer to keep the feature set limited to blogs." It's frustrating, but looking at it from their perspective, it makes sense.

If you want more manual control over your content and the order in which it appears, it looks like the best bet (from Google) is Google Sites.