Customize Blog Archive Widget With Scrollbar

How Can You Style the Blog Archive Widget With Scrollbar

Scrollable Blog Archive widget by Anjana
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.
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, 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...

0 Response to "Customize Blog Archive Widget With Scrollbar"

Post a comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel