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 == "http://www.gadgetsappshacks.com/p/archive.html&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 " with a quotation mark or it won't work.quot;'>
<style>
#Blog1{
display:none;
}
</style>
</b:if>
<b:if cond='data:blog.url != "http://www.gadgetsappshacks.com/p/archive.html"'>
<style>
#BlogArchive1{
display:none;
}
</style>
</b:if>
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.
i'm looking for this trick. thank you for making effort to summarize it in most simple words.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteAwesome hack, thank you so much!
ReplyDeleteHello, I just want to create an Archive Page with your tip but it doesn't seems to work...
ReplyDeleteI 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?
@Juju.Gribouille change .fr domain extension to .com
ReplyDeleteit will work ;)
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!
ReplyDeletewattley1006111.blogspot.co.uk
@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?
ReplyDeleteFinally...a concise tutorial on creating an archive page without all that icky javascript that cuts off 4 years of my posts! Thank you!
ReplyDeleteI tried this, BUT on my Archive page it shows all the sidebar gadgets.
ReplyDeleteIf i try to remove any it removes it from all other pages.
Doesn't work for me, sorry!
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
Delete#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;
}
This is exactly what I was looking for, worked perfectly for me after I re-read the instructions :) thanks!
ReplyDeleteThanks for sharing nice post
ReplyDeleteBlogger widgets
Hi! Thanks a lot for this! I WORKED FOR ME!
ReplyDeleteHowever, 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!
I think you can nest tags to effectively achieve a logical and operator.
DeleteSo 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)
Ok, the tags got stripped from the comment. Let me try again, but I'll use [] instead of <>
Delete[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]
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
DeleteThank's for your sharing, now i can (sayabisa)
ReplyDeleteI keep trying but it isn't working at all for me...
ReplyDeletehttp://aislinlookingforsomething.blogspot.ca/p/archive.html
Sweet.
ReplyDeleteThank you!
How to use this code any example how to work i m new for this please send me detail
ReplyDeleteSweet. Glad I found this! Thank you for sharing this tip.
ReplyDelete