15 Creating an Archives Page in Blogger April 24, 2008 /

An archives page can be a really useful place for your readers to locate posts of interest or simply browse through your previous posts at leisure.

Recently I've received some feedback from readers who suggested I create an easier method to browse previous posts. So I decided to create a dedicated "Archives Page" which I hope will help readers easily locate previous posts to suit their needs. My archives page features links to my monthly archives, an explanation for each category and also a simple search function for easy browsing.

In today's post, I'll explain how I created my Blogger archives page, and list some of the reasons why this method of archiving could be useful for you too.

Why you may want to create an "Archives" page

Most successful blogs feature a link to their archives pages for visitors who would like to read through previous posts.

Such archives pages need not be limited to temporal pages which contain links to a monthly or weekly list of posts though. You could also use an archives page to link to your labels/categories and provide an explanation of your filing system which can help your readers locate posts of interest.

Blogger does not offer us a template to create an archives page for our blogs. Instead, we have an "Archives" widget available which you can add to your sidebar (or indeed anywhere you are able to insert a new "Page Element" within your template). However, such widgets don't offer much of an explanation for your readers about your archiving system. Also, if you have been blogging for a long time (or use weekly/daily archives) this list can become quite long.

Creating a dedicated archives page for your blog allows you to offer your readers a better insight about your blog, offer an easy means of locating and browsing through previous posts, and may be styled in any way you like.

How to create an archives page in Blogger

When creating an archives page for your Blogger blog, you must understand that there is no magic script which will generate all necessary links for you. Instead, we have to manually create all links to our monthly/weekly archives pages, and also to any labels pages we may like to present.

While this may seem like a daunting task (especially if you have a huge backlog of posts or a large number of categories), the good news is that once you've compiled your page you can periodically update this with much less effort.

Deciding on a format for your archives page

For my own archives page, I decided to include:

• Links to my monthly archives pages
• Links to each label/category page with a brief explanation of what these posts are about
• A simple search function which may help readers locate the content they are searching for

For your own archives page, you may prefer to include a slightly different set of links, such as a list of your most popular posts or important pages from your archives.

Once I had decided what I wanted to include, I set about designing the format I preferred to present these links in. While long lists of links was an option, I decided to make better use of the page and use a columns system so that each set would be divided into two columns on the page.

Here is a breakdown of the design of my archives page:

I used headings (<h3> and <h4>) for the section titles, and divided up the sections into two columns using DIV's which were styled like this:

<div style="width: 45%; float: left;">Left Column Content Here</div>

<div style="width: 45%; float: right;">Right Column Content Here</div>

<div style="clear: both;"></div>

The final DIV with the "clear: both" styling ensures that any content beneath the columns does not bunch up between the columns and disorganize the array.

This method of styling your post can only be achieved when editing your posts in Edit HTML mode, so if you usually use the Rich Text editor for your posts, you may need to switch temporarily in order to duplicate this process.

Adding links to the monthly archives and labels pages

As I mentioned earlier, it is necessary to add these links manually. The easiest method is to add both a label and archive widget to your sidebar (you can always remove these afterwards), then open up your blog in a new tab or browser window.

Then on your post editing page (in a different tab/window to your blog) write the link text for each archive/label. Copy the required links from your sidebar widgets (usually you can right click on a link and choose to copy the link location to your clipboard), then use the hyperlink function in your post editor to add these links to your post.

Adding a simple search function to the page

If you would also like to add a simple search box to your archives page, can simply add the following section of code where you would like the search box to appear in your post:

<p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text"/> <input id="search-btn" value="Search" type="submit"/> </form></p>

This simple search code is the same which is used in the Blogger nav-bar which searches through your posts to provide relevant search results for your readers queries (read more about this simple search function).

Saving and Linking to your archives page

Like other pages you may like to create for your Blogger blog, it is a good idea to backdate this post so that it doesn't appear to be a recent blog entry.

You can do this by changing the date in the "Post Options" link below your post editor.

Then once you have saved your post, locate the URL for this in the Edit Posts page of your Blogger dashboard and copy this link to your clipboard.

Finally, add a link to your archives page from somewhere in your blog template. If you have a navigation bar in your design, this would be an ideal place to feature your link so readers can easily locate this. Alternatively you may prefer to add a link in a sidebar widget, or in the footer section of your blog.

I placed a link to the Blogger Buster archives page beneath the search box in the header section, among other important links.

And there you have it: a custom-made archives page for your Blogger blog!

I hope you have found my explanation useful to help you create your own archives page using Blogger. I would love to see other examples of Blogger archives pages, so if you create one of your own, please let me know by leaving your comments below.