As number of posts on your blog increases it is better to have a separate page which displays your blog archive, than to display blog-archive in blogger sidebar. Here, we will learn how to make such a page without any third-party service. To do this you should know simple programming provided by blogger. Even if you don’t know the programming, you can do it, just follow the steps. Take a look at my archives page.
This hack requires changes to template. So, it is advised to create a backup of your template before you make any changes. It will be good if you download your template and open it in a text-editor which provides syntax-highlighting (like notepad++). This will help you find the lines we will edit easily.
So, sign-in to blogger dashboard, click on layout and then on “edit html” in the “layout” section. Create a backup of your template, copy-paste complete template code, into a text-editor of your choice and save as .xml file.
We want the archives to be displayed in the area where posts are displayed. To do this we will add the archives-widget(provided by blogger) just below the posts and then will selectively hide the post content on archive page. To add archives widget create a section to which you will add the widget. To create a section search for “Blog1” in the template code. It will be somewhere in starting of main-wrapper div of your template (I found this at line 4 in following code).
1: <div id='content-wrapper-inner'>
2: <div id='main-wrapper'>
3: <b:section class='main' id='main' showaddelement='no'>
4: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
5: </b:section>
6: </div>
Now, add the following code just after </b:section> (between line 5 and 6):
<b:section id='blog-archive-section'>
</b:section>
so that the code looks like this:
<div id='content-wrapper-inner'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<b:section id='blog-archive-section'>
</b:section>
</div>
Copy the complete code for the template from your text-editor and paste it into blogger “Edit HTML” page and save the template. Now go to the “Page Elements” section of Blogger Layout page. You should have new section below the Blog Posts section. Click on “Add a Gadget”, and add archive gadget to the newly created section. After this test if you can see archive widget below the post in your blog.
Once this is done, jump to “Edit HTML” page, click on “Expand Widget Templates”, copy the template code and paste it over the existing code in text-editor.
We are almost done. Search for “blog-archive-section” in the text editor. There should be a widget code within the section we added. Within the widget code search for
<b:includable id=’main’>
It should be somewhere around 60 lines below the <b:section id=’blog-archive-section’> we added. (Mine was 62 lines below).
Now create a new static page in blogger and title it Blog Archive and publish it. The content of post doesn’t matter.
Once this is done, add following line just below the <b:includable id=’main’> we searched for:
<b:if cond=' data:blog.url == "YOUR_URL_OF_ARCHIVE_STATIC_PAGE" '>
Replace “YOUR_URL_OF_ARCHIVE_STATIC_PAGE” with the url of static page we just created. Do not change anything else. After this search for first line containing </b:includable> after the line we have added. This should be somewhere around 20 lines below the <b:includable id=’main’> line.
Add following line just before the </b:includable> line:
</b:if>
Now the archives widget will be displayed only on the Archives static page. At this page we have to hide the post-content belonging to archives page. To do this we will add another b:if tag in the posts widget.
Search for “blog-posts hfeed”. Add following two lines just below this line:
<b:if cond=' data:blog.url == &YOUR_URL_OF_ARCHIVE_STATIC_PAGE" '>
<b:else/>
Again search for first </b:includable> after the line we added. Just before this line add </b:if>. Now save the template. If you have done everything correctly then the template will save and you got your archives page built.
test comment