Customized Archive Gadget (Blogger)

archive-gadgetb

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:

archivetest

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: http://www.huecode.com/

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

53 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 > a.post-count-link

      Welcome!

  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 :-)
    H

  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.

    -Cassidy

  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 http://mccraryandco.blogspot.com/

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

    1. Ok after posting the comment I see that the codes are not displayed correctly so if anyone wants to use it please grab it directly from the websites I have listed.

  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.

  16. Great customization tip for blogger archive. I love you website theme as well. Looks clean and very modern. Love it! I ran into a small problem though while trying to implement the code. I installed the fontawesome icons and the css code in the and css section respectively but my blog was still showing f105 and f107. After some digging around I found out that I had add ‘\’ infront of f105 and f107 (‘\f105’ and ‘\f107’) to display the icons! Other than this the code is flawless and simple beautiful. Thanks a lot. :)

    1. Ok Grammarly screwed up my English… I swear my English is not that bad! Basically what I was trying to say is that you have to add ‘\’ before the fontawesome code to actually show the icons. Otherwise they will just show the unicode (eg f107) of the fontawesome icon.

        1. I can’t get it done no matter how hard i try. I keep messing around with a.toggle and it does change the background colour of the year count but then it does not show any text ( year count). I tried changing the font colour using the color property. I managed to change the font colour normally but on hover nothing can be seen!. :(

  17. where to paste the coding
    #ArchiveList ul > li > a.post-count-link {
    font-size: 18px;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    line-height: 38px;
    background-color: #F5F5F5;
    box-sizing: border-box;
    letter-spacing: 1px;
    }

    /* Archive Month Header */
    #ArchiveList ul ul li a.post-count-link{
    font-size: inherit;
    width: auto;
    margin: 0 5px 0;
    padding: 8px 25px;
    line-height: 1;
    background: transparent;
    text-transform: uppercase;
    }

    #ArchiveList .zippy{
    visibility: hidden;
    }

    #ArchiveList ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 38px;
    z-index: 5;
    }

    #ArchiveList ul ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 24px;
    display: block;
    z-index: 0;
    }

    #ArchiveList .toggle {
    position: relative;
    }

    #ArchiveList ul ul .zippy{
    color: white;
    visibility: visible;
    text-shadow: none;
    }

    #ArchiveList ul ul .zippy:before {
    content: ‘\f105’;
    font-family: FontAwesome;
    position: absolute;
    top: 3px;
    left: 12px;
    padding: 4px;
    line-height: 1;
    font-size: 12px;
    color: #8C8C8C;
    }

    #ArchiveList ul ul .toggle-open:before {
    content: ‘\f107’;
    position: absolute;
    top: 3px;
    left: 10px;
    }

    #ArchiveList ul li{
    padding: 0 !important;
    text-indent: 0 !important;
    margin: 0 !important;
    position: relative;
    }

    #ArchiveList ul .post-count-link {
    padding: 10px 0;
    display: inline-block;
    margin: 0 5px 0;
    }

    #ArchiveList ul ul .posts li {
    margin: 0px 10px 10px 30px !important;
    text-transform: none;
    }

    #ArchiveList ul {
    margin: 0 0 2px !important;
    }

    span.post-count {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #8C8C8C;
    }

  18. Hi Stephanie, nice stuff, but i have request, it is possible the archive blog can show just year? I mean not auto scrolling down when website open up, otherwise when you click it, sorry my bad english

    regards
    Rizky