Sunday, 6 August 2017

Adding Scroll Bars To Your Sidebars

We can add scroll bar to some widgets to save some space on our blog. Scroll bar is particularly useful if you have a long link list, blog roll or blog archive. Adding scroll bar to widgets saves space but the content remains intact. If the widget size exceeds the maximum specified height, a vertical scroll bar would be added .

Here are the various ways in which you can add scroll bar to your sidebar depending on your need:


A. Adding Scroll bar Option for all widgets

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

STEP II - Add the following code in your template immediately after sidebar content(use Ctrl+F and search for sidebar content) -

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

B . Add Scroll bar Option for all widgets in one of the sidebars -
Find out the name of the sidebar in which you want to add scroll bar e.g. lsidebar, rsidebar(Use Ctrl+F to find the name of sidebar).

Now depending upon the name of your sidebar add this code instead of above -
sidebar .widget
{
height:200px;
overflow:auto;
}

where 'lsidebar' is the name of your sidebar.(you should put your sidebar's name instead of 'lsidebar' in above code.)
C . Add Scrollbar for only a specific widget -

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

Here LinkList1,HTML1,Label1 are the name of specific widgets.
After finding your widget's ID, add this code below sidebar content -

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

Replacing 'Label1 ' with your widget ID.

No comments:

Post a Comment