26 August 2008

How to add scrollbar to Blogger widgets ?

Advertisements

Many times we think how great it will be if we can add scrollbar to some widgets. Scrollbar can be really useful for any lists you want to show on your blog e.g. link-list, labels list etc.

Adding scrollbar to widgets reduces the total height (and also width if you want) of the widget, but still users can scroll down and view all the content in the widget. When the content in the widget exceeds certain width/height limit, there will be a horizontal/vertical scrollbar enabling users to view all the content.

Be careful that you do not have AdSense Ads in the sidebars. It is against AdSense TOS.

Lets see how we can do this -

A. Add Scrollbar for all widgets (in both sidebars) -


STEP I - Goto > Dashboard > Layout > Edit HTML.

STEP II - Add this code in your template -

.sidebar .widget{
height:200px;
overflow:auto;
}
You can place this code anywhere above . But I will recommend you to place it below the sidebar section in your template for easy reference.

It will look like

/* Sidebar Content */
.sidebar .widget{
height:200px;
overflow:auto;
}

B . Add Scrollbar for widgets in one of the sidebars -

First of all you will have to find out, what's name of your sidebar where you want to add widget scrollbar e.g. lsidebar, rsidebar, newsidebar etc.(you can find this out by searching for 'sidebar' using 'Ctrl+F')

Now depending upon the name of your sidebar add this code instead of above -
#newsidebar .widget{
height:200px;
overflow:auto;
}
where 'newsidebar' is the name of your sidebar.(you should put your sidebar's name instead of 'newsidebar' in above code.)

I will recommend you to please PREVIEW your template before saving the changes.

C . Add Scrollbar for only one widget -

Every widget you add in your sidebar is alotted certain specific ID . Now you can find out the ID for your widget by looking for similar looking code in your template -
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='General' type='LinkList'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
</b:section>
</div>
Here you can see I have highlighted the ID for widgets in bold green.

After finding your widget's ID, add this code -
#Label1{
height:200px;
overflow:auto;
}
Replacing 'Label1 ' with your widget ID.

Now save the changes and check your blog.

NOTE:  If you don't want to include the widget title in scrollbar, add 'ul' tag as shown below. (Thanks to Emzkie, for this valuable suggestion)

#Label1 ul{
height:200px;
overflow:auto;
}

Related Posts

21 comments

September 10, 2008 at 7:30 AM

Brilliant!

I've just implemented it on my blog, a nice addition, makes it feel more like a 'community'. Thanks for this addition. I've added your blog to my Reader - love it!

Cheers,

June 10, 2009 at 9:01 AM

Thank your for this code, i've tried it and it worked but i got one question...how to not include the sidebar header inside the scrolled bar?.

thank you again...God Bless!

June 11, 2009 at 1:05 AM

Hi Karen
Did you mean heading of gadget/widget?

July 27, 2009 at 2:33 AM

Hi There,

Thanks for this tip. It worked for me. I have the same question as Karen.

After implementing the code, I noticed that my section title (Blog Roll) is included in the scroll bar. How can I fix that?

Thanks again!

July 30, 2009 at 7:52 AM

@ nicquee
Give URL of your site

September 12, 2009 at 8:10 AM

hello. i got the same problem too. my widget name scrolls along with my list. how can i fix it?
my url is http://www.jazthe3ofus.com

September 12, 2009 at 8:23 AM

i got it! u have to put a ul after the widget id.
like ..

#Label1 ul{
height:200px;
overflow:auto;
}

thanks for the tip!

September 13, 2009 at 1:19 AM

@ Emzkie

THANKS MAn!

November 12, 2009 at 2:57 PM

Feeling really stupid - where does the go? In the widget html or elsewhere in the code?

#Label1 ul{
height:200px;
overflow:auto;
}

November 12, 2009 at 3:27 PM

Never mind, figured it out - do you know to put the scroll on the left side of the post instead of the right?

November 12, 2009 at 7:23 PM

well I don't think we can show the scrollbars on left rather than right side.

January 13, 2010 at 10:05 PM

how to add the code.where to place it in the template??

January 14, 2010 at 12:23 AM

where you want to add scroll some specific widgets or left/right sidebar?

January 14, 2010 at 4:58 AM

Thats really easy way. it worked for me too. Do u have any idea how i can classify the labels? and for each class i want to create dropdown menu. Plz help.

January 18, 2010 at 12:51 AM

Hi SHAILABH

Here is what you want

http://free-blogger-help.blogspot.com/2010/01/how-to-add-classified-labels-sub-labels.html

April 11, 2010 at 9:57 PM

It is not working for my Blog...

my URL: http://idealhub.blogspot.com/

can u please tell me how to use it.

also though i have selected 8 posts to be displayed per page, only 4 are being displayed. suggest me how to display 8.

April 12, 2010 at 1:01 AM

@ DC

You need to find correct sidebar name as described in step 2.

If you want to display 8 pages on main/home page go to Settings > Formatting And choose 8 post in "Show at most" option.

November 6, 2011 at 5:11 AM

nice!. i like this tutorial.. Thank's.. [^^,]

March 28, 2012 at 7:08 AM

Is there any way to put scrollbar in comment... The number of comments in some of my pages are too much... It would be great if I can add a scroll bar to the comments section...

March 28, 2012 at 9:25 PM

Hi Rakesh Jhunjhunwala
I am working on It and will post a solution on Friday/Saturday as a full post...Keep in touch.

February 27, 2013 at 3:48 PM

I'm looking for a scroll that can be updated with random text and or links... Anything like that? Thx

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More