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

UPDATE Feb 2019:

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

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.


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 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 {
     font-size: 15px;
     font-family: Arial, sans-serif;
     margin: 0;

.dayStyle {
     font-family: Arial, sans-serif;
     display: inline-block;

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)


  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 gicing 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 for you, that you need to find and replace.
  2. Now, initially, I only put and it didn't work. So, I felt maybe it does not work for custom domains and only for blogger domains. But, I had left typing the http:// before my URL.
  3. 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 alreadyy published ARCHIVE page, if you'd one published like mine. It won't work in the update thing. Every time you make a mistake, you've to REVERT TO DRAFT and then hit fresh Publish to make the code work.
Ok, now that you know everything, you can look at the code below.

Code Successfully implemented on (check before implementing):



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

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) 

  2. And hit publish and you are done! Hurray! 

For example,  if your blog name is,  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) || Tweet @doveranalyst


Payment options
Would you leave a note?

Pls Contribute

Pls Contribute