Southern Listeners

Saturday, October 16, 2010

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:

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 Page Elements/Layout - 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. And to remove other page elements from Archive 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.

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for </b:skin> and place the following code directly below </b:skin>

This code will hide the archive gadget from all the pages except for the page that you input in the first line. Also, usual page elements will be hidden from this page. To use this code in your blog, change the URL to your Archive page's URL.

The code in place:

If for some reasons the code does not work, and you're absolutely sure that you have changed the address in the code above to your archive page's address, kindly check if the ID of your archive gadget and blog-posts gadget are the default ones. Default ID for the archive gadget is BlogArchive1. Default ID for blog posts is Blog1. See here to learn how you can check the IDs of your gadgets.

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.

Hi. I did exactly what you said, and while the blog archive gadget does now appear on my archive page, it still appears on my home page and the other blog elements are still on my archive page. what should I do?

Hello, I was so pleased to find this article, and tho' I believe I have been following the instructions, so far I haven't been able to get even Step 2 to work. Each time I preview after inserting the html, there is a large block of html at the top of my blog.

@Lesley: Large block of HTMLs, I recognize this symptom. You're placing the HTML in step 2 below <b:skin>, that's incorrect. You should place it below </b:skin>, they are different. And don't forget to change the URL in the code in Step 2 to that of yours. I'd done it for you but you have 4 blogs, I'm not sure which one you're currently working on.

Try placing the code below </b:skin> and then see how it goes, and get back to me.

You were so right! So I fixed that and double-checked the URL and didn't get the html block, but it still isn't quite right. When I click on my "Archives" page, the archives aren't there in the main body of the page, but are still at the bottom left (where I have moved everything until I get them in pages). They do only show up in the lower left when I click "Archive" and don't show up when other pages are clicked.

So appreciate your help. By the way, it is my http://smallmeadowpress.blogspot.comblog.

@Lesley: Hi again. Looks like you have gotten Step 2 and 3 right, but you have skipped step 1. Go to Page Elements and place your archive above 'Blog Posts'. Then you'll be able to see it in your main body (in archive page).

Well, that is the tricky part. I have chosen a layout that doesn't have a gadget bar above my posts. I saw in your instructions that it is also ok to put it below, but it doesn't seem to work out, actually.

Any suggestions? I do hope this will work as I want a really uncluttered, centered blog. And I was hoping to do the followers in the same way after I figured out the archives.

@Lesley. You don't have to have the gadget section to place the archive gadget above your 'Blog Posts'. In Page Elements page, click on your current archive gadget, and drag it to either above or below your 'Blog Posts' box. Hold it there a little longer until a section appears, then let it go, and it will sit there fine.

You're using the Simple template, this can be done. And yes it would work for Follower's gadget too. Just change '#BlogArchive1' in Step2 to '#Followers1'.

@Lesley: I'm glad you managed to get it to work, it's looking good now. I'm aware that the text is left-aligned. The reason is because that's how archive's gadgets are made. But you can easily bring it to the center. Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

Holy frack. I'm trying to do away with my left column and figuring out what to do with my growing label list was killing me (I hate the cloud). I wanted to do a page but the thought of a manual list was giving me hives. This just..YES!

@Amber: Glad you managed to go through the first two step.s However, the third step is not properly executed. That is why you're still seeing the word 'Archive' below your gadget. It's just a page title, it doesn't belong to your actual archive gadget.

This almost worked for me, except that I was able to get the Archive to display on the archive page, but it was still displaying on the main page and other post elements were still displaying on the archives page, even though I inserted the codes from steps 2 and 3. Help please?

dear yoboy i have done exactly what you have describe here. my problem is instead of displaying BlogArchive only on separate page, all other widgets also come in to that page...what to do to refrain other widgets from that page...

In step 2, when you're required to enter your blog's URL into the code, do not include country specific redirection. For example, it should be 'something.blogspot.com', instead of 'something.blogspot.in'.

thank you so much it has worked but the list is off to the left and wont center and ive tried everything to change it..is there anyway you could help? Also it's got rid of the title on my page how could i get that back?Thank you so much!

1) To center your archive texts, go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

#BlogArchive1_ArchiveList{text-align: center;}

2) As for the title, I have removed the usual BlogPost element from the HTML so that it won't collide with the Archive gadget. That is why the page's title has been removed as well. An easier alternative is to go to your archive page, and click on the 'quick edit pen/pencil' icon for your archive gadget. Then, in the Title field, insert the title of your page. You could edit your Archive gadget by going to Dashboard - Design - Page Elements as well, but first you have to remove the modification that you have made from this tutorial, or else you won't be seeing the Archive gadget in Page Elements.

@Bibisfootprints: I wish I could give you a simple straight-forward answer, but I can't. Here's the deal. Followers gadget contains iFrame elements. We can't easily alter any gadgets that have these elements. But we have some alternatives to look at:

1) We can always add padding to the left-side of the gadget. This will bring the gadget towards the center. But this is not dynamic. As the numbers of followers in your blog increase, more icons will be added to the right hand side of the gadget, and the left hand side will be void forever. In the end, you followers gadget will not be proportional. That is not recommended.

2) This is what I suggest. Go to Dashboard - Design - Template Designer - Layout - Footer Layout - Choose the 3rd option (the one with 3 footer sections) - Apply to Blog. Now go to Dashboard - Design - Page Elements, and you'll be able to see 3 sections in your footer. Leave the left and right sections gadget-less, and drag your followers gadget to the center section.

This is just temporary solution. Once you have lots of followers, your followers' icons will run across your blog horizontally. At that point, you won't have the need to center the follower's gadget anymore. You can always undo what you have done today. If you have follow-up questions on this, feel free to fill up this contact form.

ooops! spoke too soon.. it worked fine on my test blog but when i applied it on my actual blog, the labels page has all the elements that are on my sidebar. how do i remove them from the labels page and just keep the 'labels' widget there on the labels page?

This worked for me except I can't get the blog archive to disappear from the other pages. I checked the ID and it was the same you used. I also used the other code you provided someone else who was having the problem but to no avail. Can you help me?

Thank you, thank you for this excellent tutorial! I was successful in adding a Blog Archive page to my blog, but for some reason it is randomly showing blog post titles for August 2011 & no other months. I would either like it to show all titles or none...any suggestions? And thank you again, this was truly helpful!

1) While you're logged in, go to your archive page.2) Click on the 'Quick Edit' icon. You should now be able to edit this gadget.3) Select 'Dropdown Menu' as your style.4) Click 'Save'.5) Now close your browser.6) Re-launch your browser, and repeat the same steps above, but choose 'Hierarchy' as your style this time.

Thanks for the suggestion. I tried it, but it still came back the same way...with August posts listed out. Very strange! I would actually like it if all the months had the posts listed out, but that's okay. I guess it just is what it is! Thank you so much for the help!

@Melanie: That is weird. If you have spare time, you might want to undo the tweak in this page, and fix the archive gadget first by restoring it to its default. You can do this by going to Dashboard - Design - Edit HTML - Backup (Download Full Template) - Revert Widget to Template Default. That will remove all HTML direct changes that you have done to your template, but it will also fix lots of broken things - hopefully the Archive gadget as well.

Hello again.Just a little something extra I thought of doing.Right now my archive page is working fine, except it overrides any initial page design, only showing the widget.Is there a way of inserting an image or something above the archive widget without it disappearing?

I was thinking dedicated page like this: upper the label gadget and after this that Greenlava's YahooPipe gadget (?) which You have also. So is it possible and how? Like two gadget inside the same page?

I also wondering how to change label page to show different number posts, less than 20. I think i've seen it somewhere.

Technically it is possible. Get your Y! Pipe gadget sorted, and then get back to me. I'll let you what modifications you need to make to place both gadgets in the same page. Let me know your blog's address as well..

You're gonna have to ask GreenLava about the number of posts to show. Don't know the first thing when it comes to Y! Pipes.. O

actually, I'm gonna use blogger's amazing model, which I'm working on. I suppose it can be done by expanding widgets on html. I found this code, but I have no clue how to fix it (for example to show 10 post on blog-pager all the time including the first time pushing some label):

I think I get what you mean. You're trying to include 'min-results=20&max-results=20' directly into your blog's template. Unfortunately, even when you expand widget's templates, there URLs are not in raw format. You'll see tags like this: data:newerPageUrl. These tags contain the URL data. We might be able to edit them with Javascript, but I'm not very good at it.

I have tried these steps, but I have an issue. I have created the Archive page, and adjusted the code as instructed, but each time I post a test post, the posts end up on my 'home' page and not in the archive.... thoughts? Here's my blog to show you what i mean...

I believe you have misunderstood this tweak. This tutorial will not allow you to publish a post in one of your pages. In fact, that is not even possible. This tutorial simply allows you to move your Archive gadget from your sidebar to a dedicated page for itself. It will not affect the way posts appear in your homepage.

The nearest thing to publishing a post in one of your tabs is described here, and to hide posts from your main page, click here.

Hello, just want to say thank you for all your invaluable advice - I've used a few of your tutorials and they have been life-and not to mention time-savers!

I did notice with this code that it doesn't seem to be compatible with blogs using the .co.uk domain. It took me ages to figure out why the code wasn't working until I tried putting .com in the url instead of .co.uk (which is the correct domain for my archive page). Nevertheless I have got it to work thanks to you!

Seems this is the simplest tutorial I've found so far. Though, I still got problems just like bloggers above me. I have followed all your suggestions in this tutorial and comment, still it does not work. Please Yoga, help me..

Hi! It's still me. I see changes in my Archive page. That are: 1. heading post on the page is missing.2. Yes, the archive gadget is succeed moving to separate archive page and no longer visible in the main page or in other pages. But it lies whether on sidebar or footer. how can I customize this? Please advice. Thanks.

The gadget needs to be positioned in Step 1, before we deal with the coding in Step 2. You need to reverse the tweak by removing the code first, then proceed again by repositioning your gadget in Dashboard - Layout. Make sure your gadget is placed below your 'Blog Post' widget. Then reinsert the code.

Thanks for responding my question.I am sure I have been following your advice and believe your tutorial is very easy to understand and it should be done with no problem. I just thinking, Might it be the custom template I use?

Very much possible. I've checked your source code, and it does seem like your archive is placed in your footer. Are you able to reposition your Archive gadget freely in your Layout page in this template (you need to remove the conditional code to see this gadget in your Layout again)?

I removed #Blog1 and page title is there! :D The Archive Gadget can freely go whether in footer or sidebar only. if I remove the conditional code belongs to your script, my blog comes to error. Hmm.. Which conditional code you refer to?

I'm referring to the conditional code that you've entered in Step 2. Let's wrap things up. It seems like your Archive gadget is currently placed on your footer. If we want the gadget to appear in the main content of your page, the gadget needs to repositioned in your Layout page, and it needs to be placed specifically below your 'Blog Post' element. That said, since you have a conditional code in place, you won't be able to see your Archive gadget in your Layout page, which is why you need to temporarily remove the code before repositioning your Archive gadget.

This is what you need to do now:1) Remove the code that you've added in Step 2.2) Go to your Layout page and see if you can reposition your Archive gadget to appear below your 'Blog Post' element. If everything goes fine, you should be able to see your Archive gadget in the content area when you view your blog.3) Do not re-insert the code in Step 2 until you get the gadget in place. If your template doesn't allow you to reposition your archive gadget, get back to me.

Yes, my template does not allow me to reposition my archive widget except in footer or sidebar. That is the problem. No space available below the 'Blog Post' element. The choice is only Footer or Sidebar.

If we can't reposition the gadget using the UI then we're gonna have to use the backend method to reposition the gadget - using the HTML.

And yes, I have to look at your template if I were to guide you how to do this. Go to Dashboard - Template - Backup/Restore - Download Full Template - Save the resulting xml file somewhere in your computer. Then go to www.rapidshare.com and upload your xml file there. You will be given a link. Come back to this thread and leave your link here.

I finally managed my archive widget into my 'Older Posts' page after some time. It was incidental when I saw 'showaddelement' code in my other blog. So I did some tweak to that blog which combined with the code from this post, then I tested it to my main blog and voila! resulting a big smile :D

Thanks for this! I'd try following another method that had worked for other gadgets only to find out it specifically didn't work for the Archive gadget. So a couple googles later I ended up here and tried your steps wich worked right away. Yay!

Hey, I'm afraid I'm not having much use with this either! When I do it the archive page is blank and for some reason there's now tiny little lines below my social share buttons that weren't there before. Do you know where I am going wrong? I am a complete beginner but have managed to build my template so far so I'm getting somewhere :)

I wanted to use this to my blog hinditracks.in but the widget is showing in all pages. I wanted it to appear only on http://hinditracks.in/p/archives_2.html Plz help.... btw I'hv deleted the widget for now as it was showing everywhere....

Thanks for sharing this - I've managed to get it included on my blog and have an archive page but would like for it to be formatted the same as my posts. Any ideas?http://zentravellers.blogspot.ca/p/archive.html

I have a question, I have a blogger page with a video on each entry, and when I click on the blog archive see all the posts from one specific month, instead of showing me 7 per page like it is set as default on my site, it shows me all in one page, there's months that I have over 150 posts in only one month, this makes the site go really slow and it makes it really hard to navigate, do you know what I can do to split the archive so it can be shown on several pages instead of just one?

There isn't a way to alter the way the archive gadget shows its posts. But if I were to do something about this I'd probably play around with the auto-pagination. Auto-pagination in Blogger is usually seen as a problem, but in your case this could be a solution (I'm just suggesting). Search for 'Auto-pagination' in Google, and look for common causes that results in auto-pagination, and try to simulate that in your blog. That could force your Archive gadget to auto-paginate and go into several pages.