How To Reverse The Order In Which Posts Are Listed On Your Blog

Sponsored Links

change order of blog postsA 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.

Their are many reasons a blogger may want to reverse the order of their blog posts, for example if you use your blog for short story's you will want the first chapter to be at the top of the homepage not the latest chapter.Until now in order to reverse the order you needed to play around with the dates which had it's faults mainly the fact that the date for each post would be wrong but i recently came across a blogger hack that can automatically list your entire blog in reverse order with just a little code needed and i will show you how to easily add this code to your blog.

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'


Blogger layout

edit html blogger


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.

InfoRemember 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 ?

Let us know !

Sponsored Links
Copyright 2011. All rights reserved.
artist photos