With regards to blogs using the new template designer layout, and with the help of many Google results and the jQuery API documentation and its comments, I have figured out a way to not only reverse the order of Blogger posts, but reverse multiple posts made on the same day.
Use: I wanted my blog to read more like a journal or diary. Blogs tend to read more like news flashes, where the reader will read the most recent message posts first. So, it was necessary for me to find a way to reverse the order.
Consideration: Although I got this to work on my blog, I cannot guarantee it will work for yours… template layout differences, previous edits, and other potential differences between your blog and mine. You should consider using the below guide in how I did it as more of a guide for things to look at when attempting to implement this on your blog. Not to mention, I’m writing this in April of 2011, so two months, six months, a year or more from now and it may not even be relevant at all.
Note: The way this works is after the page is fully rendered, it will then reorder all the posts, so you may see the last post first, at first, but then they will all flip. Seems to happen within a second with my browser/connection, but obviously this will be more apparent with slower connections.
Example: I did this for my Adventures Through Rift blog
In any case, here’s what I did:
You must first include a reference to the jQuery library. You may want to upload the library to your own host, or find a reliable host which provides external references to it. Bear in mind that if you use an external reference, and they upgrade, so will your reference to it, potentially breaking your script. In addition, if they rename or remove the library, your script will most definitely break. So the preferential method for referencing any library is by hosting your own. This way, you have control over upgrades and such.
When editing your blog on blogger.com, go to the Design tab, and click the “Edit HTML” link. In the Edit Template box, then check the box labeled, “”Expand Widget Templates” (this was important for me ’cause after I got my code working, I couldn’t find it… which is when I figured out I had that checkbox checked).
I placed my reference to the jQuery library as the first line under the <head> tag.
<script src=’http://yourdomain.com/jquery-1.5.2.min.js’ type=’text/javascript’/>
Once that’s in place, you can enter the code below. See if you can find a JavaScript block of code within your template. I did a search for “<script type=’text/javascript’>” (or something similar). If you can’t find a JavaScript block, the block I was able to use was under:
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’>
<b:includable id=’nextprev’>
<script type=’text/javascript’>
</script>
Within that JavaScript block, paste the following code, and do a “Preview” (you may not want to save the template as if this doesn’t work, then an oops may be in order.)
$(document).ready(function() {
divP = $(‘div.date-outer’).parent();
divP.children().each( function(i,divC) {
divQ = $(this).children(‘div.date-posts’);
divQ.children(‘div.post-outer’).each( function(i,divR) { divQ.prepend(divR); });
divP.prepend(divC);
});
});
Again, other templates may not use the same references to the DOM and CSS classes as mine does. I currently use the Awesome Inc. template. I also set the number of posts per page to 500 (Settings->Formatting).
I hope this helps someone else in reversing their blog posts. I’m also hoping to do this to my Adventures Through World of Warcraft blog as well, but it’s still using the old template format, so will need to upgrade it first.
—
Keith D Commiskey
https://keithdc.com
Keith D Commiskey
https://keithdc.com
Great workaround, and EXACTLY what I'd like to do with my blog, but unfortunately, I have no idea what you're talking about when it come to "jquery" etc. and suspect that's why I can't get it to work…. do you think you could give a little more explanation on this part of it?
jQuery is a JavaScript library you can download and use on your own site (or you can reference it remotely). With what I recommended, you don't need to know jQuery, you just need to download and reference it in the code within your blog.
jQuery can be downloaded from:
http://jquery.com/
Or, if you don't have anywhere you can save the jQuery.js file (that is, you don't have a web host), you can also use a line of code to load it directly from a public source, like Google, or jQuery directly.
Linking Directly to jQuery from jQuery – just replace my line with [src='http://yourdomain.com/jquery-1.5.2.min.js'%5D with [src='http://code.jquery.com/jquery-1.7.1.min.js'%5D
Or, here's Google documentation for linking to it from them:
http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery