Put a widget inside a scroll box

My Tall Widget

With this CSS code, a scroll bar is automatically added if widget content exceeds the set height.

Scroll to see the rest of the content.

You've reached the end of the content.
Oh about the picture. See the tower next to Burj Khalifa? That could be your BlogList in a couple of years. So better put it in a scroll-box now :)

Has your BlogList grown so tall that it’s beginning to wear down your readers? Making them click the scrollbar over and over again just to view the next widget?

If you do, then it’s about time you stop it from testing your readers’ patience and taking over your blog valuable screen space. Put tall widgets where they belong -inside a scroll box.

This tutorial will place your widget content in a scroll box. The title will be held static, visible at all times.

 

Let us begin,

1. Identify which widget is going into a scroll box.
2. Find the widget ID.
3. Go back to Dashboard > Design > Edit HTML. Find this line of code in your template:

   ]]></b:skin>

4. Add the code below right before (above) the line.

   /* Scroll box by BloggerSentral.com START */
   #YourWidgetId .widget-content {
   height: 200px;
   overflow: auto;
   }
   /* Scroll box END */

   • Replace YourWidgetId with the widget ID you’ve got in step 1. (You can also replace the whole selector with any element ID and this code will put that element in a scroll box).
   • Change height as you like.

Here’s a live example -a Post Title List widget in my Blogger Widget Showcase blog.

Enjoy!