Customize Blog Archive Widget With Scrollbar

How Can You Style the Blog Archive Widget With Scrollbar

The Blog Document gadget is one of Blogger's legitimate gadgets. The main issue with the default Blog File gadget is that it will take up an extensive space when you have many number of posts on your blog. Here comes the need of a scrollable Blog Chronicle gadget. Immaculate CSS is utilized to style this gadget. Here I have utilized the Level Rundown 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.

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, explore to Layout. Tap on the Reinforcement/Reestablish catch on upper right and take a reinforcement of the layout. Presently click Alter 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.

Done. I hope this article be help you. Please share ya...