. 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
Hii...Peter...
ReplyDeletemakin keren aja Blognya Bapak nii...
makasih banget buat tipsnya...jadi blog tempat belajar blogspot HTML sript nii...hehehe
Peter, i have some question..., i have recent make same blog, but...i my earn stil low, $0,01 dolar in last 3 weeks..., what should i do???
Ooo... my blog still 1-2 month old, or maybe still very new Peter???
here same my blog:
musicallyric
e-technonews
software-freeware
e-olympics
e-movienews
de_naturaleza
What do you think about my blog, in design template, article and do you have any comment for my blog posted???
thank...before for link my blog...
Kumusta po kayo de_naturaleza,
ReplyDeleteIt took me a year to get my first check, but then, I didn't put in much effort. Whatever it is, keep at it, the rewards will come in time. Most important, find ways to build traffic to your site. Traffic = earning.
See How to increase traffic to your site
How to increase earning from AdSense
Best template for your blog
Template is a very personal thing, and one man's meat is another man's poison. But to me, 3 column is the best. Plenty to choose from now:
New Blogger template modified by Stavanger
Dots New Blogger template with Header
New Blogger templates modified by Ramani
New Blogger templates by Isnaini
New Blogger templates by Thur
Ramani's New Blogger Neo template
New Blogger template by Final Sense
New Blogger templates by BloggerBuster
More when I can find the time.
Peter Blog*Star
What a grateful blogger did for me
(no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)
I just can't seem to get it. I uploaded a music file to Esnip. I assume I then have to embed the music player on my blog and then embed the song into the player. Is this right? If so, how do I get the player from the site into the blog? Thanks so much
ReplyDeleteHi Onecoatsam,
ReplyDeleteBeen a long time since doing this post, but I reviewed Adding music to your blog another easy way. It appear to me you will have to select the song which is already in eSnip. The song selected can either be the song which you earlier uploaded to eSnip or an existing song. Then get the script and paste it into your blog.
Peter ChenBlog*Star
Environmentally friendly presents (gifts)
thnx for your information...
ReplyDelete-reply-
nice information
ReplyDelete