Change order of Blogger Posts
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.
13 Comments:
Hey man, maybe I am missing something but this step has got me hung up?
"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."
Where exactly am I putting the code you have that follows?
Thanks a lot, all the help is appreciated.
Sure thing. So in the original template the code was already this (brackets removed so Blogger allows this comment):
BlogDateHeader
h2 class="date-header"$BlogDateHeaderDate$/h2
BlogDateHeader
Since we need to identify each of the date-headers individually I changed the code to this:
BlogDateHeader
h2 class="date-header" id="dateHeader<$BlogItemNumber$"$BlogDateHeaderDate$/h2
BlogDateHeader
So all I added to the orginal was that id="dateHeader<$BlogItemNumber$>" part.
Hopefully that helps. Be forwarned though, I have had someone send me a couple emails before that this setup isn't working for them. He wasn't able to figure it out, but the number and content of his posts were greater than my small bunch of test posts. Hope this works for you or gets you started.
Thanks a lot, your trick solved the problem i had since my blogger registration!
This is my website : www.sacados.org
This is a nice tool. I sometimes put a intro post inside the template. (above the Blogger tag). That's not always as useful but it could be useful for bloggers who cant get your code to work. :)
you're a genius!! had so much hassle trying to do what you did. congrats and thanks...
Hey thanks for making this available to everyone.
I'm having a hard time getting this to work. I'm guessing it's the last step. When you say to put the script below the sortable content, does that mean to copy the text of the script and put it there? or do you mean copy the url and paste it there? or something else?
Also, just to clarify, where exactly do I paste this script - after the "End sortable" part?
Thanks for any help in getting this to work
Hi, even though I did not get this to work quite right I thank you for putting the info out there.
My problem was that when I inserted the script before the /blogger tag, only one of my posts came up.
When I place the script after the /blogger tag it worked! BUT, I had some posts that duplicated and some that didn't(maybe because there are more than one person posting on my blog?).
Ok, thanks anyway!
Hello friend,
Unfortunately, I just can't get this working. It would make my world much better if I could.
I'm using this particular blog as an upcoming concert calendar.
With that in mind, it would be even nicer to a) get his to work and b) configure it so that "past dates" don't appear at all.
Any help would be great!
I'll attempt to post my template in another comment.
This is exactly how I want the layout to look ... but in reverse order.
(blogger)(span style="color: #1e90ff;")(b)(blogdateheader)($blogdateheaderdate$)(/blogdateheader) - ($blogitemtitle$)(/b)(/span)(br)($blogitembody$)(br)(br)(/blogger)
It would be even better if I could get past dates (days which are no longer current or upcoming) not to appear at all. However, looking a gift horse in the mouth is really dangerous ... especially when it's a thoroughbred.
p.s. Have you ever considered developing a php "reverse order" conversion generator?
Let's try that again with line breaks in the code so that you can actually SEE it ...
(blogger)
(span style="color: #1e90ff;")
(b)
(blogdateheader)
($blogdateheaderdate$)
(/blogdateheader)
- ($blogitemtitle$)
(/b)
(/span)
(br)
($blogitembody$)
(br)
(br)
(/blogger)
Easy to read, easy to implement. Used it on my archive pages with the expandable post... :D
Hi and thanks for the help.
Screwed it up the first time but the second time took each change step by step & tested.
Very cool :)
see the result at
http://mepisjourney.blogspot.com/
Just so you can see what works here are some snips of my template:
---snip
/\!-- Begin #main --\/
/\div id="main"\//\div id="main2"\/
/\div id="sortable"\/
/\Blogger\/
/\div id="postGroup/\$BlogItemNumber$\/"\/
/\BlogDateHeader\/
/\h2 class="date-header" id="dateHeader/\$BlogItemNumber$\/"\//\$BlogDateHeaderDate$\//\/h2\/
/\/BlogDateHeader\/
/\!-- Begin .post --\/
---endsnip
---snip2
/\/ItemPage\/
/\!-- End #comments --\/
/\/div\/ /\!--End postGroup--\/
/\/Blogger\/
/\/div\/ /\!--End sortable--\/
/\script\/
var postGroupsReversed = new Array(/\Blogger\/"postGroup/\$BlogItemNumber$\/", /\/Blogger\/ "");
---endsnip2
Replaced grater and less with /\ and \/ so I could post :)
Post a Comment
<< Home