Creating an automatic archive page in Blogger

I was looking for a way to add an archive page in blogger. Specifically I had in mind adding the Blog Archive gadget to a page. From the google searches I did I found this article from bloggerbuster on Creating an Archives Page in Blogger. It's a good post, and the archive page looks good (better than the Blog Archive gadget), but on the downside it needs to be maintained manually. I was looking for something which updated with new posts automatically.

I eventually found a clever hack posted by Yoboy on this thread in the Blogger help forum in response to the question How do I put my archive on it's own page? I found this easy to implement, as you can see on my Archive page linked in the tab bar above. I thought I'd take a stab at summarizing the steps here, mostly so that next time I change my template, I'll remember how to implement this. Hopefully other people find this approach to adding a dedicated archive page to their Blog easy to follow too.

Here's the steps at a high level

1. Add an empty Archive page to your blog
2. Add the Blog Archive widget just below the Blog Posts widget
3. Modify your template so that the Blog Archive widget is only shown on the Archive page

Add an empty Archive page to your blog

This is as easy as going to Pages in the dashboard and adding a new Blank Page. Name it something like Archive and arrange it with your other pages. Make sure your list of pages is shown somewhere. Remember to click Save arrangement. Now view your blog and go to the new page. It should be empty. Copy the URL from your browser. For me this is http://www.gadgetsappshacks.com/p/archive.html

Add the Blog Archive widget just below the Blog Posts widget

Visit the Layout and click Add Gadget (doesn't matter which one). Scroll down and pick the Blog Archive widget. You can only have one, so if you've already got the Blog Archive widget in a sidebar, you'll have to decide whether you want to keep it there. If you do, then this hack won't work. In my case I wanted this on a dedicated archive page. Once you've added the widget, drag it over onto the Blog Posts widget. It should drop in just below it.

So far everything has been easy. You've added a blank Archive page, and you've added the Blog Archive widget in a way that it appears on every page and post on your Blog just below the Blog Post. Before you move onto the next step, make sure you have the Blog Archive widget configured the way you want. After you make the following change to your template, it will no longer be visible in the Layout.

Modify your template so that the Blog Archive widget is only shown on the Archive page

From the Template in your Dashboard, click Edit HTML. Make a copy of your existing template in case something goes wrong. Now search for </b:skin> in the HTML. Add a line after that tag, and add the following content

<b:if cond='data:blog.url == "http://www.gadgetsappshacks.com/p/archive.html"'>
<style>
#Blog1{
display:none;
}
</style>
</b:if>

<b:if cond='data:blog.url != "http://www.gadgetsappshacks.com/p/archive.html"'>
<style>
#BlogArchive1{
display:none;
}
</style>
</b:if>

Basically this says - if the page being viewed is the archive page, then hide the Blog Post widget. If the page being viewed is not the archive page, then hide the Blog Archive widget. You'll need to replace the URL that appears in two places with the one for your own archive page that you saved in step 1. Be sure to cut/paste exactly as shown above, only replacing the url. Don't replace " with a quotation mark or it won't work.

This approach assumes that the Blog Post widget has the id Blog1, and the Blog Archive widget has the id BlogArchive1. This has been true for all Blogger blogs that I've checked so far. You can check it's true for you after step 2 by viewing the html page source from your browser. Search the source for Blog1 and BlogArchive1. If you can find them both, then you should be good.

Once you've saved this change to the template, view your blog, and you should see the Blog Archive widget when you visit your Archive page. When you visit any other page on your Blog the Blog Archive widget should be hidden. One side effect is that the widget will also no longer be visible when you visit Layout from your Dashboard. If you want to change the widget configuration, you'll first need to edit your template and remove the above content. Then you can edit the widget, and add back the content to your template.

The Blog Archive widget isn't the prettiest way to show an archive on your Blog. But it does have the important advantage of being automatically updated with new blog posts. And if you follow these steps you should be able to add this widget to its own page on your Blog. Post a comment if you run into any problems with the address of your blog and I'll see if I can help. Thanks again to Yoboy for posting this answer in the Blogger Help forum.