Friday, June 26, 2009

Adding Music to a Blogger Blog using

There are basically two ways you can add a music player to your blog on blogger blogs. The first that I tried was to use one of blogger's prepared gadgets. I found that these did not look very good. Instead, there is a better way.

1) Visit and go to "Post My Playlist." Choose "Get the code for any other social network, blog or your own personal website >>". It is currently the last choice, choice "E". Follow their directions to get the code. Select and copy it.

2) Go to your blog and sign in. Go to "Customize", "Layout", "Page Elements", "Add a Gadget", "HTML/Javascript". Paste the code into the main field and you're set.

3) Sizing the player: View the blog and see how it looks. If you don't like the dimensions, you can change the element dimensions by going back and editing the html of the element. The height and width show up in several places in the code, so you'll want to change them all. For my blog, I currently have it set to 300px wide and 208px tall. I have copied the code from my blog, removing the "<" and ">" characters so that it wouldn't actually insert the player into this post. You can see that the easiest approach is really to do a ctrl+f to find all the numbers. Just be careful that they are really dimensions and not part of another number or for something else (for an example of a number you shouldn't change, see the blue 208).

div style="text-align: left; margin-left: auto; visibility:visible; margin-right: auto; width:300px;" object width="300" height="208" param value="" name="movie"/ param value="never" name="allowscriptaccess"/ param value="transparent" name="wmode"/ param value="" name="flashvars"/ embed border="0" allowscriptaccess="never" flashvars="" type="application/x-shockwave-flash" height="208" src="" style="width:300px; visibility:visible; height:208px;" width="300" wmode="transparent" name="mp3player"/ /embed/object br/ a /a /div

To know what will look best in your blog, you might take some time to read through the html for your blog to find your sidebar width. If it is a percentage then you may just have to guess at the width until you get it how you want it. If it is set to a number of pixels (like 250px) then you can just change the width to 250px. That should usually give a good fit. If not, try a different width.

1 comment:

EGP said...

Very informative, thanks.