23 April 2009

How to Add Scrollbars to Blog Widgets

Thursday, April 23, 2009
I have been seeing a lot of blogs with scroll bar blog lists and wanted to apply one of my own to add the First Commenters Club Blogroll, which includes many members. Displaying them all with the usual Blog List widget would take a lot of space. So I searched the Web and finally came upon this great link here "Tips for New Bloggers: Add Scrollbars to Blog Widgets". It is a very comprehensive post about adding scroll bars to your blog and discusses various options for you. I would like to give my high appreciations to the owner of this blog. Thank you.

Since I only wanted to apply the scroll bar for one particular blog list widget, this is what I did based on the given post instructions:

Click Customize --> Add Gadget in Page Elements (Layout) --> Create Blog List --> Save. Then click Edit HTML in Layout --> Checklist Expand Widget Templates --> search First Commenters Bloglist with Find in the Edit Menu of the browser --> identify and take a note of the widget ID --> search /* Sidebar with Find in the Edit Menu of the browser (Note: The original post refers to /* Sidebar Content /*, which turned out as /* Sidebar Boxes /* in my template) --> Copy and add the given overflow property into the stylesheet:

#Label1{
height:200px;
overflow:auto;
}

Change Label1 with the previous noted widget ID (In my case it was Bloglist8, and I also reduced the scroll bar height to my preference) --> Click preview to make sure everything looks like intended --> Save.

Happy trying!

2 appreciated note(s):

Mariuca said...

chop!

Mariuca said...

Morning dearie, I use this code to for my scrollbars, good post! :)