GeneratePress 7 Years Celebration! 🔥 Get up to $30 off 🔥

Add Simple Archive Page Widget to Your Blogger Blog

How to Make an Archive Page in Your BlogSpot Blog?

This archive page is very easy to make if you follow our instructions carefully. So just follow our given steps below:

  • Go to your blogger blog dashboard.
  • Click on the pages tab from the dashboard.
  • Click on the new page tab and chose the blank page.
  • Write your page title as ‘Archives’.
  • Then Select HTML tab.
  • Now copy all bellows JavaScript codes and past them inside the page.
<script type='text/javascript'>//<![CDATA[
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;
for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
{
NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]
document.write('<a href ="'+PostURLs[EntryNum]+'">'+PostTitles[EntryNum]+"</a> ("+NameOfMonth+" "+parseInt(PostDays[EntryNum],10)+", "+PostYears[EntryNum]+")<br />");
}
}
//]]></script>
<script type="text/javascript" src="/feeds/posts/default?max-results=500&alt=json-in-script&callback=LoadTheArchive">// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// ]]></script>
  • Last of all save the page and you are done!

Now view your page and look it's working fine.

Customizations:

  • If you want to show less or more than 500 posts on the archive page then change the green highlighted text (500).

If this post is helpful and you like this post then share it with your social media friends. Thanks for reading!

Previous Article
Basic Concepts of Content Delivery Network (CDN)
Next Article
Tips to Reduce Your Blogger Blog Load Time

Thanks for choosing to comment on this article. A name and email address are required to post a comment. The email address is not publicly visible or shared. Please keep in mind that comments are moderated according to our comment policy.

Leave a Comment