eSnip Music Player in sidebar

I have previously published a post showing how to add an eSnip music player in a blog post at Add music to your blog another easy way using eSnip (click BACK button to get back to this page)
. The actual eSnip player was added to eSnip music player in a blog post.

A blogger ask how to fit the eSnip music player in a sidebar. I did a test and successfully fitted it into the bottom of the first left sidebar of Blogging Ideas.

You must first know the width of your sidebar. If you don't, you can get instruction in how to get them from How to find the width of your blog Header, main column (posts), sidebar (click BACK button to get back to this page).

Anyway this is a section from the template of Blogging Ideas:

.sidebar-wrapper {
margin-right: 14px;
width: 160px;
float: left;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in
IE */
overflow: hidden; /* fix for long non-text content breaking IE
sidebar float */
}

That tells me that the width of the sidebar is 160 pixels. The width of the eSnip music player must be 160 pixels or less. Now the script for a selected song from eSnip is:

<table bgcolor="#000000" cellpadding="0" cellspacing="0"><tr><td><embed quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#000" width="328" height="94" src="http://res0.esnips.com/escentral/images/widgets/flash/esnips_player.swf" flashvars="theTheme=blue&autoPlay=no&theFile=http://www.esnips.com//nsdoc/357ad475-5da9-44c1-864a-df7c17d61d69&theName=Carnivore&thePlayerURL=http://res0.esnips.com/escentral/images/widgets/flash/mp3WidgetPlayer.swf"></embed></td></tr><tr><td><table cellpadding="2" style="font-family:Verdana, Arial, Helvetica, sans-serif; padding-left:2px; color:#FFFFFF; text-decoration:none ; ; font-size:10px; font-weight:bold"><tr><td><a style="color:#FFFFFF; text-decoration:none " href="http://www.esnips.com/CreateWidgetAction.ns?type=0&objectid=357ad475-5da9-44c1-864a-df7c17d61d69"> Get this widget </a></td><td style="font-size:7px; font-weight:normal;">|</td><td align="center"><a align="center" style="color:#FFFFFF; text-decoration:none " href="http://www.esnips.com/doc/357ad475-5da9-44c1-864a-df7c17d61d69/Carnivore/?widget=flash_player_esnips_blue"> Track details </a></td><td style="font-size:7px; font-weight:normal;">|</td><td><a align="center" style="color:#FF6600; text-decoration:none" href="http://www.esnips.com//adserver/?action=visit&cid=player_dna&url=/socialdna"> eSnips Social DNA </a></td></tr></table></td></tr></table>

The width of the eSnip player (highlighted in red) is 328 pixels, and this is much too wide for the sidebar. I thus changed the width to 160 pixels (it can also be less, but not more), but left the height as 94 pixels. You can change the height of the player as well, but I wouldn't advice it. The edited script ended up as:

<table bgcolor="#000000" cellpadding="0" cellspacing="0"><tr><td><embed quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#000" width="160" height="94" src="http://res0.esnips.com/escentral/images/widgets/flash/esnips_player.swf" flashvars="theTheme=blue&autoPlay=no&theFile=http://www.esnips.com//nsdoc/357ad475-5da9-44c1-864a-df7c17d61d69&theName=Carnivore&thePlayerURL=http://res0.esnips.com/escentral/images/widgets/flash/mp3WidgetPlayer.swf"></embed></td></tr><tr><td><table cellpadding="2" style="font-family:Verdana, Arial, Helvetica, sans-serif; padding-left:2px; color:#FFFFFF; text-decoration:none ; ; font-size:10px; font-weight:bold"><tr><td><a style="color:#FFFFFF; text-decoration:none " href="http://www.esnips.com/CreateWidgetAction.ns?type=0&objectid=357ad475-5da9-44c1-864a-df7c17d61d69"> Get this widget </a></td><td style="font-size:7px; font-weight:normal;">|</td><td align="center"><a align="center" style="color:#FFFFFF; text-decoration:none " href="http://www.esnips.com/doc/357ad475-5da9-44c1-864a-df7c17d61d69/Carnivore/?widget=flash_player_esnips_blue"> Track details </a></td><td style="font-size:7px; font-weight:normal;">|</td><td><a align="center" style="color:#FF6600; text-decoration:none" href="http://www.esnips.com//adserver/?action=visit&cid=player_dna&url=/socialdna"> eSnips Social DNA </a></td></tr></table></td></tr></table>

I then sign into blogger.com (Dashboard) and click LAYOUT in the section for "Blogging Ideas", click "Add a Page Element" and chose HTML/Javascript. I pasted the edited eSnip script into the HTML/Javascript Page Element window and click "save changes". The Page Element for the eSnip music player appeared at the top of the first left sidebar of the LAYOUT. I hover the mouse over the new Page Element and the cursor changed to a cross. I dragged the new Page Element to the bottom of the first left sidebar in the LAYOUT, click SAVE at the top of the LAYOUT and you can see the result at Blogging Ideas (bottom of the first left sidebar at time of publishing).

The little test is successful in displaying the eSnip music player, but the PLAY button is very small. So if you don't mind that, then here you are. That is how to fit the eSnip music player into the sidebar. To see the difference, surf over to the two examples or go to eSnip music player in sidebar problem