Add Music to Blogspot Blog or blogger

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. As well, read our article on Flash Music Player and Music Playlists to add a playlist of several musical pieces or songs.

“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. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. 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 terms in google search box given above and below this page


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.
<br /><a href="URL of music file">Click to hear music file</a> <br />

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

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


For instance, using the following code:-

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


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 , insert this code:-

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


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:-
<br />about:plugins <br />


It will list all the installed plugins and the media files that can be played.

Customize and Modify Poll Widget,Gadget

In this article, we shall suggest some modifications to the CSS template to change the appearance of the Poll widget to something eye-catching and attention-grabbing. For example, we can add background colors or images to the Polls widget and change the font and border colors. These should draw the attention of your readers to the Poll and put some buzz into the Blog.

In case you are not aware, Blogger recently introduced a Polls Page Element allowing you to add a Poll to your sidebar. You determine the question and answers, and readers cast their votes within the Poll period set by you. It sounds like a nice feature, except that the look of this Poll widget is plain and unexciting as it blends into the background of your sidebar. With a bit of effort, we can change all that.

Set up a Poll

To set up a Poll, go to Template -> Page Elements and Add a Page Element in your sidebar. Select “Poll”. Enter the Question and insert all the possible answers. Tick if you allow multiple answers and set a date for the Poll to end. When you refresh your Blog, this is the Poll widget you see.



It follows the sidebar styles and blends with the sidebar background color. It is plain and many readers may not even notice it there.

Add Border and Colors

Let us now add a border and background color to it. Go to Template -> Edit HTML, scroll to any early part of the CSS template and insert the following code (shown in red). For easy reference, let's put the code under /* Sidebar Content */
<br />/* Sidebar Content */ <br />#Poll1{ <br />background:#FFFF00; <br />border:3px solid #736AFF; <br />width:150px; <br />padding:0 10px; <br />} <br />


Note:

1. When a Poll is created, Blogger will assign an ID to the widget. If this is the only poll, it will be named Poll1. If there is another poll in the Blog, that second poll will be named Poll2 and you should change the reference accordingly.

2. We have given it a yellow background color (#FFFF00). Change it to any other color by inserting the relevant color code from our Color Code Chart.

3. By default, there is no frame border to the widget. To make it stand out, we added a border of 3px. You can reduce it to 1px if you want a narrow border. Also, the color of the border is blue (#736AFF) in this example.

4. If the Poll widget is placed in the sidebar, it takes up 100% of the sidebar width. To narrow it, we can insert a width setting.

5. The padding is to give a space of 10px to the left and right of the contents, so that the border does not come too close to the wordings.

After saving the above modification to the template, this is the new look of our Poll widget. Doesn't it catch your attention right away?



Change Title Font

If this is not enough, let us change the font of the Title to make it different from the other widgets in the sidebar. Where we inserted the earlier code, we add this other definition (shown in red) into the template:-

<br />/* Sidebar Content */ <br />#Poll1{ <br />background:#FFFF00; <br />border:3px solid #736AFF; <br />width:150px; <br />padding:0 10px; <br />} <br /> <br />#Poll1 h2{ <br />text-align:center; <br />font-size:140%; <br />color:#F87431; <br />font-family:arial; <br />font-weight:bold; <br />} <br />



Note:

1. The text-align property shifts the Title to the center. If you are happy having the Title aligned to the left, remove this line.

2. You don't need a font-size that large. This is to show you how you can adjust the font-size if you want to.

3. Again, you can assign a different color code to the color of the text.

4. Under font-family, you can change the font face of the Poll Title. Usual font families in Blogger include – arial, courier new, georgia, lucida grande, times new roman, trebuchet ms, verdana.

5. We made the Title bold by adding a font-weight. If you want it in italic, you can add another line of code - font-style: italic; - before the sign }

With the above code, readers should clearly see the new Poll widget:-



Add Background Image

Instead of a background color, we can use an image as a backdrop to our Poll widget. First create an image and upload it onto a free server like Google Page Creator and Google Groups. You may also refer to our rather comprehensive list of free Image Hosts and File Hosting Services in the article on Manage Blogger Image Storage Space. Take note of the IMAGE URL.

Next, go to Template -> Edit HTML and insert the background image as follows:-

<br />/* Sidebar Content */ <br />#Poll1{ <br />background:url(IMAGE URL); <br />border:3px solid #736AFF; <br />width:150px; <br />padding:0 10px; <br />} <br /> <br />#Poll1 h2{ <br />text-align:center; <br />font-size:140%; <br />color:#F87431; <br />font-family:arial; <br />font-weight:bold; <br />} <br />



The IMAGE URL is the address of the image uploaded onto the web server. There are more attributes you can add to adjust the image position or repeat it. If you need to know more, you can refer to our guide at Background Image for Blogger Template.

With a background image, the Poll widget can look truly outstanding and inviting like this:-

Recent comments Feed Widget

Change in Blogger Feeds

All along, for posts and comments without titles, Blogger used the first line of the post or comment as titles in the feeds. In a typical “Feed” page element, the titles are important as these are displayed as links in an unordered list format.

Blogger did a supposed bug fix and the “title” element was no longer a post snippet for posts with no title. This affected the comments feed, since comments never had a separate title field but were appended to the posts. According to Google's Pete Hopkins, the rationale was “to balance making the Atom feed a correct representation of the post - for Atom Publishing Protocol clients - and making the feed work the best in various feed readers.”

There was a lot of unhappiness among users and developers. Other than broken comment feed widgets, it affected Firefox live bookmarks as well.

Enable Comments Feed

First, we have to ensure that Comment Feeds are enabled. Once you are logged in, go to Settings -> Site Feed and switch to “Advanced Mode”. You should set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Do not choose “None”. Save the Settings.



Feed Page Element method

If you had followed our earlier article to insert the Comment Feed URL into the “Feed” page element, this is what you will see:-



Do you notice the gaps in between? These are the hard returns in the comments and they are not removed in the widget, unlike previously. It doesn't look as sleek now. Compare this to what we have below.

Recent Comments Widget JavaScript

The way to work around this would be to go back to using JavaScripts. We have been slow to recommend JavaScripts because there are simply too many malicious scripts out there. Most will upload their scripts onto their external sites and provide you a code for insertion into your template. The code can look like this:-





When the page loads, the browser will visit that external site to read the script contained in the .js file. Because of the security risks in running unknown scripts, many users have configured their browsers to disable scripts and the scripts will not be read. Your readers may hence not be able to view the contents in the widget. Before inserting any of these scripts into your blog, ensure that they are from trustworthy sites. Even then, as we had pointed out in our article on Internet Security and Blogger Virus, there is nothing preventing the site owners from altering the script after sufficient people have linked to it.

We went through several of the Recent Comments scripts and they are mostly workable. Some allow you to fully customize the widget styles and provide user-friendly interface for easy selection of the options. It is difficult to know who wrote the first set of original script as almost all of them claimed to be the authors, even though some scripts looked rather identical.

What we did was to take a couple of them, and change and modify that to our unique script. Our simple Recent Comments widget will look like this.

BLOG WIDGETS, GADGETS, ADD-ONS

In this series, we shall list the free, popular, and interesting web widgets and gadgets that you can consider adding to your Blog. Widgets are elements that extract the services or content from other sites. Some of these widgets are useful, providing your readers with news, information, and reference tips. Others may be just fun and games which make your Blog a little more interesting and promote interaction among your readers. Because there are so many applications, developers and sites, this article will be split into parts and we shall update them now and then.

Many of the sites offer easy to install HTML or JavaScript codes. All you need to do is to copy the code and place them into your layout. For instance, if you want a widget to appear in your sidebar, login to your Dashboard, go to Template -> Page Elements and click “Add a Page Element” at the sidebar. Select “HTML/JavaScript”. Paste the code generated by the service provider and save. Every time you create a new page element, it appears at the top of all the other elements. If you want it somewhere near the bottom of the sidebar, just left-click that “Page Element”, drag and drop to the place you want. Click “Save” at the top right hand corner of the page to save the new layout.

A note of caution when adding widgets. While you may be tempted to have as many widgets as you can lay your hands on, having too many may clutter the Blog and cause slower page downloads. Also, since many of them work on JavaScripts, readers who configure their Firefox or IE browsers to block scripts may not see these features. For these reasons, we have added only a couple of widgets to let you have an idea, but have not included all the widgets listed in this article. Take your time to pick those that truly complement your Blog contents.

Google Gadgets

Take a look at the directory of widgets at Google Gadgets and you will instantly know what widgets are all about.

Blog Widgets, Gadgets and Add-ons

Many of the applications are created by different developers and users. There is no registration required at your end. When you have chosen one, click “Add to your webpage” and you will be asked to customize the title, width, height and border of the gadget. If the width of your sidebar is e.g., 150 px, you may want to set the gadget width to something less than that. It is alright to have a larger width, but readers will have to scroll to view the gadget in its entirety. When you are satisfied, click “Get the Code”. Copy the code and paste it into your “Page Element” described above.




BRAVENET

Here at Bravenet we specialize in web tools and widgets to allow you to give your website visitors the best user experience possible. Check out our huge selection of tools & widgets below!
Get Some Bravenet Tools.



Widgetbox

If you think Google Gadgets are great, you would love the directory of web widgets at Widgetbox. They provide ready installation codes for TypePad, WordPress, Blogger, MySpace and most other blogs, sidebars or websites.

Blog Widgets, Gadgets and Add-ons

Register for a free account. Search for the widgets that you like. Determine the display settings and click “Get Widget”. You can either “Get Widget Code” and paste it into your Blog layout as described above, or let them do it for you by clicking “Add to Blogger”. We prefer the first method.

If you have several widgets, you can also “Make a New Panel” under “My Widgets” and add these widgets into your panel. The advantage is that when you “Install”, you will have one code generated for the panel rather than several codes.





Snipperoo

In a similar fashion, Snipperoo has a directory of widgets that you can use. You can pick several widgets, arrange them into a panel, and the site will generate one code for you to place on your Blog. We think that configuration was much easier previously. With their new interface and a scheme to pay you for putting the widgets in your Blog, we would rather stick with Widgetbox.

Blog Widgets, Gadgets and Add-ons

In any event, if you want to have a look, register for a free account. Once you are logged in, begin by creating a “New Panel”. To the left, you will see “Get Widgets”. Add the ones you like into your Panel. Drag and drop to arrange them in the desired positions. Click “Publish” to update and generate a code.