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://yoboytestblog.blogspot.com/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 Dashboard - Design - Page Elements - 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.

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.

Before we can hide our Archive gadget, we need to know how to address it. As usual, use Firebug to analyze what is the ID or class of the archive gadget. As in my case, it is known with the ID BlogArchive1, as shown in the image below:

To hide archive gadget from all pages except for the dedicated Archive page, go to Dashboard - Design - Edit HTML - find for </b:skin> and place the following code directly below </b:skin>

<b:if cond="data:blog.url != &quot;http://yoboytestblog.blogspot.com/p/archive.html&quot;">
<style>
#BlogArchive1{
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. To use this code in your blog, change the URL to your Archive page's URL, and change the gadget ID accordingly, if it is not the same.

Having completed this step, you will have your blog as it was with the addition of having Archive gadget placed on your Archive page.

Step 3:

Objective: Remove other page elements from Archive page

Some of you might be already happy having completed step 2. But some of you might prefer to remove all the blog elements from the Archive page. So, use your firebug and find out which class or ID to address. Refer to the image below. Mine is known as Blog1. I believe almost all of you has the same ID as mine:

So, what I want to do now is, remove the blog post's elements from being shown on the archive page alone. To do this, go to Dashboard - Design - Edit HTML - Find for </b:skin> and place the following code directly below </b:skin>

<b:if cond="data:blog.url == &quot;http://yoboytestblog.blogspot.com/p/archive.html&quot;">
<style>
#Blog1{
display:none;
}
</style>
</b:if>

To use this in your blog, like usual, change the URL, and I doubt if you have to change the blog post's ID. Save your template then.

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.