Translate This Blog
Always Remember To Back Up Your Template Before Attempting Any Of The Tweaks On This Site

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.

6 comments:

  1. Tried on my blog (PopularPost), but on IE it didn't work quite well. Some image thumbnail came out of the scroll box. Just undo the css adding.

    ReplyDelete
  2. I never tried it with a popular post gadget but I will look into it.

    ReplyDelete
  3. I got it, unchecked image thumbnail and it works perfectly without thumbnails. Thanks for the code

    ReplyDelete
  4. Thanks for the heads up!

    ReplyDelete
  5. BlogWalking, Thanks for this Tips, Nice Blog.

    ReplyDelete
  6. Wow - i found your blog last night - thanks for this great tip!

    ReplyDelete

Web Design Blogs PageRank