How do I change the order of my archive links?

Note: This article is for classic templates. If your blog is using Layouts, this feature is supported as an option by the archive page element. (Select the "flat list" option and uncheck "show oldest posts first.")

By default, the archive links code lists your archives with the oldest ones at the top and the newest at the bottom. It's possible to reverse this, though, with a bit of Javascript. Here's what it would look like:

BeforeAfter
December 2003
January 2004
February 2004
February 2004
January 2004
December 2003


To do this on your blog, you'll just replace the default archive code with the following:

<ul class="archive-list">
<script type="text/javascript">

var archives = new Array();

<BloggerArchives>
archives[archives.length] = new Array('<$BlogArchiveURL$>', '<$BlogArchiveName$>');
</BloggerArchives>

for (var i=archives.length-1;i>=0;i--)
{
document.write('<li><a href=\"' + archives[i][0] + '\">' + archives[i][1] + '</a></li>');
}

</script>
</ul>

What's happening here is that the <BloggerArchives> tags are cycling through all the archive links as usual, but rather than just printing them out, we're storing them in a Javascript array. Then, using the for loop, we cycle through them all backwards, and this time we go ahead and print them out, in their new order. You can copy this code directly into your template, without having to make any modifications.

Notes:

  • This code prints out the links as an unordered list. If you want to use a different format, simply replace the <ul> and <li> tags with the appropriate HTML for your design.
  • If you're worried about people who don't have Javascript enabled on their browsers, you can keep the original archive code in your template as well. Just put it inside <noscript> tags, so that it only appears in browsers without Javascript. Like this:
    <noscript><BloggerArchives>
      <a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>
    </BloggerArchives></noscript>