Monday, 1 May 2017

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.

Archive Page For Blogger


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.

Blogger Archive Page


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.

Blogger Archive Page

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

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

Labels: , , ,

17 Comments:

At February 01, 2018 5:07 pm , Blogger Arfa said...

it works sir.... thank you so much

 
At February 06, 2018 5:40 pm , Blogger Ogunleye Peter Kleve said...

Thanks for your feedback

 
At May 02, 2018 8:14 am , Blogger Suman Matety said...

it works man

 
At December 04, 2018 4:07 pm , Anonymous Fun With Puzzles said...

Thanks! This worked for my blog.

 
At December 11, 2018 6:44 pm , Blogger . said...

Is there a way to extend the archive post listing beyong the default 150 without it putting the dates and months out of sync? My blog typically has around 200 posts per month.

I tried using the script from sarknows site but it puts some of my months out of sync and randomly inserts the month title half way down the list.

script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=1&callback=LoadTheArchive" type="text/javascript">
/script>
script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=151&callback=LoadTheArchive" type="text/javascript">
/script>
script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=301&callback=LoadTheArchive" type="text/javascript">
/script>

etc.

I've got December's post showing half way through November's and other weirdness!
https://tykesaeroblog.blogspot.com/p/archives2.html

Edit: having to remove script tags as it won't let me post.

 
At May 22, 2019 1:51 pm , Blogger DATE ME said...

Good.

http://datemeinfo.blogspot.com
https://datemeinfo.blogspot.com

 
At June 03, 2019 10:37 am , Blogger Chuks Obi, PhD said...

It stopped working 2019

 
At June 03, 2019 10:51 am , Blogger Chuks Obi, PhD said...

Nevermind, It worked. Thanks

https://bit.ly/2Z2uYKO

 
At August 18, 2019 4:24 am , Blogger TheCrazyBookLover said...

I tried it and it doesn't work. I don't know what happened. I can see it in the preview but not usable on when published

 
At August 18, 2019 8:59 pm , Blogger Ogunleye Peter Kleve said...

Thanks you all for you comments, it's our privilege to know this post is of use to you....

@bookworm are you sure you copied the code properly try to go through the process all over again taking note of every steps

 
At August 30, 2019 4:37 pm , Blogger MJSavageau said...

It works great, thank you! I have a client who only posts a monthly blog. What would I remove from the code to only have the months show, and not the dates?

 
At September 20, 2019 12:31 am , Blogger Martina Takano said...

It works for me, however, my blog started in 2012 and not all posts are shown, how to do it?

 
At January 01, 2020 9:14 pm , Blogger kiddkiddoe said...

doesnt works with mine unfortunately.

 
At January 22, 2020 3:12 pm , Blogger Daniel Stotz said...

wow... thanks
it works fine

 
At April 21, 2020 5:43 pm , Blogger Hart of a Traveler said...

Thanks for your instructions. Worked great!

 
At June 01, 2021 12:42 pm , Blogger Agyo James said...

What a nice post, I love your tips, I also own a blog which is Stepzee check it out, I would also like to publish a post on your blog so let me know

 
At June 02, 2021 10:02 am , Blogger Shinbat said...

No problem. Use the contact us page and let us start from there. Thanks for reading.

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home