How to Create an Archive Page/List for Blogger

Having an archive page on your blog is very necessary and important as it makes it more easier for readers and search engine to have easy access to your content list, thereby improvising your blog index rate.

It also makes your site more professional and offer a nice impression to readers as you can easy paste the archive page link anyway on your blog. So today I will be sharing with you how you can add an archive page on your blog.

How to Create an Archive Page/List for Blogger

Step 1: Sign in to  Blogger select the blog to update in the left menu, click page.
Click on create A New Page to create one.

Name your new page whatever 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 like (Archive). Then click on the button that says HTML.

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

Recommended : How To Convert Personal Facebook Account To A Page And Get More Likes

How To Add Random Posts Widget To Blogger

How To Setup Custom Robots Header Tags On Blogger

<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="https://idea4novice.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>

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 idea4novice to find the url that is to be changed easily

Change idea4novice.blogspot.com to your web address.

You Should Also Read : How To Run Multiple Accounts Of The Same App On Android Device

How to Customise WhatsApp Notifications For Every Contact.

How To Automatically Delete Duplicate Files On Android Device.

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. :)

Share on Google Plus

About Ogunleye Peter Kleve

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.