Sunday, 20 December 2015

Customized Archive widget (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.
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.
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 > { 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{ 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;} { position: absolute; right: 10px; top: 10px; color: #8C8C8C;}

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

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks