Hi!
Again I am here to introduce an other easy way.Today I will talk about a cool audio player.Yes it is yahoo media player.I think you have been seen this player on my blog's main page.If not then go to main page an click on any listed music in sidebar and see.Actually when I needed the way to add some my favorite music in my blog I found two ways.One was the Macromedia Flash with which I can embed flv or mp3 in blog easily.(Soon I will describe this way in next tutorial).And the other is this way.So let's get started.Tutorial Outline
First I will tell you that how to add this player in your site/blog.Then I will talk about that how to add your music.Then some methods will be described about making some changing in the player appearance and working.
Adding Yahoo Mediaplayer
In this way we have two options.Either we want show this Yplayer all over the blog or we want to show Yplayer only in specific pages.Both described below.Add Yplayer all over the blog
Sign in to blogger select your blog (in which you are going to add player) and go to design.The page will look like this.
Now click on Add a Gadget.Select HTML/JavaScript gadget and past the below code and save it and you don't need to give any title this gadget.
SOURCE CODE
----------------------------------------------------------------------------------------------------------------------
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
----------------------------------------------------------------------------------------------------------------------
Like this
NOW YOUR ADDITION OF YPLAYER ON ALL OVER THE IS BLOG IS COMPLETE.
First of all you will need to upload your music to UPLOAD-MP3.This is free website which gives 100MB.Get direct link of your all uploaded songs and save then in a notepad.If you don't know what is direct link and how to get it then click here to get information from this tutorial.
Now look at this small and easy code.
Add Yplayer on selected pages.
If you want to add music only on some specific pages or post then add the above code in that post or page.Keep in mind that when you are adding adding above code.Your page/post must be in Edit HTML mode.Otherwise Yplayer will not be embedded.Add this code at the end of the page.Like below.
In these ways Yplayer can be added.Now come to the second part of tutorial in which I will show you that how to add Music.
HOW TO ADD MUSIC TO PLAY IN PLAYER.
Addition of music is very easy as 1 2 3.You just need to link your music in page.Yplayer automatically detects the mp3 links (audio song's link) and add them into playlist.And it also place small play icon on audio links which means you can play song on click it without going to Playlist.Below I described the method that how to link your in blog or post.First of all you will need to upload your music to UPLOAD-MP3.This is free website which gives 100MB.Get direct link of your all uploaded songs and save then in a notepad.If you don't know what is direct link and how to get it then click here to get information from this tutorial.
Now look at this small and easy code.
-------------------------------------------------------------------------------------------------------------
<a href="Your song 1 direct link here"Song 1 Title Here</a>
-------------------------------------------------------------------------------------------------------------
Use the above code to link your audio.Don't forget to replace the sentence (Your song 1 direct link here) with your song's direct link which you got from Upload-Mp3.com and (Song 1 Title Here) with your song title.Use </ br> code to enter new line for other song.In this way you can add many songs as you wish.Remember here when you are putting mp3 links in post your post should be in Edit HTML mode.An in the compose mode you can make changes if you want for example text alignment,font and size etc.And if you are adding a playlist all over the blog the Add a Gadget of HTML/JavaScript and put your links.Above I described a very simple way to link you audio.If you want more detail and option about linking your audio then visit the below link.
Now come to the third part of the Tutorial.
To remove "Learn more about this player" do following steps.
Go to blogger dashboard and select your blog where you added Yplayer and edit your design in HTML.And add the below code carefully below <head> tag.
And then save your template O wow it is done.
Now come to the third part of the Tutorial.
Player Modification
I will describe only the hacks which I think necessary.This tutorial is not written to gain credit.I got these hacks from PonicStar.com click here to read more awesome hacks.I just added more detail for those who have no knowledge about web works.So First I shall tell you that how to remove "Learn more about this player".Then we will talk about the removal of unnecessary button like close and open player in new window.And some other hacks will be described.How to remove "Learn more about this player" from Yplayer
When you embed Yplayer simply your player will look like this.
Go to blogger dashboard and select your blog where you added Yplayer and edit your design in HTML.And add the below code carefully below <head> tag.
Source Code
-------------------------------------------------------------------------------------------------------------
<style type="text/css">/* Yahoo! Media Player: */
/* Remove block with relevant information */
#ymp-relevance { display:none !important; }
.ymp-player-max #ymp-body { width:570px !important; }
.ymp-player-max #ymp-body #ymp-body-strip { width:557px !important; }
.ymp-player-max #ymp-body #ymp-body-base { width:560px !important; }</style>
/* Remove block with relevant information */
#ymp-relevance { display:none !important; }
.ymp-player-max #ymp-body { width:570px !important; }
.ymp-player-max #ymp-body #ymp-body-strip { width:557px !important; }
.ymp-player-max #ymp-body #ymp-body-base { width:560px !important; }</style>
-------------------------------------------------------------------------------------------------------------
And then save your template O wow it is done.
How to remove various button like close player and open player in new window
To do this just copy this below code and past it below the head as described above and don't remove existing code.--------------------------------------------------------------------------------------------------------------
<style type="text/css">/* Hide 'close window' button */
#ymp-btn-close { display:none !important; }
/* Hide 'pop-up window' button */
#ymp-btn-pop { display:none !important; }
</style>
#ymp-btn-close { display:none !important; }
/* Hide 'pop-up window' button */
#ymp-btn-pop { display:none !important; }
</style>
--------------------------------------------------------------------------------------------------------------
That's it.How to change background color of Yplayer
Past the below code after <head> and change red colored text (color code) according to your desire.--------------------------------------------------------------------------------------------------------------
<style type="text/css">/* Yahoo! Media Player: Set background color */
#ymp-player .ymp-color-main,
#ymp-tray .ymp-color-tray {
background-color:#2F437C !important;
}</style>
#ymp-player .ymp-color-main,
#ymp-tray .ymp-color-tray {
background-color:#2F437C !important;
}</style>
--------------------------------------------------------------------------------------------------------------
Are you confused what is color code? You should know that in HTML every color is given a specific code.Click here to download image which contain color block and their codes.From this image select your favorite color replace the above code's color with your choice.Here also a program.
Change Yplayer text color
Use the below code to change yahoo media player text.Past also it After <head>.--------------------------------------------------------------------------------------------------------------
<style type="text/css">/* Yahoo! Media Player: Set text color */
#ymp-player .ymp-color-text-main {
color:#000000 !important;}</style>
#ymp-player .ymp-color-text-main {
color:#000000 !important;}</style>
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
Here is screen shot of changed color of player background and text.
Hide Mp3 Link
Sometimes we need to hide mp3 links.We want to show playlist only in the player.So for this Just add the below code below <head> again.
<style type="text/css">/* Yahoo! Media Player: Hide MP3 links */.ymp-btn-page-play,.ymp-btn-page-pause {display:none;}</style>
--------------------------------------------------------------------------------------------------------------
Hide Yplayer
Sometime we need to hide media player.Just want to play music from page.So to do this like above copy this below code and past it after head tag in your template.--------------------------------------------------------------------------------------------------------------
<style type="text/css">/* Yahoo! Media Player: Hide player */#ymp-player,#ymp-tray,#ymp-error-bubble,#ymp-secret-bubble {display:none !important;}</style>
--------------------------------------------------------------------------------------------------------------
I think you enjoyed this tutorial.If you are getting any kind of trouble regarding this tutorial you can send me without hesitation.Thank you for visiting AnEziWay.blogspot.com
