Put A Widget Inside A Scroll Box

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.
   view sourceprint?

   1	/* Scroll box by BloggerSentral.com START */

   2	#YourWidgetId .widget-content {

   3	height: 200px;

   4	overflow: auto;

   5

   }

   6	/* 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.