How to create a AUTOMATIC Blogger blog archive page in 5 seconds!

UPDATE: This is the new code post for https

This post shows detailed steps to implement blogger archive page if you never tried it before. If you successfully implemented it once, go here Jump to old post what ONLY WORKS for blogs that have not been updated to https here.

So, here's the latest update of a way more cooler look!

Have a look at my Archive page, of all stuff I've written live here or jump to my sample archive page embedded below.  You can see it to check how it feels.  I preferred Sarah's look and feel, which was WAY BETTER than what even I'd listed in this blog post years ago when Jason's code used to work.
But, like a stupid person who knows nothing about code, I did a few mistakes. I will list them up for you so that you don't do the EXACT SAME stupidity verified mistakes!!

Steps to follow to get a stunning Blogger Blog Archive Page

  1. Go to Blogger and sign in
  2. Go to PAGES
  3. Add a new page ➕ titled Archive (or whatever you want to call it but be sure you save it with that name. This will name your URL. (e.g. see sample www.doveranalyst.com/p/archive.html).' Untitled' will make you lose your permalink SEO) 
  4. COPY code
  5. Paste the code to NOTEPAD to remove all possible formatting.
  6. Go to HTML mode (Click the <> SYMBOL in New Blogger Draft.(just right of Compose at the top left in old blogger draft) 
  7. Paste the code in the HTML mode  <> (from notepad)
  8. Hit Publish
  9. ENSURE you do NOTHING(nothing means nothing), between PASTING THE CODE and hitting publish.

Add a new page

Add a new blank page. Give a title. I gave Archive. So, my URL for my archive page became, www.doveranalyst.com/p/archive.html. Save. Make sure your pages gadget is at the top below the header and the ARCHIVE page is visible (checked in the tick mark box), so that it shows after you publish.

How to go to HTML mode

 Toggle the  <> to go to HTML mode, which shows the code view of a page you create. 

🔝

NEW Blogger Archive CODE  for https blogspot / custom domain

After copy-pasting the code below in notepad (to remove all formatting), paste in html mode and hit publish. That's it!

If you have a dark blogger template theme

Update: You don't have to add your website address anywhere. I just customized the color (white (#ffff) for the date as I've a dark theme and made the month and year grey.

If you do not customize colour of date and month then it will be black by default and if you've a dark theme like me, it won't be visible!

Jump to code here.🔝
<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>

 Sample of my blogger archive page

After copy-pasting in notepad (to remove all formatting), paste in html mode and hit publish.

I got the code from sarah. There's another version of this code at this site.🔝

Blogger Archive Page for Bloggers who already had an archive Page

If you'd a fancy archive page like me, you probably thought you knew it all. Ah, but we forget, don't we? Once, you set this blogger archive page, you NEVER TOUCH IT AGAIN.
And, soon you forget what exactly you'd done. 

Blogger archive code when github does not work anymore

I was nearly dead when I repeated the copying and pasting the codes and the archive page just reloaded to NOTHING. Blank empty. Yeah. Devastating.

IMPORTANT STEP

HTML MODE should be completely empty. Do not even dare touch that compose mode to see how it looks!
I'd suggest a few things to keep in mind.

Copy the code below to NotePad and edit separately.
things to edit:
1. Your blog/website address
2. Colors

Now, it may seem trivial to you, but when I took Sarah's code, even once when it finally worked, I could barely see black on black. That's cuz on my template, which is a dark one, here on doveranalyst.com. both text and background nearly matched to the color #000 which is html color code for black. My background is black.

How to Customize font, font color


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

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

This will be the end portion of the code shared below. This is the customization section. I changed the #000 to #87d9dd, a slightly teal version. 

My site by default gave the link color to my post headings on the Archive page. So, I chose a slightly balancing color that is even visible. Now, be very careful. The teal color on my website, is the day and date. (That thing on top and to the left of the posts. Yes, that thing you thought was a cumulative cool number add up next to your posts is the date)

<!--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>

How to customize Blogger Archive font to your default font?

I removed the font option to match my Blog default font. I updated date Style to first Silver (HTML color code for gray) and later to an even darker gray.

<!--CUSTOMIZATION-->
<style type="text/css">
.dateStyle {
     color:silver;
     font-weight:bold;
     font-size: 15px;
     font-family: Arial, sans-serif;
     margin: 0;
}
.dayStyle {
     color:#fff;
     font-weight:bold;
     font-family: Arial, sans-serif;
     display: inline-block;
}
.post-header{display:none;}
</style>
DISCLAIMER: Keep Checking. What if it disappears? It lasted for years until 16 May 2020, when I had to REDO it in 5 seconds again.

Common Mistakes

  1. When I looked at the code, and the instruction on her site that I must find yourawesomeblog and replace it with my website code, I kept looking. I know, right? I am pro at not knowing codes and implementing a zillion things in my design. So, I know that you MUST put your website address, else the code giving blogger's blog will be reflected on your blog. For sure. So, I kept doing CTRL+F like crazy. But, it won't show me "YOUR". (That was her example. Please don't lose your mind). Later, I figured, she hasn't put anything at all in the new code. So, I have typed https://doveranalyst.com for you, that you need to find and replace.
  2. Now, initially, I only put ww.doveranalyst.com and it didn't work. So, I felt maybe it does not work for custom domains and only for blogger blogspot.com domains. But, I had left typing the http:// before my URL.
DO NOT TOUCH anything after pasting YOUR FINAL FINAL customized code. Just paste and hit publish. You might want to do "REVERT TO DRAFT", to your already published ARCHIVE page, if you'd one published like mine. It won't work in the update thing. 

Either revert to draft/ delete all in HTML mode, start with a clean slate and hit publish

Ok, now that you know everything, you can look at the code below.

Code Successfully implemented on doveranalyst.com (check before implementing):

Done. Now go. Share this post. Bye

Old Link 🔝

OLD POST THAT WORKED FOR HTTP

Wow,  I can't believe I actually got such an awesome way to do it!
Here's the Here's the demo of how your blog archive page will look like.

It just couldn't be easier! I still can't bring myself to believe it worked!  Jeez! (Touch wood)

I got this from https://github.com/jhwilson/Create-a-Blogger-archive-page/blob/master/README.markdown

Steps to follow to get a Blogger Blog Archive Page

  1. Go to Blogger and sign in
  2. Go to PAGES
  3. Add a new page titled Archive (or whatever you want to call it but be sure you save it with that name. 'Untitled' will make you lose your permalink SEO) 
  4. Go to HTML mode (just on right of Compose at the top left) 

  1. Simply paste the code below! (it's a really short code. Go to original page here) 

  1. DON'T forget to CHANGE BLOG ADDRESS TO YOUR'S! 
  2. And hit publish and you are done! Hurray! 


For example,  if your blog name is yourblogname.blogspot.com,  change 'thisawesomeblog'  to 'yourblogname'

I earlier got it from fabulous blog but the link just didn't work. It had linked to this original blog which had very kindly posted such an awesome way to gave a blog archive. So to create my blog archive page I went into their how to create blog archive and Voila!
So if it doesn't work in this post also, chillax and visit the original page! It works!

It is so simple!  So damn simple! I just can't believe it still!  So,  I thought why not help everyone of you who like me are searching all over the Internet how to have a cool archive page.

Adding the basic blog archive widget to the sidebar is what we used to do when we were kids.  Right?

I mean who wants to know what you did in what month? Is it a treasure hunt? 

I don't know where blogger feedback department sleeps. Because they are obviously not improving. As the main blogger provided widgets are just where they were years ago,  one has to Google all over the world to find these really cool codes being given.

But I'm usually anxious on whether the code will work or not.  Especially ask me to go to edit html in template and I'm dead at finding the place where I should paste it. Trust me Blogger is not at all easy on an Android phone or an iPad!

So,  this was a flat 5 second way to get my blog archive page. I then designed a Hogwarts style graphic design to add some shimmer and glamour to my blog archive page.

The default code in this one has the links in your link color of your template and page text formatting along with the dates on the right in a different color.

I couldn't increase the line height. It looks a little packed,  I know. But don't you think it's awesome? Let me know what you think!

P.S: Talk to me, I'm right here. (Pls comment. Makes me feel great) Fb.com/Doveranalyst || Tweet @doveranalyst

Get Amazon INDIA Prime membership

or Audible here:

amazon.com Prime membership Or Audible Gift Membership