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 == &quot;http://www.gadgetsappshacks.com/p/archive.html&quot;'>
<style>
#Blog1{
display:none;
}
</style>
</b:if>

<b:if cond='data:blog.url != &quot;http://www.gadgetsappshacks.com/p/archive.html&quot;'>
<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 &quot; 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.

18 comments:

  1. i'm looking for this trick. thank you for making effort to summarize it in most simple words.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hello, I just want to create an Archive Page with your tip but it doesn't seems to work...

    I create a blank page. I move my Archive widget under the post widget.

    I try with your code. It does not work.
    I try with an "if/else" code. It does not work anyway.

    Just see the code, you have the url in.

    if cond='data:blog.url != "http://juju-gribouille.blogspot.fr/p/archives.html"'

    #BlogArchive1{
    display:none;

    else

    #Blog1{
    display:none;


    Sorry but the comment does'nt allow the html tags of the code.

    Have you an idea?

    ReplyDelete
  4. @Juju.Gribouille change .fr domain extension to .com
    it will work ;)

    ReplyDelete
  5. Mine just won't work, it doesn't show the widget no matter what page your on. Also, it does appear when i visit the 'Layout' page from the dash board? PLEASEEEEEE HELP!

    wattley1006111.blogspot.co.uk

    ReplyDelete
  6. @Pedro sir, I tried this trick on my blog but it isn't working. The page is blank after having done all instruction. I visited Juju.Gribouille's blog that first complained the trick wasn't working and discovered the trick is working for him. Admin please find me a solution to this. I know it works but why is it not working my site, WorldWebSurfers.com?

    ReplyDelete
  7. Finally...a concise tutorial on creating an archive page without all that icky javascript that cuts off 4 years of my posts! Thank you!

    ReplyDelete
  8. I tried this, BUT on my Archive page it shows all the sidebar gadgets.
    If i try to remove any it removes it from all other pages.
    Doesn't work for me, sorry!

    ReplyDelete
    Replies
    1. If you want to hide all the sidebar gadgets on the archive page then you'll need to list them in the code you add to the script. Instead of just

      #Blog1{
      display:none;
      }

      You should append a similar entry for all the sidebar widgets. You'll need to look in your template to see their names, but for example they might be

      #PopularPosts1{
      display:none;
      }
      #HTML1{
      display:none;
      }
      #FollowByEmail1{
      display:none;
      }

      Delete
  9. This is exactly what I was looking for, worked perfectly for me after I re-read the instructions :) thanks!

    ReplyDelete
  10. Hi! Thanks a lot for this! I WORKED FOR ME!
    However, I'm trying to do it for two pages (Archive and Contact Form) and I can't seem to make it work :(

    help? XD TIA!

    ReplyDelete
    Replies
    1. I think you can nest tags to effectively achieve a logical and operator.

      So here's the rough outline of how I would do this (not precise syntax - look at post above for that):


      #Blog1(display:none)



      #Blog1(display:none)




      #BlogArchive1(display:none)


      Delete
    2. Ok, the tags got stripped from the comment. Let me try again, but I'll use [] instead of <>

      [b:if cond url == archive.html]
      #Blog1(display:none)
      [/b:if]

      [b:if cond url == contact.html]
      #Blog1(display:none)
      [/b:if]

      [b:if cond url != archive.html]
      [b:if cond url != contact.html]
      #BlogArchive1(display:none)
      [/b:if]
      [/b:if]

      Delete
    3. YEYYY! ALEX THANK YOU SO MUCH!!! I finally got it to work! :D it was frustrating before i asked here, i was even looking into b:elseif tags and stuff. XD Thanks a looooot!! www.yanbirog.com

      Delete
  11. Thank's for your sharing, now i can (sayabisa)

    ReplyDelete
  12. I keep trying but it isn't working at all for me...

    http://aislinlookingforsomething.blogspot.ca/p/archive.html

    ReplyDelete