Adding Scroll Box To Widgets/Gadgets

Sometimes you don't want to have a homepage that scrolls for miles. This can slow down loading time and make you blog look unprofessional. So the solution to this is to add a scroll effect to the sidebar widget/gadgets. This allowing the widget/gadgets to scroll instead of your whole page.




1. Locate your Gadget ID#
2. Go to Design--> Template Designer--> Advanced--> Add CSS--> Input code below
#GadgetID .widget-content {
height: 400px;
overflow: auto;
}


4. Replace the GadgetID with the one you just found in step 1
5. Change the height size to whatever you want.


After your done it should look something like this.
#LinkList2 .widget-content {
height: 400px;
overflow: auto;
}


(Optional )
You can add something to change the colors of the scroll bar but this only works in Internet Explorer.  All other browsers will just display as your normal gray scroll box.  


To add color effects to the scroll bar just add this code below just below the  overflow: auto;


scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#000000; 
scrollbar-base-color:#00ff00; 
scrollbar-darkshadow-color:green; 
scrollbar-face-color:00ff00; 
scrollbar-highlight-color:lime; 
scrollbar-shadow-color:lime; 




Example:


#LinkList2 .widget-content {
height: 400px;
overflow: auto;
scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#00ff00;
scrollbar-darkshadow-color:green;
scrollbar-face-color:00ff00;
scrollbar-highlight-color:lime;
scrollbar-shadow-color:lime;
}


Just play around with the colors to get them to your liking.