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! I hope you already now how to make it work with blogger if not read this post –> Flash Mp3 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,
<object type="application/x-shockwave-flash" data=http://themobilehub.blogspot.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">And The HTML Code For Our New Customized Mp3 Will look like this,
<param name="movie" value=http://themobilehub.blogspot.googlecode.com/files/player1.swf>
<param name="FlashVars" value="playerID=1&soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
<object type="application/x-shockwave-flash" data=http://themobilehub.blogspot.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://themobilehub.blogspot.googlecode.com/files/player1.swf>
<param name="FlashVars" value="playerID=audioplayer1&
bg=0xf8f8f8&
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& soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
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&
<object type="application/x-shockwave-flash" data=http://themobilehub.blogspot.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">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,
<param name="movie" value=http://themobilehub.blogspot.googlecode.com/files/player1.swf>
<param name="FlashVars" value="playerID=audioplayer1&bg=0xf8f8f8&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&soundFile=URL of your MP3"> <param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
http://stcmustafa.fileave.com/lastbreath.mp3
Some Players With Different Flavors
Masked Red
The code for this player is shared below,<object type="application/x-shockwave-flash" data="http://themobilehub.blogspot.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://themobilehub.blogspot.googlecode.com/files/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0xFF0000&lefticon=0xffffff&rightbg=0xFFCCCC&rightbghover=0xFF0000&righticon=0xffffff&righticonhover=0xffffff&text=0xFF0000&slider=0xffffff&track=0xFF0000&border=0xFF0000&loader=0xFF6666&loop=no&autostart=no&soundFile=URL Of Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>Masked Purple
The code for this player is shared below,
<object type="application/x-shockwave-flash" data="http://themobilehub.blogspot.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://themobilehub.blogspot.googlecode.com/files/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x660033&lefticon=0xffffff&rightbg=0xC74988&rightbghover=0x660033&righticon=0xffffff&righticonhover=0xffffff&text=0x660033&slider=0xffffff&track=0x660033&border=0x660033&loader=0x660033&loop=no&autostart=no&soundFile=URL OF Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>
Masked Black
The code for this player is shared below,<object type="application/x-shockwave-flash" data="http://themobilehub.blogspot.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://themobilehub.blogspot.googlecode.com/files/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x000000&lefticon=0xffffff&rightbg=0xcccccc&rightbghover=0x999999& righticon=0xffffff&righticonhover=0xffffff&text=0x000000&slider=0x666666&track=0x000000&border=0x000000&loader=0xffffff&loop=no&autostart=no&soundFile=URL OF Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>And the code for the first Mp3 player used in this post as Green and Blue is shared below,
<object type="application/x-shockwave-flash" data="http://themobilehub.blogspot.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://themobilehub.blogspot.googlecode.com/files/player1.swf"> <param name="FlashVars" value="playerID=1&bg=0xffffff&lefticon=0xffffff&rightbg=0x0080ff&rightbghover=0x289728&righticon=0xffffff&leftbg=0x289728&righticonhover=0xffffff&text=0x0080ff&slider=0xffffff&track=0xffffff&border=0x289728&loader=0x0080ff&loop=no&autostart=no&soundFile=URL Of Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>I hope you like them. For Using more than one player as I have done read my previous post on Wordpress Mp3 Player
The players that you see above are the first version and if you want to use the second version then simply replace http://themobilehub.blogspot.googlecode.com/files/player1.swf with http://themobilehub.blogspot.googlecode.com/files/player1.swf A second version Player will look like this,
I hope you will like this post :>
- Samsung Hero E2232 Dual SIM price India| Samsung.
- Samsung Hero E2230 price India,Samsung Hero E2230
- Samsung Guru E1081 Price in India |Samsung Guru E1
- Samsung Star II S5263 price India |Samsung Star II
- Samsung Galaxy I500 price India,Samsung Galaxy I50
- What to do when windows doesn't support a pendrive
- How to speedup your computer system's RAM
- Dual sim mobile phone in India|micromax samsung ne
- Micromax latest mobile phone updates|micromax newl
- Latest nokia mobile phone updates|Nokia newly laun
- Aakash Ubislate Android Tablet price India |Dataw
- Micromax X222 Price in India | full features Specification.
- Micromax X210 Price India, Micromax X210 Music Fea
- Micromax M2 price in India | full features specifi
- Micromax X285 price in India | full features spec
- Micromax Q80 price in India |micromax QWERTY mobil
- Micromax X11i price in India | Review, feature and
- Micromax X263 Price India | Review, Features and
- Micromax X40 Price India | Dual SIM Micromax X40 P
- And the Symbian saga continues..
- Samsung Primo Price India, Samsung Primo 3G Phone
No comments:
Post a Comment