Scrollbars in yours widget box

This tutorial shows you how to create widgets or boxes with scrollbars. Now that we know what the code does, we can apply it to our template. If we have many widgets in our sidebar, we can specify a fixed height for all the widgets. Carefully planned, our layout can look very neat since all the widgets will have the same height.

Login and go to Template -> Edit HTML. Insert this piece of code. For easy reference, we have added it under the /* Sidebar Content */(see pictures):

The code is :

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

With this codes all your widget in sidebar should be setting in scrollbar.

Single widget code scrollbar.

We can add the scrollbar only to one or several of the widgets. If you want, choose specific widget to scroll, just follow this instructions.

must first know the ID of the widget. When we are at Template -> Edit HTML, scroll towards the bottom of the template code. You will see something like this:-

Look at your template and identify the widget. Take note of the widget ID and change the highlighted red codes with yours new widget id including additional sign "#":

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

examples:

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

Blog examples: