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.
- If you already have an archive widget in your side bar, drag it to the main section in Layout/Design.
- 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.
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 == "http://your-blog-archive.html"'>
<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.
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 == "http://your-blog-archive.html"'>
<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>
<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?
- 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.
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.
