How to add scrollbar to Blogger widgets ?

Many times we think how great it will be if we can add scrollbar to some widgets. Scrollbar can be really useful for any lists you want to show on your blog e.g. link-list, labels list etc.

Adding scrollbar to widgets reduces the total height (and also width if you want) of the widget, but still users can scroll down and view all the content in the widget. When the content in the widget exceeds certain width/height limit, there will be a horizontal/vertical scrollbar enabling users to view all the content.

Lets see how we can do this -

A. Add Scrollbar for all widgets (in both sidebars) -

STEP I - Goto > Dashboard > Layout > Edit HTML.

STEP II - Add this code in your template -

.sidebar .widget{
height:200px;
overflow:auto;
}

You can place this code anywhere above . But I will recommend you to place it below the sidebar section in your template for easy reference.

B . Add Scrollbar for widgets in one of the sidebars -

First of all you will have to find out, what's name of your sidebar where you want to add widget scrollbar e.g. lsidebar, rsidebar, newsidebar etc.(you can find this out by searching for 'sidebar' using 'Ctrl+F')

Now depending upon the name of your sidebar add this code instead of above -

#newsidebar .widget{
height:200px;
overflow:auto;
}

where 'newsidebar' is the name of your sidebar.(you should put your sidebar's name instead of 'newsidebar' in above code.)

I will recommend you to please PREVIEW your template before saving the changes.

C . Add Scrollbar for only one widget -

Every widget you add in your sidebar is alotted certain specific ID . Now you can find out the ID for your widget by looking for similar looking code in your template -

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='General' type='LinkList'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
</b:section>
</div>

Here you can see I have highlighted the ID for widgets in bold green.

After finding your widget's ID, add this code -

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

Replacing 'Label1 ' with your widget ID.

Now save the changes and check your blog.