4 Nov 2014

How Can You Style the Blog Archive Widget With Scrollbar

On In , 3 Comments
Scrollable Blog Archive widget by Anjana
The Blog Archive widget is one of Blogger's official widgets. The only problem with the default Blog Archive widget is that it will take up a large space when you have many number of posts on your blog. Here comes the need of a scrollable Blog Archive widget. Pure CSS is used to style this widget. Here I have used the Flat-List style.
Step 1: Adding the Blog Archive Widget to Your Blog

Go to your Blog's Dashboard --> Layout--> Add a Gadget and select Blog Archive from the list.
configuring the blog archive widget by Anjana

Don't forget to select Flat List Style. Select the Date Format you prefer from the drop down list and save the Gadget.

Step II: Replacing the Default CSS (If you are using Simple or Travel Template, ignore Step II and go to Step III)

From your Blog's Dashboard, navigate to Template. Click on the Backup/Restore button on top right and take a backup of the template. Now click Edit HTML.

(i): Press Ctrl+F and search for "Archive". You may find the below code:

.main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {code}

Please be careful while editing the template. We need to delete the part ", .main-inner .widget #ArchiveList ul.flat" from the above code.

(ii) Now you could see another code which look like the below one:

.main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {code}

Carefully delete ", .main-inner .widget #ArchiveList ul.flat li" from the above code.

(iii) Press Ctrl+F and search for ".main-inner .widget #ArchiveList ul li". You may find something similar to the below code (Only some templates have this code):

.main-inner .widget #ArchiveList ul li {padding-top: .25em; padding-bottom: .25em;}

Delete the above code.

Step III: Adding CSS

Okay. Now Press Ctrl+F and search for "]]></b:skin>". Add the below code above "]]></b:skin>".

.BlogArchive .widget-content {margin:0; padding:0;}
.BlogArchive #ArchiveList {height: 142px; overflow: auto;}
.main-inner .widget #ArchiveList {margin: 0; padding:0; border: 1px ridge #999;}
.BlogArchive #ArchiveList ul{margin:0; padding:8px 8px 0 8px;}
.main-inner .widget #ArchiveList ul.flat li {padding:8px 0 8px 0;}
.main-inner .widget #ArchiveList ul.flat li a {font:14px Verdana; text-decoration:none; color:#666;}

Now Save the Template.


  1. Thanks............
    I use it on http://cstufians.blogspot.com/

  2. Nice Article, Greetings from http://theofficialtech.com/