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,
This tutorial again consists of two parts,
- Adding the JavaScript Inside Blogger
- Adding The HTML Code For Mp3 Player To Appear
I have already explained both these parts in my previous post but this time we will work only on the second part i.e 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://mybloggertricks.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://mybloggertricks.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>
And The HTML Code For Our New Customized Mp3 Will look like this,
<object type="application/x-shockwave-flash" data=http://mybloggertricks.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://mybloggertricks.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&
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&
You need to align all this vertical code into a single line like this,
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&
Now your code will look like this,
<object type="application/x-shockwave-flash" data=http://mybloggertricks.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://mybloggertricks.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>
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,
<object type="application/x-shockwave-flash" data="http://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.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://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.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://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.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://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.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://mybloggertricks.googlecode.com/files/player1.swf with http://mybloggertricks.googlecode.com/files/player1.swf A second version Player will look like this,
I hope you will like this post :>
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Mohammad
11/13/2009
Widgets
you can play with the code using the MBT HTML Editor.
ReplyDeletePaste the code below inside MBT HTML Editor to start playing! Click here to open The HTML Editor
<script language="JavaScript" src="http://mustafastc.fileave.com/audio-player-2.js"></script>
<object type="application/x-shockwave-flash" data="http://mustafastc.fileave.com/player1.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://mustafastc.fileave.com/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=http://mustafastc.fileave.com/Clint_Mansell-Requiem_for_a_Dream_undefinedremix)-www.mrtzcmp3.net.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
hi mohd nice tricks
ReplyDeletei have one problem not with your this tricks related to my blog when i post something on blogger it shows blank space about it please visit my blog and suggest how to improve my blog
opss i forgoe to give you my add:www.bcsexamguru.blgspot.com
ReplyDeleteHi man! Nice trick! I really like your blog. I aplied this player to my site www.arhivaflstudio.blogspot.com, I customized it and I am very pleased of result. Previously I had same player, but not custom coloured, but the server I hosted the files crashed and I lost all data. I never knew I can use this player without js player. Thank you, and please visit my site and tell me what you think about layout etc, it is all made by me starting with Minima template. Thanx!
ReplyDeleteHey! I want to add a link of your site to my site. Give me a code or something, please.
ReplyDelete@nil
ReplyDeleteI really don't see any blank space. Clear your cache may be it would help. It looks fine on my browser
@lucky Flaush
I am glad you now have a custom player :>
Thanks for adding MBT blog to yours. You are most welcome to link to us using this code,
MY Blogger Tricks
will u try make me the template of the following URL
ReplyDeleteblack-pink-blogger.blogspot.com
please i am begging u pleaseeeeeeeeeee
I voted on BCA, added you as friend on Facebook, I followed you and I placed a link of your site on mine. You deserve all these, you're making a good job. I will stay tuned!
ReplyDeleteCheers
@chinna
ReplyDeleteI never make templates randomly and willingly :D
I am sorry but I am a student after all!
@Lucky Flaush
It's nice of to have embraced me with so much love. thanks for that.
In my previous comment I forgot to encode the code. Here is the code,
<a href="http://www.mybloggertricks.com">My Blogger Tricks</a>
Thanks again
Peace Mohammad. Thanks for all your help with the WP player for blogger. You've been a great help. 1 thing I'm concerned w/is the player continues to buffer when viewed in IE. On Firefox and Safari, it works well. I have my music hosted at Google sites. is there something I can do to correct the buffering in IE.
ReplyDelete@MR wells
ReplyDeletePeace to you too friend. Its great you find the post helpful.
As far as buffering is concerned I had the same problem with google sites but when I hosted my files at fileave.com things really changed.
Do one thing:
View this post in IE and see if my players are buffering or not. If they didn't then fileave.com is the right option. You can also host your files at boxstr.com
A few did buffer, but not for as long as mine did in IE. I will try the two hosting sites you recommend. Thank you again.
ReplyDeleteSalaam
Mohammad, do you know how to manipulate the Add This Button html so that the button displays on the right side of the post vs the left. see my blog www.mysoullessons.blogspot.com to know what I mean.
ReplyDelete@Mr Wells
ReplyDeleteTo align the button to right follow these steps,
1. Find Add This Button code inside your template which will look like this,
<!-- AddThis Button BEGIN -->
<div><a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' class='addthis_button'><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4b05655b02501096"></script></div>
<!-- AddThis Button END -->
2. Add align="right" to the above code just like this,
<!-- AddThis Button BEGIN -->
<div><a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' class='addthis_button'><img align="right" src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4b05655b02501096"></script></div>
<!-- AddThis Button END -->
3. Done!
Hope it was clear :>
Peace Mohammad. Thanks for your help with everything. I've come across a major dilemma & I don't know what to do. While posting today, I noticed that the right column of my blog is missing. All the gadgets are there in the layout section, but it's not showing up on the blog. Do you know why this has happened and what can I do to correct the problem? I've checked other browsers and all the problem remains. What do I do?
ReplyDelete@Mr Wells,
ReplyDeleteWhat was the last editing that you did to your template? Did you backup your template?
The problem can be resolved only once you undo the last changes that you made. think of it and things will surely recover. don't worry it's not a big problem. you just need to undo the last changes that you made inside your blogger template.
Your right sidebar is hanging down that means something is shifted to extreme right in your template which took the place of the right sidebar.
Mohammad, the only thing I did was add my blog list (which I now removed) but still the right column is below. I applied code for the "Add this" to move to the right following that. I placed it back to the left. Still it's below. Don't know what to do. I'm freakin out.
ReplyDelete@Mr Wells
ReplyDeleteEmail me your template at mustafa.stc @ g mail .com
I will try to fix the problem and return you the template
Peace Mohammad,
ReplyDeleteI was able to fix the hangup. It was caused by a "jumpbreak" I put into a post. Did some research and was able to correct the issue. Still not able to insert the "jumpbreak" inside the post w/out the right side hanging up. Also, I believe I'm using your fileave player w/google sites. what sections do I change to my url and what should it look like. It works now using your code but I'm sure that's not what I should be using.
Thank you.
@Mr wells
ReplyDeleteCongress that you fixed the issue. Though I didn't understand the term "jump break"
As far as I understand from your last words concerning the player, do you want to customize the player so that it suits your blog look and feel. If yes than follow the instructions in the above post once more and use MBT HTML Editor to customize the player and then use it in your blog.
To add the player to mbt html editor read my first comment.
The new Read More link in blogger is what I'm referring to when I say "jump break". I went to this site http://swathi-pradeep.blogspot.com/2009/09/problem-with-jump-breaks.html and did what instructed to do, but I still get the hanging down of my right column, so I remove the "jump break". Still, I'd like to learn how to use it.
ReplyDeleteAs far as the player is concerned, the look is fine. I've changed the color to suit my preference but my concern is the codes data =http://mustafastc.fileave.com/player1.swf and value=http://mustafastc.fileave.com/player1.swf. Am I to change these two codes or do I just change my url for the song I'm going to use? I saw in the previous post where you said to save the flash player file. I did a right click and saved link as to my music folder. Do I upload this file to google sites? I've exceeded my limit with Fileave and can't afford to upgrade yet? What do you suggest?
Thank you
@Mr Wells
ReplyDeleteI personally don't like the "read more" functionality offered by Blogger. I use a manual method. I you prefer that too then read this post -> Continue Reading or Read More Link For Blogger
I have also somewhat exceeded the limits and desire to shift my files to boxtr.com
Indeed you just need to change the Mp3 URL. It would be a great mercy on me if you save the flash file player1.swf in your own account. :>>
To save the flash file, right click the link below and choose "Save Link As"
Flash Player File
Sorry Mohammad, no luck w/the "read more" link. tried it on an existing post and it didn't work. Also, how do you get the name of the song to appear in the player? I copied one of your player color codes and modified it to my preference, but the artist name & song doesn't appear.
ReplyDelete@Mr wells
ReplyDeleteDidn't worked? Do you mean the sidebar stills hangs down? If that is not the case than make sure that did you nested your text inside these tags,
<span class="fullpost">Write Hidden Text/Summarized Text Here</span>
For the song title and name to appear in the player do this,
1. In your song drive, right click a song and choose properties
2. You will see two tabs i.e General and Summary
3. Inside General tab, write your Song Name or Source
4. Inside Summary Tab, write your song title
5. Now upload your song file and use it in your player
6. That's it!
Mohammad,
ReplyDelete"You nested your text inside these tags," i'm not sure what you mean by this. I did see the "continue reading" text in every one of my post though. couldn't get it in just one post as needed.
Is the continue reading list appearing below all your posts? I mean can you see a summary of your posts on homepage or the entire post with full length.
ReplyDeleteBy nesting I meant that enclose the hidden text between the two tags as described in my last comment. The hidden text is the text that visitors will see only when they click the read more link. For example in my homepage you see the full length post only when you click the read more link.
Which post are you troubled with?
Muhammad, "Is the continue reading list appearing below all your posts?" Yes, on every post it shows "I mean can you see a summary of your posts on homepage or the entire post with full length." The entire post appears. I took it out until I can correct the problem.
ReplyDeleteNew question. can frames/borders be done in blogger as it appears in the site below? I'd like to create this in my blog. www.mysoullessons.blogspot.com
http://whentheyreminisce.com/
Thank you
@MR Wells
ReplyDeleteI was right you didn't insert two tags while writing a post. I would encourage that you use windows live writer and re-read the post on read more link especially the last portion of the post. You will spot the mistake instantly. Don't try read more link with blogger editor for it is simply incapable.
Unfortunately frames are not supported in blogger. That is why I have created a whole new html page for MBT HTML EDitor
Mohammad, how are you sir. I've been busy with the blog but I just wanted to thank you for all your help. I do have a problem. Just noticed my mp3 player is not showing up. You can click where it should be and all you see is the outline. I didn't do anything to the template so why is it not showing up? www.mysoullessons.blogspot.com
ReplyDelete@Mr Wells
ReplyDeleteWelcome Back Mr Wells. I am really fine. Thanks for asking
Recheck your hosting service. The flash file is not loading. Re-upload the files. or use mine.
it's showing now. don't know what happened. using opendrive. hasn't given me any problems up til today. are you still fileave? have you found another hosting site you would recommend me? do you have google talk?
ReplyDeletethank you Mohammad! i'm using this nice & custom player on my profile now.It's really a big help to bring 'live' to my profile..
ReplyDeletemay God bless you.
@Mr Wells
ReplyDeleteYes I am still with fileave.com. And I have no complains so far. I really recommmend any service because all are ran by people who have less funds and thus they have no trusted system. You can catch me any time at mustafa.stc at G Mail Com
Sorry for late reply. :>>
@Fazrul arhan
You welcome friend!
@Mohammad
ReplyDeleteThank you : )
@Guys,if u wanna try this hosting:
http://www.mydatanest.com/register
It upload files faster than Fileave..but i'm not sure which one is better coz i just tried it yesterday and it load song as fast as Fileave.But anyway,i'm using both Fileave & Mydatanest.
Thanks Mohammad, your information is very helpful. Question: I've followed your instructions for naming the song so that it shows in the player, but it hasn't worked (all I see is "Track #1"). Any suggestions?
ReplyDelete@fazrul arhan
ReplyDeleteData nest may be a good option but I haven't used it. Though I am loving fileave :>>
@Mr Will
Can you create a post on a test blog and keep trying. I guess this is the best way to get things done via trial and error rather on your main blog. Do as instructed previously. Dear it will work may be you have missed some part :)
Hi!
ReplyDeleteI need help! How I can repeat song?
Tag: loop=no& - don't work =(
@Chicago
ReplyDeleteSimply change loop=no& to loop=yes& and for no buffering kinldy change your hosting or use a smaller mp3
what can i do to make my player show the name of the file/song?
ReplyDeleteon mine it just says "track#1"
Hey,Mohd
ReplyDeleteCan you Do One Favour To me, I have Embed The Script And I m still Not Able to Get ,Every .mp3 Files Player Links, You know wht i mean, Its Not Read Every .mp3 File Auto? We have to Put Seprate For Every Songs :\ That's Really Shit :( , Please Reply Asap!
Shekhar
There is a problem in my site. I followed your first post and i succeed, but when i tried to change the colors. This time i cant even see the audio player in my site. Whats the problem. Please explain. Thanks for the tricks.
ReplyDeleteShould I be able to use this code in Blogger? I tried and it's telling me the HTML is incomplete.
ReplyDeleteNevermind - found the link.
ReplyDeleteHi, Mohammad Mustafa Ahmedzai. Your tricks work is wonderful its amazing. nice post and very useful for me. i have question i hope you will solve this.
ReplyDeletecan i create playlist in this player ? can you tell me please ?
i installed this player in my blog its working successfully .
Thank you.!
Thank you for your great tutorial guide. it really helpful for me to modify my wordpres blog.
ReplyDelete