Dedicated Separate Archive Page

This tutorial teaches you how to create a separate archive page, on a static page. That means, you'd be able to see a dedicated static page on your menu, on which you can click on to view your blog's archive. You can choose to display or not to display conventional archive gadget on the sidebar, that's totally up to you. Anyway, you can check out a sample here:

http://www.test2.southernspeakers.net/p/archive.html

The idea behind this tutorial is to place the Archive gadget on all the pages, and then code it in such a way that it will only be visible on one selected static page. Before starting this tutorial, I am going to assume that you already have an Archive Static Page created and optionally Pages Gadget (menu bar) placed below your header.

Step 1:


Objective: To place and reposition Archive Gadget

If you don't already have an Archive Gadget, go to Page Elements/Layout - Add a Gadget - Blog Archive - and place it above Blog Post (below will do fine as well) - Save

Doing this right, you will now see Archive gadget on top of every single page in your blog, including Static Pages.

Step 2:

Objective: To hide archive gadget from being displayed in all pages, except for one defined page. And to remove other page elements from Archive page.

Needless to say, that one defined page is our dedicated Archive page that you have created. If you have not already done so, go Posting - Edit Pages - New Page and just create a blank page with the title Archive.

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed -

Find for </b:skin> and place the following code directly below </b:skin>

<b:if cond='data:blog.url != "http://testblog8-southernspeakers.blogspot.com/p/followers.html"'>
<style>
#BlogArchive1{
display:none;
}
</style>
<b:else/>
<style>
#Blog1{
display:none;
}
</style>
</b:if> 

This code will hide the archive gadget from all the pages except for the page that you input in the first line. Also, usual page elements will be hidden from this page. To use this code in your blog, change the URL to your Archive page's URL.

The code in place:

If for some reasons the code does not work, and you're absolutely sure that you have changed the address in the code above to your archive page's address, kindly check if the ID of your archive gadget and blog-posts gadget are the default ones. Default ID for the archive gadget is BlogArchive1. Default ID for blog posts is Blog1. See here to learn how you can check the IDs of your gadgets.

You are done! You have placed your Archive gadget on only your archive page. If for some known reasons you find that your blog's margin has not been level, please refer to this tutorial on how to fix this margin.