Create separate archive page-move your archive for faster page loading

Move your archive to its own, dedicated page!

Why should you do that?
Well, an archive is an important element of any blog or web page, offering visitors the possibility to browse through all your activity. As important as it is, placed in the sidebar of Blogger blogs, the archive widget can also harm your blog after a time, when you have published a great number of posts. Loading all the archive links on all pages is totally unnecessary. Move the archive to a separate page and link to it from your menu.

Another important reason for moving the archive widget to a separate page is to reduce the loading time of your pages. Loading speed of the blog is an essential factor for search engine ranking, not to mention that visitors could lose their patience and leave your page.

You can use this technique for your label widget too, for the same reasons. Labels (categories) can be displayed as a label cloud on a separate page (see bellow at 3.).

Enough talk, let's do it!

1.Create a separate, dedicated archive page or/and label page.

Step 1.
  • Make a new, empty post, give it the title you like - Archive or Blog archive.
  • At post options in the editor, check the box for don't allow comments, also change the date; post date it that it doesn't show up in your feed.
  • Now publish it and note the URL of this new archive page.
  • After publishing, go back to edit the page and delete the title of this blog post, otherwise this post will show up in the archive. We'll keep the widget title, not the post title.
Step 2.
  • If you already have an archive widget in your side bar, drag it to the main section in Layout/Design.
    Drag the archive widget under blog post
  • If you don't, go to Design | Add a page element to the main section, choose the Archive widget from the list, click Add to blog and save.
  • Important! Drag this widget down under the posts in the main section now. It doesn't need to show up in the source code before the content.
We are not done yet, the archive is on each and every page now, so we'll hide it quickly, before the visitors notice it.

2. Hide the archive widget from other pages and the main widget from archive page

  • 2.1. Back up your template!
  • 2.2. Open Edit Html from Design, don't check the Expand widget template box
  • 2.3. find this piece of code ]]></b:skin> or, in some templates this one ]]></b:template-skin> and
  • 2.4. insert the following code right under it:
  • <b:if cond='data:blog.url == &quot;http://your-blog-archive.html&quot;'>
    <style>
    #Blog1 {display:none;}
    </style>
    <b:else/>
    <style>
    #BlogArchive1 {display:none;}
    </style>
    </b:if>

    2.5. Replace the code in red with your archive page url.

Preview your template to ensure the code is correct. When your blog loads, you can save your template.

You should have now any content hidden on the archive page: post body, post footer, ads, Linkwithin widget, etc. and also the Archive widget hidden on any other page.
After inserting this code the widgets will be hidden on the Layout/Design panel too, that's why it was important to drag the archive to the right place in the first step.

If you have other widgets that you want to hide on archive page, just insert their ID (ex. #HTML10) after #BlogArchive1, one after the other, comma separated.

You are done, if you are satisfied with the result. If not, go to the next step to style the page.

3. Style, customize the archive page

Though we have a separate archive page, the look and feel of this page needs some more fine tuning.
Use the following code instead the first one to center the title, change the title font size and push the entire archive list to the right.

<b:if cond='data:blog.url == &quot;http://your-blog-archive.html&quot;'>
<style>
#Blog1 {display:none;}
#BlogArchive1 h2 {
text-align: center;
padding: 30px 0 20px;
font-size: 22px; /*title font size*/
color: #f2984c; /*title color*/
}
#ArchiveList {
padding-left: 100px;
}
</style>
<b:else/>
<style>
#BlogArchive1 {display:none;}
</style>
</b:if>
Replace the code in red with your archive page url and the blue code with your image url. Delete my comments in green.

Change, modify or delete delete any value in this code as to your preference, adjust padding and/or margin as needed.

A working example is at this very blog, linked from the main menu and another Demo here.

You can also hide the sidebar on this page, if you wish.

Note: the archive widget doesn't work correctly on static pages. When clicking on a post, it acts as label pages, loading all the posts from the month clicked. Was this your question?

4. Create a separate label (category) page.

If you have many labels, you can do the same with your label widget.
- Follow all the above steps as described but replace #Blogarchive1 (in purple) in all instances with #Label1.
- Don't forget to replace the code in red with your dedicated Label page url, this time.
- To edit the display of the label widget, list or cloud, click the wrench icon and select the one you want to display.

That's all for today, please ask if you need more help.

15 comments:

Nez said...

I realize this is a year old, but it's still very relevant today, thanks for the post.

kate gabrielle said...

Hi! Thank you so much for this post! I have an enormous archive so moving it to a separate page was a huge help! :)

I have one question though... I moved my archive using this tutorial in December 2011, and that is still the month that shows up when I view the archive page even though it's now May 2012. I have the hierarchy format, and all of 2012 is there (as is all of 2011 and 2010) but December is pre-selected.

Maia T said...

kate gabrielle,

I have no intention to help content thieves.
Please stop framing this page and I may answer your question.
Cloaking is black hat SEO technique, violating the Webmaster Guidelines.

kate gabrielle said...

Hi! I have absolutely no idea what you mean! I write all of my own content on my blog. I really have no idea what I did wrong and I promise you whatever I did wrong it was unintentional! Please let me know so I can fix it? I swear whatever you're angry about must have been a mistake! What is cloaking? And what is framing? I thought I followed the tutorial instructions correctly, and that was it :( I'm so upset about this now, I swear I didn't mean to do anything wrong!

Maia T said...

kate gabrielle,
I don't understand how can someone with your admirable web presence (I mean it), unintentionally share someone else's content and still have the nerve to play innocent.

I will publicly apologize though if it turns out that someone is using your name without your knowledge.

kate gabrielle said...

I'm really sorry but I still have no idea what I did wrong? Is it because I posted a link to your blog on my twitter account when I was using visibi? I had no idea that that site was something I shouldn't be using!

Honestly, I totally 100% am so sorry that I did something wrong. If it's because of the visibili thing, I had no intention of doing anything wrong I was just sharing your link with my twitter followers. I can post an apology on twitter if you'd like with a direct link to your site. I am SO sorry! I honestly had no idea visibili was a bad thing. Please forgive me, I was totally ignorant.

kate gabrielle said...

I just updated my twitter with a direct link to your site! I am really SO sorry.

Maia T said...

Please, stop apologizing, you can take that page down if you want to.
Saying sorry is not enough when you are hiding your twitter, facebook,...link in the source code, showing my page to browsers.

Karolin said...

I was so happy to find THIS post...
But... I've tried it 10000 times... it doesn't work!!! :(
And I think the reason is my english! I don't understand all of your words perfectly.
Could you please help me and explain it to me in "easier words"???
You would make me very happy.
Sorry for my bad english!

Karolin

Maia T said...

Karolin,

I see, you already have your archive page created and the widget too.
I've updated the tutorial with a graphic instruction at Step 2. "A picture is worth a thousand words."

1. Please, follow the instructions from subheading 1. step 2 (see the picture).
2. Continue inserting the code as shown at subheading 2 (Hide the archive...).

That's all, the rest of the tutorial is optional customization.
Let me know if you have further problems!

Karolin said...

Thank you sooo much!
Now I've followed your instructions of the picture ... And I insert the code under "]]>" this.
Now my archive is away from the right side of my blog... But now? ...

Ohhh my god... I don't know what I do wrong. I just want an "archive-page" like you. :(

Thank you very very very much for your help!

Karolin said...

AHHHHHHHH!
Loook, looooook, loook!
I made it.
I'm soooo happy.
Thank yooooooou so much for your help. :)

Maia T said...

You are welcome. I'm glad it worked.

Agnostinia said...

Hi maiaT,

How to apply this code on custom template? after this code applied, the archive widget is in the side bar or footer but it succeed moved to separate page.

please take a look to this link:
http://agnostinia.blogspot.com/p/older-posts.html

Any suggestion?

Thanks.

Maia T said...

You have the spacer script in your template for getting the same height between main column and sidebar, that could be a problem.

The easiest way to create a separate archive page would be:
1. Back up your template!!!!
2. Go to Layout and drag the archive widget under the post section;
3. Open your "Older post", delete all the text and create a simple page using this tutorial, with no sidebar and no posts.
4. Make a note of all the changes you do, so you can revert it if it doesn't look right. You are on your own here.
5. If it looks OK, customize the page as in this tutorial (3).

Good luck! I hope it works.

Post a Comment

Thanks for taking the time to comment.
Please don't leave link in your comment. Thank you.

Search for photos, macro photos or paintings.

Do you want to create a separate archive page for your blog too?
If yes, click the link above to go to the tutorial.