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:
word-wrap: break-word; /* fix for long text breaking sidebar float in
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:
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:
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