How to get automatic blog archive page in Blogger in 5 seconds

UPDATE: This is the new code post for https

At the end of this post is what ONLY WORKS for blogs that have not been updated to https.

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

Here's my Archive page, of all stuff I've written live here. You can see it to check how it feels. I got the code from sarah. There's another version of this code at this site. 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 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) The <> SYMBOL next to publish arrow in New Blogger Draft.
  5. COPY the code
  6. Edit the part in Purple (https://doveranalyst.com) to your website code, which could be something like doveranalyst.blogspot.com if you have not changed to a custom domain Update: This time I didn't have to add my website address anywhere. I just customized the color (white (#ffff) for the date as I've a dark theme.
  7. Paste the code to NOTEPAD to remove all possible formatting.
  8. ENSURE you do NOTHING (nothing means nothing), between PASTING THE CODE, and hitting publish

NEW CODE  for https Updated May 2020


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

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 MS Word or 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

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>

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) 
  5. COPY the code
  6. Edit the part in Purple (https://doveranalyst.com) to your website code, which could be something like doveranalyst.blogspot.com if you have not changed to a custom domain
  7. ENSURE you do NOTHING (nothing means nothing), between PASTING THE CODE, and hitting publish
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