Add An MP3 Music Player To Your BlogSpot Blog

So this tutorial will help you to add customizedmusic player and create your own playlists. Thetwo first steps of this tutorial will let you addsongs to your blog (Repeat this step every time you want to add more songs blog / post), andstep # 3 will add an MP3 player to a blog floatingAnda.Untuk this tutorial you will must open an account here:

1. OpenDrive (online storage).

STEP #1:

Upload songs (MP3 files) to your newly registered OpenDrive account,

right click on the file and then click on the hyperlink "links" as shown in the screenshot below:

Then copy the "DIRECT LINK" (Streaming) to that file.

STEP #2:

Now, paste it as a hyperlink in to your blog:

1. Either paste it in the sidebar (Blogger => Design =>Page Elements => "Add a Gadget" =>"HTML/JavaScript") to play the songs site-wide, 

2. Or paste it in a blog-post (anywhere in the post), if you want to play the songs only in a particular post.

(List all the songs you want to play as these hyperlinks)

The hyperlinks to the songs should look like this:

http://DIRECT_LINK_TO_SONG_1"style="display:none;"> Song_1_Title

http://DIRECT_LINK_TO_SONG_2"style="display:none;"> Song_2_Title

Replace the links highlighted in RED with the DIRECT LINKS you got from OpenDrive in STEP #1.

The code style="display:none;" will hide the hyperlinks (song titles). If you want to show the links to your visitors, then delete the code highlighted in BLUE, before saving the widget/post.

STEP #3

Finally, to play these songs we will add the floating MP3 player to the blog.

Go to this page: StreamPad

And click on the Blogger logo:

Before copying the code, go to the bottom of the page:

And customize the player as you want: Enable Autoplay, change colors, Allow popout, etc.

Finally copy the code from Step#5 in that page. 

If the code in Step 5 does not get updated when you customize the options, then simply use this code:

Change the values highlighted in RED from true to false or vice-versa And paste that code in to your blog:

Go to Blogger => Design => Page Elements => "Add a Gadget" => "HTML/JavaScript"

Paste the code and save widget.

NOTE 1 (Important) : In case you want to "show" this widget only in a single post or in a group of posts, then instead of pasting the above code in the sidebar widget, paste it inside the post (anywhere in the post) where you want to display the widget (floating bar MP3 player).

NOTE 2 : If you paste the code in the sidebar, then the bar is shown across all the pages on your blog and wherever (either the sidebar/blog posts) songs are detected, it will be addedto the floating bar as long as the visitor remains in a particular page.

NOTE 3 : As an alternative MP3 player, you may try the media Player from Yahoo (with Video support) instead of the one from Streampad (in step #3).

This widget can detect all the links to songs on any page (which you have already added in STEP #2 of this tutorial) and will start playing them as a playlist, in a floating bar from the bottom of the page.

Now sit back & Let The Music Play

source : Blogstop. net