Create an Archive List/Page for Blogger

After revamping my blog with this awesome free theme from ThemeXpose that I absolutely love, I decided to remove the archive list widget for good in hopes of decluttering my sidebar. However, I still want to offer you, my dear readers, an easy way to backtrack and dig my old posts just in case you want to read about how I sucked at handling life, or just for the heck of hate-reading me, or simply, just because you want to get to know me more (aaaawww ♥). So I decided to go for an archives page instead.


Do blog archives matter?
Yes, they do. As a matter of fact, they are essential, not only that it gives your blog depth and credibility but it also cultivates loyalty to your readers as well. How? Having an Archives increases the amount of time your visitors spend on your site - giving them a chance of knowing you more which will eventually lead to keeping them engaged and loyal to your blog. Don't just let your old blog posts sit in the dark and gather dusts. :)

For months, I've been using this code from jhwilson's Create a Blogger Archive Page. Here's how it looked like:

jhwilson's archive page for blogger

It works pretty well but I wanted it to look more organized. Don't get me wrong, I love it and I'm really thankful for that. It's great but it needs just a little rework. Since I am no good with javascript, I asked the awesome boyfie, Jan, to create an archive page derived from jhwilson's code - only this time, it will be sorted by month and year. True to what I said, he's awesome for he recreated it in a jiffy! Yay! And with a little help from my CSS skills, I added a little knickknack and voila! Here's how it looks now (or you can visit my Archive Page):

JanCarlo's archive page for blogger

It's better, isn't it?

As generous as other programmers were, we would also like to share with you a step by step process on how to create this archive page for your blog. PLEASE NOTE THAT THIS WORKS ONLY FOR BLOGGER.

How to Create an Archive List/Page for Blogger

Step 1: Create A New Page
Open your blog and go to PAGES and click on NEW PAGE. (Fig. 1)

Fig. 1

Name your new page however you want it. But I suggest you put a page name that is clear for your readers to know what the page is all about. Then click on the button that says HTML. (Fig. 2)

Fig. 2

Step 2: Copy and Paste
Now you need to copy and paste the following code into your HTML field.

Old code (works for blogsites that are not yet converted to https)

<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://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive" />
</script>

<!--CUSTOMIZATION-->
<style type="text/css">
.dateStyle {
     color:#000;
     font-weight:bold;
     font-size: 15px;
     font-family: Arial, sans-serif;
     margin: 0;
}

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

</style>

New code that works for https

<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("<br><div class='dateStyle'>" + currentMonth + " " + currentYear + "</div>");
 }
var parsed_day = parseInt(PostDays[EntryNum],10) > 9 ? "" + parseInt(PostDays[EntryNum],10): "0" + parseInt(PostDays[EntryNum],10);
  document.write("<div class='dayStyle'>" + parsed_day + ":&nbsp;&nbsp;</div><a href='" + PostURLs[EntryNum] + "'>" + PostTitles[EntryNum] + "</a><br>");
    }
}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=150&amp;start-index=1&amp;callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=150&amp;start-index=151&amp;callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=150&amp;start-index=301&amp;callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=150&amp;start-index=451&amp;callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=150&amp;start-index=601&amp;callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=150&amp;start-index=851&amp;callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=150&amp;start-index=1001&amp;callback=LoadTheArchive" type="text/javascript">
</script>
<!--CUSTOMIZATION-->
<style type="text/css">
.dateStyle {
     color:#000;
     font-weight:bold;
     font-size: 15px;
     font-family: Arial, sans-serif;
     margin: 0;
}

.dayStyle {
     color:#000;
     font-weight:bold;
     font-family: Arial, sans-serif;
     display: inline-block;
}
.post-header{display:none;}
</style>

It should look like the one below:

Click image to enlarge

Step 3: Customize
Don't freak out! It's just easy.

First you have to look for this:

Click anywhere on the HTML box and hit CTRL + F and type YOURBLOGHERE to find the url that is to be changed easily

Change YOURBLOGHERE.blogspot.com into your web address.

From here, you may publish the page now. Or you can customize its look further.

Just look for the the CSS code at the bottom-most part and customize the highlighted parts according to your preference.

Do not alter the class names e.g. (.dateStyle/.dayStyle)

If you aren't really familiar with CSS, just edit the values between : and ; to be safe.

For example, if you want to change the font color, just change color: #22a9b1; to color: #006DD9; or you may use the names of the colors instead of hexcodes like, color: pink;

Step 4: Publish the page and you're good to go!

That's it. I hope this helps. Please let me know if it works for you. And if you have questions regarding this matter, don't hesitate to hit me a comment.

If you find this helpful, spread the love and share. :)

UPDATE! (As of June 2017)
There seems to have a problem fetching all our posts to our Archive. Thankfully, a fellow blogger has given us a solution. Thanks to Singa Chu (see his comment below and visit his website, too). :)

Here's what you have to do:

Since there has been a change in Blogger, your blog feed will only return 150 posts. To show all your posts, you have to manually fetch your posts using the script below (don't forget to change the URL):

<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=151&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=301&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=451&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=601&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=851&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=150&start-index=1001&alt=json-in-script&callback=LoadTheArchive"></script>

The script above will populate 1001 posts (see start-index of the last line). If you need to populate more posts, just add one line of the script and change the start-index count (by adding 150).

Just add it right at the red line on the image below:

If you are going to visit My Archive Page, you can see that it now shows all my posts since 2007. (I have already purged old posts)

I hope it all works for you as well. :)

UPDATE! (As of August 2018)
There has been an issue with the archive not working after converting your blog site from http to https. Thankfully, a fellow blogger came the rescue and revised the code that works for https websites.

My Archive Page now works again. The new code is posted above. Just copy the entire code and paste it on your editor. There's no need to do the June 2017 update.

Thanks Rajeev! Here's his working demo https://www.freshtechtips.com/p/archives.html