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.

tallest widget1
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!

32 comments to "Put a widget inside a scroll box"

Nazz January 24, 2010 at 10:05 AM    

oh.. thank you..

Nick Jackson April 30, 2010 at 12:22 PM    

This is a great post. It is exactly what I wanted to do with all of my posts. The scroll bar works great. Thanks!

Greenlava April 30, 2010 at 2:08 PM    

@Nazz
@Nick Jackson
You're welcome.
Click All Posts tab to see more tutorials.

Nick Jackson May 15, 2010 at 12:19 AM    

What would have to do to place multiplewidgets within a scroll box? Thanks again.

Greenlava May 15, 2010 at 10:24 AM    

@Nick Jackson
Use section Id instead of widget Id. The link in step 2 will show you how to find it.

TANN May 25, 2010 at 4:03 PM    

Hi Greenlava
I have set up a new blog (http://archaeologynewsnetwork.blogspot.com/) and I have a couple of queries...
1) I have placed the post title list widget in the pages element (All Posts) found under the blog title. It works very well but it is really getting quite long now. My question: Where do I find the section id for this page element so I can put it all in a scroll box?
2) I would like to create separate page elements listing post titles under specific criteria such as contintents (Europe, Asia etc).. Is it possible to create post title widgets like this?

Greenlava May 25, 2010 at 5:47 PM    

@IoanG
Hey it's been a while, welcome back
1. The list is technically in a "post", so it doesn't have a widget ID. Do this instead, put the whole code in a div tag and apply the scrollbox code to it:
[div style='height:400px;overflow:auto;']
PUT THE EXISTING POST TITLE LISTING CODE HERE
[/div]
2. The this tutorial is just for you How to list recent posts by label

TANN May 25, 2010 at 5:52 PM    

O.K. Thankyou for the advice Greenie ... it is much appreciated!!!

Sandy June 17, 2010 at 10:09 PM    

This post was very helpful :).

Kay September 19, 2010 at 8:16 PM    

Thank you so much! My blog list has been getting longer and longer and now it is all under control!

Anonymous,  October 6, 2010 at 12:40 PM    

If I wanted to put my ENTIRE blog post in a scroll box, do I treat it like a widget as well? Because I tried this code

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

and it still doesn't work at all. Any help?

Greenlava October 6, 2010 at 1:44 PM    

@Anonymous
Try replacing #YourWidgetId with #Blog1

Gee November 24, 2010 at 6:19 PM    

u r great!!! I'm so glad stumble into yr site!

Greenlava November 24, 2010 at 11:12 PM    

@DearCats
Hey, welcome...don't forget to bookmark and subscribe :)

Margaret Duarte December 23, 2010 at 1:32 AM    

Thanks so much. I've been wanting to do this for a long time. I was scared to death, but saved my template first (just in case) and then proceeded with caution. It worked!

Margaret Duarte January 12, 2011 at 4:26 AM    

My post title list/scroll box has been working perfectly since December. I plan to post an article about it on my blog tommorrow and direct my readers your way. However, right now there's a big blank where my post title list/scroll box is supposed to be. Why did it disappear? Will it come back before tommorrow's post?

Greenlava January 12, 2011 at 9:08 AM    

@Margaret Duarte
That must be caused by Yahoo pipe. I'm sure it will return to normal in a few hours.

Anonymous,  January 25, 2011 at 5:48 AM    

The code works great, but doesn't work with blog posts, which require a lot of scrolling in my page. I even replaced the widget id with #Blog1 and still nothing. Any advice?
Thanks!

Greenlava January 25, 2011 at 6:11 PM    

@Marcos Morales
For blog widget, you need to get rid of ".widget-content", like this:
#Blog1 {
height: 200px;
overflow: auto;
}

Anonymous,  January 27, 2011 at 5:57 AM    

It worked! Thank you so much! :D

Greenlava February 11, 2011 at 10:27 AM    

@Luvmysibes
Do you want the put the list in this page into a scroll box?
http://luvmysibes.blogspot.com/p/all-posts.html

To do that:
1. Go to Posting > Edit Pages to edit the page.
2. Add this code at the beginning of the page's content:
[style type='text/css']
.post-body ul {
height: 200px;
overflow: auto;
}
[/style]

nandu March 21, 2011 at 10:05 PM    

hi i gone thourgh your advice and posted ur code in my blog design html but still my blogs are not getting scroll bar plz help me... my blog is
http://nandana-dotnethelp.blogspot.com

plzz help me my blogs become so lengthy

Greenlava March 22, 2011 at 8:45 AM    

@nandu
I see you've managed to fix that by yourself :)

Infotainment Lounge October 10, 2011 at 8:33 AM    

I have memorized all the steps. I hope I won't go wrong with widget. Thanks for sharing much needed information.

www.toko-onlineblogspot.info October 22, 2011 at 8:19 AM    

Thanks master. You give me a light. Thanks.

The Circus December 3, 2011 at 3:43 AM    

Thanks for this! I wonder if there's a way to do it to the blog post widget too? Not just the list widgets? I tried it for my blog list and the scroll box appeared, but the blog list stayed the same layed out underneath it.

Greenlava December 3, 2011 at 9:07 AM    

@The Circus
Are you referring to the blog archive widget?
Replace your current codee, which is this:
#BlogList2Blo .widget-content {
height: 400px;
overflow: auto;
}

with this:
#BlogArchive1 .widget-content {
height: 400px;
overflow: auto;
}

Pastaarj February 10, 2012 at 2:03 AM    

Hi! Thanks for all the infos you share!
I 've read all comments but i didn't found how to put a post list, witch is on a static page, into a scrollbox.
Thanks for your help

Greenlava February 13, 2012 at 11:56 AM    

@Pastaarj
Open the page in post editor, switch to HTML mode and put this code at the top of the content:
<style type="text/css">
.post-body {
height: 200px;
overflow: auto;
}
</style>

refer to Apply different layout/styling to static pages for details.

prasanth March 1, 2012 at 12:05 PM    

dear friend i put the code at the top of the ]]> it didn't come. after that i put the code below the ]]> but it's still not coming in scroll bar........ plz help. my blog is cyberfinger.blogspot.in

kindly help me

Jen T March 12, 2012 at 6:50 PM    

This is wonderful, thank you so much!! Everything was perfectly clear and easy to follow, and it worked perfectly, even though I had no clue what a template was and have never before tried to edit it (have now saved it!)

I have always been annoyed by Blogger's monthly archiving, as I didn't care about dates and just wanted titles.

Btw, is there a code for reversing the chrono order? (i.e. newest first?)

Chicago Bike Finders July 27, 2012 at 4:25 PM    

You guys are amazing. Thanks for keeping the instructions simple! :)

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.