How To Create Blogger Archive Page Simple Tutorial

If you do not want to use the archive widget provided by Blogger, you can create your own archive list.

It is a very simple process. You just paste a set of code in a page and then publish it.

It will show you a list of your blog posts orderly categorized under each different month.

Create Blogger Archive Page

Here is how you do it:

1. Log into your Blogger admin.

2. Click 'Pages' and then click 'New page'.

3. For the 'Page title', just type the word 'Archive'.

4. Then click on the 'HTML' button above the text editor (the empty box where you write your blog post).

5. Now paste the set of code as shown below into the text editor.

<script type="text/javascript">function LoadTheArchive(TotalFeed)
{
    var PostTitles = new Array();
    var PostURLs = new Array();
    var PostYears = new Array();
    var PostMonths = new Array();
    var PostDays = new Array();
    if("entry" in TotalFeed.feed)
    {
 var PostEntries=TotalFeed.feed.entry.length;
 for(var PostNum=0; PostNum<PostEntries ; PostNum++)
 {
     var ThisPost = TotalFeed.feed.entry[PostNum];
     PostTitles.push(ThisPost.title.$t);
     PostYears.push(ThisPost.published.$t.substring(0,4));
     PostMonths.push(ThisPost.published.$t.substring(5,7));
     PostDays.push(ThisPost.published.$t.substring(8,10));
     var ThisPostURL;
     for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++)
     {
  if(ThisPost.link[LinkNum].rel == "alternate")
  {
      ThisPostURL = ThisPost.link[LinkNum].href;
      break
  }
     }
     PostURLs.push(ThisPostURL);
 }
    }
    DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);
}

function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays)
{
    var MonthNames=["January","February","March","April","May","June","July","August","September","October","November","December"];
    var NumberOfEntries=PostTitles.length;

    var currentMonth = "";
    var currentYear = "";

    for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
    {
 NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]

 if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
  currentMonth = NameOfMonth;
  currentYear = PostYears[EntryNum];

  document.write("<div class='dateStyle'><br />" + currentMonth+" "+currentYear+" </div>");
 }

  document.write('<a href ="'+PostURLs[EntryNum]+'"><div class=dayStyle>'+parseInt(PostDays[EntryNum],10)+":&nbsp;&nbsp;</div> "+PostTitles[EntryNum]+"</a><br />");
    }
}
</script>

<script src="http://yourblogname.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive" />
</script>

Note: You need to change 'yourblogname' (highlighted in white) to your actual blog domain.

6. Click the orange color 'Publish' button.

7. That's all. You have just created an archive for your blog.

Note: You can customize the page with CSS to your own preference.

For instance, you can change the font color of the date, month and year of the blog posts.

Here is how you do it:

8. Click 'Theme'.

9. Click the 'Custom' button.

10. Next click on 'Advanced'.

11. Pull down the vertical slider and click on 'Add CSS'.

12. A box will appear next to it.

13. Now paste the code below in the empty box provided.

.dateStyle {
     color:#000;
     font-weight:bold;
     font-size: 10px;
     font-family: Arial, sans-serif;
     margin: 0;
}

.dayStyle {
     color:#000;
     font-weight:bold;
     font-family: Arial, sans-serif;
     display: inline-block;
}

Note: The above code is just a sample. You still need to change the color code, font size or type of your choice. 

Another thing is , some of you may find the font size of the blog post titles in the list of archive is too large and the spacing between the blog titles are too crammed.  

Then you need to add this additional CSS code below the above code mentioned in #6 fix it.

.post-body {
    font-size: 90%;
    line-height: 1.4;

Here is how it looks like:

 .dateStyle {
     color:#000;
     font-weight:bold;
     font-size: 10px;
     font-family: Arial, sans-serif;
     margin: 0;
}

.dayStyle {
     color:#000;
     font-weight:bold;
     font-family: Arial, sans-serif;
     display: inline-block;
}

.post-body {
    font-size: 90%;
    line-height: 1.4;
}

Note: You need to change the font-size:90% and maybe also the line-height:1.4 to other specifications to make the page less clutter and more pleasant looking.

For color code, you can find it here.