Monday, November 05, 2007

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

6 comments:

  1. Hii...Peter...
    makin 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...

    ReplyDelete
  2. Kumusta po kayo de_naturaleza,

    It 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)

    ReplyDelete
  3. 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

    ReplyDelete
  4. Hi Onecoatsam,

    Been 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)

    ReplyDelete
  5. thnx for your information...
    -reply-

    ReplyDelete
  6. nice information

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics