Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 30, 2007

Digg This Story

Add Scrollbars to Blog Widgets

This tutorial shows you how to create widgets or boxes with scrollbars. When the contents in the widget exceed a certain specified height or width, there will be a vertical or horizontal scrollbar to enable users to read the contents that overflow or exceed the box area. This scrolling element is especially useful for our Link List or Labels widget which may be very lengthy. It reduces the total height of the widget and yet allows readers the option of scrolling through and viewing the entire content. We shall discuss how to customize the template design to include the scrollbars and the various modifications that can be made to the stylesheet.

The “overflow” style property

Let us first explain what the code is about. We use the “overflow” property to create the scrollbars in CSS or the stylesheet. There are several values that can be assigned to it, although not all are useful for our purposes.

1. overflow:visible

This is the default value. The extra content is either rendered outside the box or the length of the box is extended to include the extra content. Don't bother to use this in Blogger blogs because you will see the contents of the widgets overlapped like this:-

Add Scrollbars to Blog Widgets

2. overflow:hidden

This will cut off the extra content that overflows and there will be no scrollbar to the box. It doesn't serve our purpose as well.

Add Scrollbars to Blog Widgets

3. overflow:scroll

The content is clipped but there will be scrollbars at the sides.

Add Scrollbars to Blog Widgets

4. overflow:auto

We like this attribute. Basically, it tells the browser to display a scrollbar only when necessary i.e., when the content overflows the width and height settings.

Add Scrollbars to Blog Widgets

Scrollbar in All Widgets

Now that we know what the code does, we can apply it to our template. If we have many widgets in our sidebar, we can specify a fixed height for all the widgets. Carefully planned, our layout can look very neat since all the widgets will have the same height.

Login and go to Template -> Edit HTML. Insert this piece of code. For easy reference, we have added it under the /* Sidebar Content */ :-

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


Add Scrollbars to Blog Widgets

In our example, we applied a height of 200px to the widgets. This can be changed to other values. Look at both sidebars. Notice the neatness and symmetry. Be careful though if you have AdSense Ads in the sidebars. It is against AdSense TOS to cut off the Ads and put scrollbars to their Ad Units.

Scrollbar in Widgets of One Sidebar

Let us assume for our discussion that you have modified your template to include an additional sidebar using our Three Column Template guides. We may have all the AdSense Ads in one sidebar and we want to add the scrollbars into the widgets of the other sidebar. The style that can be inserted into the template will be this:-

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


Or this:-

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


depending on which sidebar your widgets are at. Preview the template and if it is what you want, save the Template and refresh your Blog.

Scrollbar in One Widget only

We can add the scrollbar only to one or several of the widgets. To do that, we must first know the ID of the widget. When we are at Template -> Edit HTML, scroll towards the bottom of the template code. You will see something like this:-

<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>


In this example, we have added a Link List Page Element into our Sidebar and the ID for this widget is “Linklist1”. If we have more link lists, the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The third widget we added is a Label list and the ID is “Label1”. Look at your template and identify the widget. Take note of the widget ID.

With the ID, we can now add the overflow property into the stylesheet under /* Sidebar Content */:-

/* Sidebar Content */
#Label1{
height:200px;
overflow:auto;
}


Add Scrollbars to Blog Widgets

This will add the scroll-bar to the Labels widget only without affecting the other widgets. Insert the relevant ID of your widget into the portion shown in red.

Scrollbar in All Widgets except One

A further variation is to add scrollbars to all the Widgets except one or two. As mentioned earlier, AdSense widgets should not have scrollbars and it might be your intention to have scrollbars in the rest of the widgets.

Follow the guide above to insert scrollbars into all the widgets. After that for the ones that you do not want scrollbars to appear, specify a bigger value for the height:-

/* Sidebar Content */
#AdSense1{
height:600px;
}


For example, if your AdSense unit is a 160x600 Vertical Wide Banner, put the height of the widget as 600px. Since the contents fit nicely into this size, the scrollbars should not appear. Change the widget ID accordingly to point to the widget that you want to exclude and adjust the height value.

Scrollbar for Links and Labels

We need scrollbars usually for Label lists and Blogrolls created using Link lists because these are usually lengthy. You may have noticed that using the above codes, the entire widget is included in the scroll. Supposing we want the title to remain static and have a scrollbar only for the links or labels, we can insert a code as follows (remember to enter the relevant ID into the part shown in red):-

/* Sidebar Content */
#LinkList1 ul{
height:200px;
overflow:auto;
}


Add Scrollbars to Blog Widgets

Scrollbar for Blog Posts

Should you want the scrollbars for each of your blog posts, scroll to where you see this code and add the portion (shown in red):-

.post {
height:200px;
overflow:auto;
}


Scrollbar for text within Blog Posts

Perhaps you might not want to have scrollbars for all the Blog Posts, but only for a piece of text within a Blog Post. You can follow the steps in this guide to insert scrollbars to text within the post.

Scrollbar for Long Text

If you have a long piece of text like those found in the usual Terms of Service, User Agreements, Rules, Privacy Policy, etc., scrollbars will be very useful in minimizing the text area and yet allowing readers to view the full contents.

Under Template -> Edit HTML, /* Sidebar Content */ , define a class as follows:-

.scrollingtext {
height:200px;
width:200px;
border:0;
overflow:auto;
}


What we have done is to specify that the text will be contained in a box with scrollbars automatically added if the text overflows the 200px x 200px area. The values of the border, height and width can be changed to suit your needs.

We can now type the text. This text can either appear in a Blog Post, or as an element in the Template. If it is in a Blog Post, after you have typed the TEXT in the Post Editor, switch to “Edit HTML” mode and insert these tags (shown in blue):-

<div class="scrollingtext">TEXT</div>


The TEXT can be inserted directly into the template via Template -> Page Elements -> Text. Similarly, if you have typed it in the rich editor mode, you can click the “Edit HTML” link at the top right corner and insert the above tags.

After publishing the post or saving the page element, you will be able to see the TEXT within a box and the scrollbars automatically inserted.

Add Scrollbars to Blog Widgets

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

47 comments:

bizwhiz said...

Hi farvelcargo

You have posted a comment here which is a query relating to the Digg button code. I have therefore replied to you under that article.

ekgheiy said...

What if you want to add a sidebar to all except one or two widget(s)? Do you really have to change each widget, one by one? Or can you set the global template to scrollbars and then ID the one or two widget(s) to not have scrollbars?

bizwhiz said...

Hi ekgheiy

I have just inserted another section in the article to address your query. You may want to have a look.

ekgheiy said...

Thank you so much! This site is one big treasure chest. I appreciate all of your work here.

Thanks again!

Sue said...

Hello oh wise one!
Can I add you to my blog roll?
Sue

Anonymous said...

Hey your website looks impressive. I've browsed through most parts of it but can't seem to find a code that can allow the header image to be fixed at the top such that only the blog text is scrollable. Any ideas?

bizwhiz said...

Hi Anonymous

To have a scrollable blog text, insert this:-

#main-wrapper {
height:600px;
overflow:auto;
}

The Beading Gem said...

Tried to follow instructions to put scrollbar to my label widget. Where exactly do I put the code? When I put the #label1ul etc u suggest, I tried it after this line:
b:widget id='Label1' locked='false' title= etc which didn't work.

BlogmasterPg said...

Hi, how are you? Finally, after 6 months My ad-sense revenue becomes 100 $!!! That one thanks to your Blog-tips and thanks to my Italian Songs Blog; -but in the last 20 days I made others 60 $.... Now I read these 2 last article. I looking for a 'scrool bar' just for some times, for more than one of my Blogs. I think to add my older post. As you know i have 10 blogspot blogs and now i think that the bad things with Blogspot is the difficult to show to the users some old useful posts. In Italian songs I resolved by an 'link box', but it's not useful for me... If I'll have some difficults I'll re-write to you. Goodbye from Italy.

bizwhiz said...

Hi blogmasterpg - Keep the ball rolling.

Hi the beading gem - You can insert the code under /* Sidebar Content */ and you should see the scrollbars.

Anonymous said...

Very helpful site. Thank you. Could you possibly do a post showing how to add this scrollbar technique to blog posts?

luva79 said...

Hi, I tried to insert the scrollbar code for blogger to have it for each of my posts. I could not find the code .post anywhere. How do I insert this scroll bar within the body of my posts?

iEn said...

thanks for this tutorial.. it's working on my blog.. thanks :D

bizwhiz said...

Hi luva79

If you are using a Blogger template, you should see it. If you are using a template created by some other people or downloaded from third party sites, you may want to check with them on how your template can be modified.

Peter said...

Hi! I followed your tip with the code below and it worked. Thanking you so very much!!

The code is on my test blog.

BUT! I also have your recent comments widget. The code below changed the recents comments layout.

The icon next to the comment changed to a circle and all the text was pushed to the right.

Have I done something wrong or if not is there a work around for this error.


/* Sidebar Boxes
----------------------------------------------- */

.sidebar .widget {
margin:.5em 13px 1.25em;
padding:0 0px;
}

.widget-content {
margin-top: 0.5em;
}
#HTML12 ul{
height:100px;
overflow:auto;
}
#HTML10 ul{
height:100px;
overflow:auto;

Regards
Peter McCartney
Sydney Australia

bizwhiz said...

Hi Peter

I don't see a test blog in your profile. Anyway, you are talking about adding scrollbar to your Recent Comments widget. The code you inserted:-

#HTML12 ul{
height:100px;
overflow:auto;
}

is alright. Just see that you have the correct widget ID.

Peter said...

Sorry if I confused you. I don't want to add the scroll bar for your recent comments widget.

What I was trying to say, was that I added the code for two widgets not are not related to the recent comments widget.

It's just that after I added it to them, it changed your recent comments widge layout.

Regards
Peter

bizwhiz said...

You are saying that you added the 2 codes - #HTML12 and #HTML10 and it changed another unrelated widget? Have you tried taking out these 2 codes then and see whether you are correct in that the problem is with these 2?

Personally, I don't think these 2 codes are the cause. These codes merely add scrollbars at the side. They do not alter any other widget. My gut feel is that the problem is due to something else and only you know what else you did with your test blog before the problem occurred. I have no further comments on your questions.

Peter said...

Worked it out. I had a missing } at the end of the code.

All's well that ends well. Thanking you for your time.

Regards
Peter

Akilan said...

Hi.. I created a blog about one month ago.. I came across lot of blog tutorials.. I liked yours very much as it is very simple, neat and very clear.. hats off to you.. awesome work..

I have a question.. my blog is designed for 1024 by 768.. when I view my blog in resolutions less than that I want a horizontal scrollbar like your blog, so that my layout stays unchanged.. can you help me in this.. you can view my blog in my profile(only one is there)..

Maria Zain said...

Hi Bizwhiz,
Somehow I just can't get the scrollbar on widget function to work. All your under stuff works!

Do I add the whole code? Where? Under the */ of the section below? Here is the only place I see Sidebar Content in my html code. Please help!

/* Sidebar Content
----------------------------------------------- */

bizwhiz said...

Hi Maria Zain

Yes, you can place the code under that or anywhere else.

de naturaleza said...

Hii..., your post is very great, but i still find to put the scrollbar overflow in the right or left side of the body of scrollbar???... that in case your scrollbar is only in right of scrollbar body, i want get in left???how???, so my web can look a simetris...!!!

thank...

Roger said...

I was wondering if it is possible to combine the scrollbar feature with the marquee feature.

I'm wanting to add a scrollbar to my "New Book Releases" section on the sidebar of my blog:
http://bible-prophecy-today.blogspot.com

Can this be done?...and how?

Thanks for any help.

Roger

Peter said...

Hi! Just dropping by to say thank you for your continued support. I wish you and your family a Merry Christmas and a Happy New Year - Regards Peter.

Katelynian said...

I really appreciate your time making this site and sharing your expertise. I am, however, having a few problems with the blog scrolling window. I want to use the code you supplied in a reply, to make all of my posts in one giant scroll box
(#main-wrapper {
height:600px;
overflow:auto;
}) this code, to be specific.

I inserted where it needs to be and it cut my text off to my specifications but there is no scroll box. It's just all of my entries.. cut off at the designated length. Did I do something incorrect, or is it maybe not working with my layout (minima)? I understand that the page as a whole will scroll because of the length of my widgets, which are being changed as you read this, but my scroll bar is not showing in the entry area.

BB_ANNE said...

hi i tried pasting the code but to no avail, there has been no changes. I'm using a blogger template.what can I do?

Sheena Pimentel said...

thanks much! i finally got it. thanks. :)

ALEX said...

Hi dude, you are the ONE and ONLY source of real help I know for ANYTHING regarding blogger! Thanx for all the great advice!

I got a tricky question/problem...

In my blog, I use a random post generator.. I only want ONE post to show up everytime someone clicks on this generator... which worked fone so far..

Now, 4 days ago, I added the "addthis" little button, which shows up under each post.. all is good till now..

but.. as some of my posts are long, I found your article about scroll bars for post text.. which worked fine for the actual post, but DID not not work fine with the "addthis" button...

The problem is, that once I hover my mouse over the button, it pops out like its supposed to do, but.. the pop-out window is now located (on the screen) exactly where the post text would have finished IF THE SCROLL-BAR functionality DID NOT exist...!!!

confusing?

(by the way, the blog is "all Greek" to you, cause IT IS all Greek!)

http://testgiajokes.blogspot.com/

thanx

SA D. said...

Hi There,

I tried this but can't seem to get it to work. I'm a total newbe so that's probably the problem.

I pasted the following:

#LinkList1{
height:200px;
overflow:auto;
}

under the following:

/* Sidebar Content
----------------------------------------------- */


The changed the name LinkList1 to TextList1, which is the widget ID to which I want to add the scroll bar.

with no results.

Am I missing something?

Thanks,
Dave

Lara said...

Is it possible to change the color of the scrollbar? The blue-gray really clashes with my blog color scheme.

k_veer said...

Hi bizwhiz,I like your blog.can you help me, I recently change theme of my blog.But I want to change post right side to left side.can you help me . See my blog

http://forseekingattention.blogspot.com/

bokjae said...

Hi bizwhiz,

I cannot find the /* Sidebar Content
------------------------ */

Can I put the code under /* Sidebar Boxes
----------------------- */

Actually tried that but it does not work! Advise please!

Raj said...

Hi I really in need of this option to display my link list in Scroll Bar. But couldn't find out "/* Sidebar Content */" in my blog html. Please help me out

My blog is http://jothis4u.blogspot.com

Hoping for a reply
Raj

iliketo said...

Thanks, nice tutorial.

nsane5 said...

hey man, it didnt work the way it should be. somehow i can only scroll when the cursor almost reach the bottom or near the bottom. can u check whats wrong in my blog? im using the old templete. thanks before.
www.nsane5.blogspot.com

Berkemeijer said...

Thanks Great.

Scroll within widget with code:

#Label1 .widget-content{
height:200px;
overflow:auto;
}

Bye.

JoVie said...

hai...thx for ur tips.I will try this..

techniqueal techie said...

Very precise! You covered it all! Great tutorial! =)

Prnaing5254 said...

This is a very informative post and blog as a whole...I hope you continue to post blogging tips so help other bloggers, who are not well-versed with this hacks.

Thanks!

D.A.S. said...

Hi bizwhiz! Your blog has helped me a lot in improving my blogs, but now I have a problem I can't solve. I would like to change my template, but I have special formatting in the posts such as textarea type tags, link, etc. and I'm worried if the special formatting will be gone when I replace my template.Also how will I keep the widgets when I replace my template? thanks!

D.A.S. said...

Oh, I nearly forgot, there's one more problem I have. If I'm to put a scrollbar within my post that would contain a code like a blogger template, will it work and how? coz I tried it, but it didn't work for me.

Anonymous said...

I am not able to creat a box with scroll bar for the list of links i link to my blog. Can you still help??

Mexican Redhead said...

Hi there!

This blog has been a tremendous help to me. Thanks so much!

I have a problem: I'm trying to insert scrollable text on my sidebar which will enable someone to copy the text and use it to paste an html button on their site. The scroll is working great, but I can't seem to make the code stay "coded". It just inserts the button no matter how I try to add it. What am I missing? I'm sure it's something basic, but I'm just a newbie!

Any help is appreciated!!! :^)Thanks!

Yale Zeuqsalev said...

Hi!

Im using Blogger and I'm trying to put scroll bar in one of my sidebar widgets but I can't make it work.

You see, I don't have /* Sidebar Content */ in my HTML but I do have /* Sidebar Boxes
----------------------------------------------- */
I tried pasting the code after this but it doesn't work. pls help. Thanks

Insert Book Title Here said...

thank you! i finally got it working!

Connor said...

What if I just want a horizontal scrollbar without getting the vertical one. I'm trying to create a featured content widget of sorts so that I can post links with an image preview. I want it to run horizontally so it doesn't take up much space, but I can't figure out a way to do this. help?