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:-
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.
3. overflow:scroll
The content is clipped but there will be scrollbars at the sides.
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.
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; } |
|---|
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; } |
|---|
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; } |
|---|
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.
