Wordpress Audio player is a beautiful mp3 player and thanks to Mindy McAdams we can now actually make it work in blogger and can even change the entire colour scheme of this mini player!
Today I will let you know how to change the colour scheme of both versions of these useful mp3 players. Before we may begin check my customized player below,
- Adding the JavaScript Inside Blogger
- Adding The HTML Code For Mp3 Player To Appear
The HTML Code for our simple Mp3 Players looks like this,
And The HTML Code For Our New Customized Mp3 Will look like this,
The Green part is the portion responsible for the color scheme. View the image below to understand each code,
where,
rightbghover=0x999999& and righticonhover=0xffffff& refers to the color change on mouse hover. The red part in between the green text is the hexadecimal colour code. To change the colors according to your preferences use our colour chart
Customization
This is the most important part and I want your full concentration here. You can observe that the green part is the main portion consisting of 12 options to change the color scheme of the Mp3 player. Once you have finalized all your colors using our CSS Color Chart there is only one thing required to successfully dress up this player. You observe that the green portion of the code looks like this,
bg=0xf8f8f8&You need to align all this vertical code into a single line like this,
leftbg=0xeeeeee&
lefticon=0x666666&
rightbg=0xcccccc&
rightbghover=0x999999&
righticon=0x666666&
righticonhover=0xffffff&
text=0x666666&
slider=0x666666&
track=0xFFFFFF&
border=0x666666&
loader=0x9FFFB8&
loop=no&
autostart=no&
bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0xcccccc&rightbghover=0x999999&Now your code will look like this,
righticon=0x666666&righticonhover=0xffffff&text=0x666666&slider=0x666666&
track=0xFFFFFF&border=0x666666&loader=0x9FFFB8&loop=no&autostart=no&
Make sure you replace URL of your MP3 with the link of your Mp3 file. For example the URL for my Mp3 file looks like this,
http://stcmustafa.fileave.com/lastbreath.mp3
Some Players With Different Flavors
Masked Red
The code for this player is shared below,Masked Purple
The code for this player is shared below,
Masked Black
The code for this player is shared below,And the code for the first Mp3 player used in this post as Green and Blue is shared below,
The players that you see above are the first version and if you want to use the second version then simply replace http://www.mdn.fm/files/87478_pfe4i/player1.swf withhttp://www.mdn.fm/files/87479_wv3lp/player.swf A second version Player will look like this,
No comments:
Post a Comment