In this tutorial you will learn how to insert an mp3 file on your blog post using the simplest way possible. It is a great feature for musicians and podcasters that want to show off their work using Blogger.
Step 1 – Preparation
For this tutorial you will only need a hosted mp3 file (The hosting service is up to you, I recommend Archive.org for podcasters, but make sure you read their terms and conditions before uploading any file.).
Step 2 – Installing the script on your template
Go to your Blogger Dashboard > Layout > Edit HTML
First of all, make sure you have saved a copy of your template, it will keep you away from any kind of head ache related to your blog.
Now look for the line </head> and paste the following code right before it.
<script type="text/javascript" src="http://flash.for.islam.googlepages.com/inlineflashplayercomp.js"></script>
<script style="text/javascript">
var paramplayerflash=2;
</script>
Explaining the code above: note that this is a javascript call for this file:
http://flash.for.islam.googlepages.com/inlineflashplayercomp.js
It will be the one who will take care of including the mp3 players automatically whenever you paste a link referencing a .mp3 file.
Note one more detail: var paramplayerflash=1;
This line will be used to choose between 8 different players, the one that will fit better your website.
You can set numbers here from 1 to 8 and see what it looks like.
Now save your changes, and this step it done.
Step 3 – Using the script
Now that we have installed the script, it will works automatically whenever you paste a link to the mp3 file on your blog. It should look like below.
<a href="http://dl.getdropbox.com/u/1693834/Files/samplefile.mp3">Sample File</a>
And should work like below:
Using Different Players
If you would like to choose a different player for a single file, just ad the id=”player #” directly on your link, note that the number can be from 1 to 8, check the examples below:
Player #1
Player #1
<a id="1" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>
Player #2
Player #2
<a id="2" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>
Player #3
Player #3
<a id="3" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>
Player #4
Player #4
<a id="4" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>
Player #5
Player #5
<a id="5" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>
Player #6
Player #6
<a id="6" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>
Player #7
Player #7
<a id="7" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>
Player #8
Player #8
<a id="8" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>
Final Words
I think this is a great feature for musicians and podcasters that may need to include their audio files on blogs. I hope this will be useful for many Blogger users.
The script used in this tutorial as made by Abu Farhan and I have proper permission to use it in this tutorial.
If you have any question or suggestions about how this post can be improved, do not hesitate to drop a comment below. For further information please contact us.
