A very common question i have been asked is on how to change the order that posts are displayed on your blog.Basically all blogs have the format of showing your latest post first and the rest of the posts follow according to the date in which they were published.While this is the default blog standard since the start of web logs some people would like to have their blog posts listed in the opposite direction, so the oldest post is at the top of the homepage and the rest of the posts follow with the latest post last so to speak.
This hack was first posted by David Merriman on The Merriman Family Blog and was a hack he had been trying to find for some time.So if you are in the same position here is how you too can change the order of your blog posts to oldest post first.
How To Reverse The Order Of Your Blog Posts
Step 1. In your dashboard click ‘Layout’ > ‘Edit Html’
Step 2. Find The following piece of code in your blogs html :
(Click CTRL and F for a search bar to find the code – More Info)
</body>
Step 3. Copy the following code and paste it Directly Before / Above </body>
<!– 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 –>
Once you have the code in place save your template.
Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow – when you comment here it helps Your Blogs Google rank !
Once you return to your blog you should see the last post first and the first post last .. Ehh
This is a great trick that i know a lot of people have been looking for so thanks to David for the code.
Were you looking to change the order of your blog posts and if so why ?
Hi there! I DO want to reverse the order of my posts and followed the instructions above but to no avail. I do have basic (and I mean basic!) html experience. I double checked and refreshed but my blog seems to be adamant that it will list my posts in classic “what am I doing NOW” format, not how I started. Any help would definitely be appreciated. This small (and easily remedied by google but anyways ;)) albeit annoying design flaw is doing some serious playing with my OCD! Thank you in advance.
Sincerely.
The Cleaner
ReplyDelete
Ditto the above – doesn’t work for me.
ReplyDelete
thanks for the wonderful help. worked like charm! i text my study notes to my blog so they are stored online and can be reviewed from any computer. the order i send them in, needs to be remain that way to be readable. thanks tons!
ReplyDelete
Didn’t work for me either. Thanks for the thought, though. (Why in God’s name isn’t that simply an option in the design pages? Chronological Order/Reverse Chronoligical Order. I’ve spent the last hour looking for a way to make it happen, and it seems clear there are many, many users who want that feature.)
ReplyDelete
I should have read the comments. I wanted to post teaching materials but the code didn’t work. Doesn’t seem to have done any harm, but hasn’t worked either
ReplyDelete