Customized Archive Gadget (Blogger)


Do you ever feel limited with Blogger? Like you can’t have all the cool stuff? Well, hopefully today I can help you feel a little more content with Blogger. Customizing for Blogger isn’t always easy, especially when the code is created “behind the scenes” so you can’t really change the HTML.

If you’ve been following Ashley@NoseGraze, you’ll know that she recently released a new expanding archive widget for WordPress! IT IS SO COOL. I was envious of the archive widget she had on her blog for the longest time! SO happy that she released it to all of us :) Unfortunately, I can’t make the Blogger archive gadget as cool as Ashley’s, but it’s pretty close. Here’s what it looks like on a default design test blog:


The blue color shown above will automatically change based on what the link colors are set for in your blog. By default, I made the background of the year header, light grey. If you want to change that, you’ll need to edit the background-color in the very first style (right now it’s #F5F5F5).

You can choose a color here:

If you want to leave the year header background color as light grey, then you don’t need to change anything in the CSS.

funny cat

Cat Tip!

Before we get started, make sure you have this line of code in the head tag section of your template (it’s Font Awesome)
That line of code will make the arrows appear in your archive.

Finally! Here’s the CSS we will be working with. If you’re not sure how to add CSS to your blog, follow this tutorial.

And that’s it! Let me know if you have any questions in the comments :)

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

33 thoughts on “Customized Archive Gadget (Blogger)

  1. This is so helpful! I’ve been looking for a tutorial like this for a long time now. I saw the archives on some WordPress blogs before and I was hoping there was a way for Blogger ones. The styling of these ones is much more elegant than the given archives. Thank you!

  2. Hi Stephanie! I love the tutorial, but I was wondering if there was a way to make the year post count a different color than the month post count. Like I want the part that says 2015 (1) to be white, but if I make it white, you can’t see the post counts for the months. Does that kind of make sense? Sorry if I’m being a bit unclear.

  3. Hi Stephanie, I’m also a Stephanie :) Thank you so much for this neat code, I am in nerdy love with it :) I tried changing absolutely minor things, but didn’t succeed completely :,D

    1) I tried to make the year italic, but despite the fact that I added an extra font style to the months only, I cannot prevent that the months are displayed italic, too. What is my mistake?

    2) Where do I change the grey bar’s height?

    By the way – I am so happy that i looks awesome on smartphone, too <3 Thank you very much!

    1. Hi Stephanie ;D

      1) You are very close! The only problem is that font-style: none is not a valid value for font-style. Just do font-style: normal !important;

      2) Increase the line height in the CSS for: #ArchiveList ul > li >


  4. Hi Stephanie! I am sorry to sound like such a newbie to coding but I have pretty much taught it to myself so there are gaps in my knowledge. I am struggling with where to put this CSS in my html. I read your other post about CSS, but I am unsure wether to delete the previous archive list from the layout bit or the html bit, or where to paste the code at all! I would very much appreciate your help. Thank you :-)

  5. Umm, Nopers. I even tried replacing all the number signs (Hashes) w/ periods.

    How might I go about porting this over to HTML and adding it as an independent widget on my sidebar? [I don’t know how to code, basically because I don’t have the time to learn a new language on the side. So all of my stuffs are things that other people have created. I’ve googled every trick I’ve learned so far.]

  6. Alright! I tweaked a little bit more and managed it. I guess I’ve learned more than I thought. But umm… now I only need to figure out those DAMN triangles things.

  7. Hi! I tried this but I’m so new to CSS and HTML that I don’t know where that little line of code is supposed to be! I don’t know which is the head tag section of my template (I know, silly, but I can’t find it!!)
    Thanks so much for your helpful posts!!

  8. Thank you so much for this tutorial! I really love it and I’m now using it for my blog. I’m not an expert when it comes to coding so I was wondering if I can change the arrangement of months from ascending to descending (January-December to December-January).

  9. Hello! This post was just lovely, you really have an eye when it comes to design. This helped me a bunch but I was wondering whether there’s a way just to change the 2015(1) thing? I did see that someone already asked that but for some reason all the code did was change the post counts.


  10. how did you make that social media shares that sticks at the bottom of the screen? and the comment section? and the tab at the top (home, about)? and how did you enable the “continue reading” on post in your home? please make tutorials on that.

    btw, i love your blog. its really helpful :)

  11. Thanks so much for the tutorial! It was so easy. I’m working on a blog design for a friend of mine and ran into a tiny error. When I view the archive on her page, it shows an open archive (so I can see the different months). I’d like each year to be closed so then people have to click on the year to search the archives.

    Does that make sense? The blog is

    I’m sure it’s something I’m doing wrong, but I’m not a great coder… :)

  12. Worked like a charm. Thank you so much. Now if I can only figure out how to do this (name, email, website and comment) to my blog, I will be happy as pie!!

  13. Hello Stephanie,

    Thank you for the lovely tutorial, I’ve been looking for a way to customize it.
    It will be great for readers to have access to the archives.
    Have a great week!

  14. It was taking me a while to figure out why it wouldn’t work. Until I realised that you never said which setting the Archive gadget had to be on, and I had been under the impression that it was a drop down menu. So, after adjusting it to the Hierarchy setting, it now works! Thanks for the tutorial!

    Stephii Mattea

  15. Hello! Thank you for posting this awesome tutorial!

    I am trying to figure out why I’m getting f107 instead of the cute arrow button. I have pasted the code into the head tag section of my template, but can not get the arrow to show up! Everything else looks just perfect. Any suggestions?

    1. If you’re seeing the f107 then it is because the font awesome isn’t being loaded into your blog. I guess double check to make sure that the line of code is within the opening and closing HEAD tags (not header) . I checked your blog but I think you took it out because I don’t see the CSS there right now either.