Change order of Blogger Posts

Adapted from: http://www.inventric.com/blog/2004/12/change-order-of-blogger-posts.html

There are a lot of complaints from Blogger users that they can't reverse the order of their posts from latest to earliest. They are stuck with seeing their new posts at the top of their list. In TypePad users have this ability, so it would be great if you can do it in Blogger. With a little Javascript DHTML mojo, we can! The steps aren't difficult at all. I'll show how here, and also check out the demo and source code behind it at http://natestest.blogspot.com/2004_12_01_natestest_archive.html to see it working in real life. If you find any mistakes, please let me know so I can keep this up to date.


It is important to understand what is being reversed. This is a client side sort of the blog posts that are already on the page. The script that I am giving sorts the "date groups" of posts as well as the posts inside the date group. You could theoretically use this type of thing to allow viewers to dynamically sort the page when they hit a sort button. Here, I just show how to add a default sort to your page.


First, we need a "container" element around all the stuff that can be sorted. Some templates already have one, but since its not there all the time, I recommend another one. Since the stuff in between the blogger tags is what is repeated, and we want this stuff sorted in a different order, we put a "div" tag around the "Blogger" tags. Like this:


<div id="sortable">
<Blogger>
.
.
.
</Blogger>
</div> <!--End sortable—>


Second, put a container around each post (the stuff in between the Blogger tags), by adding another div like this:


<Blogger>
<div id="postGroup<$BlogItemNumber$>">
.
.
.
</div> <!--End postGroup-->
</Blogger>


Thrid, posts are grouped by date. We need to alter the date header slightly to help us find it later. So we add an id based on the date value that comes back.


<BlogDateHeader>
<h2 class="date-header" id="dateHeader<$BlogItemNumber$>"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>


Almost done. Just put this script underneath the sortable content and it will do the sorting for you:

http://www.inventric.com/scripts/SortScript.js

Note: If you have tweaked the main display tags much inside the <Blogger> tags, you may have to make some changes, but hopefully I've given you a start.

0 Response to "Change order of Blogger Posts"