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.
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.
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.
go to blogger Template> Edit HTML> Search for ]]><b:skin> and about this paste the below code
/* Archive Year Header */#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;}
And that�s it! Let me know if you have any questions in the comments :)
