Scrollbar in One Widget

We can add the scrollbar only to one or several of the widgets. To do that, we 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:-

<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>

In this example, we have added a Label1 Page Element into our Sidebar and the ID for this widget is “Label1”. If we have more link lists, the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The third widget we added is a Label list and the ID is “Label1”. Look at your template and identify the widget. Take note of the widget ID.

Now add the overflow property into the stylesheet under /* Sidebar Content */ . Insert this piece of code.

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

In this example, we applied a height of 200px to the widgets. This can be changed to other values. Look at both sidebars. Notice the neatness and symmetry. Be careful though if you have AdSense Ads in the sidebars. It is against AdSense TOS to cut off the Ads and put scrollbars to their Ad Units.

/* Sidebar Content ----------------------------------------------- */ #Label1{ height:200px; overflow:auto; } .sidebar { color: $sidebartextcolor; line-height: 1.5em; }