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



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.

Read more >>

Add Page Element to Blogger Header and Blog Posts

You would notice under Template -> Page Elements that there are options to add a Page Element to the sidebar and the footer. However, there is none for the Header and Blog Posts. Having a Page Element option to these latter two is useful. You may want to add a picture at the top, or a Google Adsense ad at the top or bottom of your blog posts.

To have an “Add a Page Element” option, under “Template”, click “Edit HTML”. Scroll down and towards the bottom, you will see these lines:-

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Change them to this:-

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

This will give you 2 more page elements that you can add to your Header. You can increase this number if you want.

Right after that are these lines:-

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'>

Change them to this:-

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='yes'>

You are now able to add Page Elements either before or after your Blog Posts.



Note:

1. In different templates, the 'header-wrapper' may be called 'header-wrap' or 'header' and so on. Scroll to where you see an option called showaddelement and you can probably figure out the rest.

2. We realized that in some templates like the Dots Template, there is no separate Header at the top. Instead, the Header is contained in the left sidebar and the main posts appear on the right. This is the template layout and it is probably the reason for your choosing this design. In such templates, you can Add Page Elements to the 'main-wrapper' but not at the Header. Nevertheless, you can still look at the guidelines below to Add Page Elements in the 'crosscol-wrapper' part of the template. This will give you the option to Add Page Elements right on top of both the sidebar and main posts. You can upload images, insert AdSense code, text or other scripts into this section.

Update:

There is an additional position where you can add Page Elements to. This is between the Header and the Blog Posts. When you add a Page Element in the Header section, it follows the Header styles (like font, color and margin settings) and similarly, if you add a Page Element in the Blog Posts section, it follows the styles defined for the Blog Posts. You might want to include a Horizontal Menu or Navigation Bar or AdSense Ad unit just below the Header but before the Blog Posts and sidebars.

To do that, scroll to here and change to the value (shown in red):-

<div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='yes'/> </div>

This should appear in all new Blogger templates. If you don't see this in your template, you can also add the entire code (shown in green). When you view your Template -> Page Elements, you should now see a new section in between the Blog Header and Blog Posts where you can insert Page Elements.



Once these are done, Save the Template. Click the “Page Elements” tab, and you will now see “Add a Page Element” option at the top of the Header and Blog Posts. Assuming you decide to add the element below the Header or Blog Posts, not to worry. Simply create whatever element you want and save. Next, drag and drop the element to the bottom of the Header or Blog Posts. Click the Save button at the top right hand corner of the page, and your settings have been saved.

Read more >>

Add Music to Blogspot blog

This article is updated to address the difference in the way the code is interpreted by the different browsers, namely Internet Explorer and Mozilla Firefox. We have also included a sample music file which you can use to test the effects of adding the sound file to your Blog.“Music, the greatest good that mortals know,
And all of heaven we have below.” ... Joseph Addison

Depending on the subject matter of your blog, having music played in the background may either enhance the pleasure of reading or annoy your visitor. Imagine the agony of surfing the web in discreet, only to catch the attention of your office colleagues or parents when the music automatically blasts off in the background. Not to mention, a big music file may cause a slower page download. Nevertheless, the solution, as shall be explained later, is simple - have an option for the reader to play or stop the music.

To begin, you will need to have a music file uploaded onto a server.Upon uploading, note down the URL of the file.

Alternatively, there are several sites that offer free download of their music files. You can enter search words like “free music download” or search for a popular artist name in the Google search box. Most of the sites that offer free download will lead you to the file location stored in their servers. Copy the URL of the music file that you have chosen.

Enter your search termsSubmit search form

If you would like to hear how the music works on your Blog, you can also use this music file which we have uploaded onto Google Pages - http://ownlblog.googlepages.com/BalladePourAdeline.mid - whenever you are prompted to enter the “URL of music file”. This file is for testing purposes only. Please do not link permanently to this file as it may be changed or deleted in due course.

Next, you would have to decide how you want the music to be played.

Link for reader to click

This is a text link. Your visitor can click the link if he wants to hear the music.

<a href="URL of music file">Click to hear music file</a>

Remember to enter the URL of music file into the above code. This code can be inserted into your Blog post. If you want to put it in your sidebar, you can go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript and insert the code. Whatever words you type into the “Click to hear music file” will appear as the text link.

Music with a console

A music player console with controls of the volume, on and off buttons, would give your visitors a choice on how he wants the music played. With the code stated below, the music will not play unless the visitor clicks the play button.

You can either insert the music console into your Blog post or your sidebar. If you want it in the sidebar, go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript.

The code to insert is this:-

<embed autostart="false" height="40" loop="true" playcount="2" src="URL of music file" width="300"/></embed>

For instance, using the following code:-

<embed autostart="false" height="40" loop="true" src="http://ownlblog.googlepages.com/BalladePourAdeline.mid" width="300"/></embed>

this is what you see:-



It will look different in IE and Firefox, depending on the installed plugins.

Note the following attributes and how they work on different browsers:-

1. Insert your URL of music file into the code.

2. The width of the example you see above is "300". If you want it to be embedded neatly into your sidebar, the width should not be greater than the sidebar width. For example, if your sidebar width is 150px, the width of your console should be about 140px.

3. The height would depend on your preference and space constraints.

4. The autostart attribute has two options. If you choose "true", the music will automatically play when your page is loaded. As I have mentioned earlier, this is not a good option unless you are absolutely sure all your visitors would not mind the music. The better option is to state it as "false". If the visitor wishes to hear the music, he can click the play button to start the music.

Note, however, that while it works fine in Internet Explorer, it may not be so in Mozilla Firefox. The default setting for IE is "false" which means the music will not play automatically. The default setting for Firefox is "true", and when we experimented with .wma and .wav files, they automatically played even when we set the autostart to "false". If you are working on the Mac, the default setting for both browsers is "false".

5. The loop attribute indicates whether the music should stop once that particular tune ends. The common attributes are "false" or "true". If the attribute is "false", the music ends after it is played once. If it is "true", the music will automatically loop and continue playing until the visitor clicks the stop button or leaves your site. For short music pieces, you may want it to repeat and choose "true".

For certain versions of Netscape browsers, another attribute that might work is loop="n" where n is a number. If n is 2 for example, the music will play twice and stop. The similar attribute in Internet Explorer is playcount.

6. You can specify the number of times the music is to be played. In the above example, where playcount="2", the same piece of music is played twice before it stops. If you want the music to be played once, you can delete playcount altogether. Note that this only works in Internet Explorer.

Background music to play automatically

For the music to play the moment your page is loaded, the code will have to appear in the HTML document of your site. Note that in so doing, there are no controls for the visitor to choose whether or not to listen to the music, nor options to turn it off. Login to your Dashboard and under “Template”, click “Edit HTML”. Somewhere near the top, after the word <Head>, insert this code:-

<embed autostart="true" height="0" loop="true" src="URL of music file" width="0"/>

Remember to insert the URL of music file into the code. There is no image of a console and readers cannot choose to turn off the music. Use this option with discretion.

Troubleshooting

The sound files can be in any format provided that your browser has the necessary plugin to play that file. Many people have problems playing MP3 files because their Firefox browsers do not have the necessary plugins. To check what your Firefox browser can support, enter this command into your browser:-

about:plugins

It will list all the installed plugins and the media files that can be played. If you need additional Mozilla Firefox add-ons, you can visit their Add-ons Page.


Further reading:

Read more >>