How to add responsive Html 5 Music Player In Blogger

In The Last Post we showed you how to add floating sharing buttons but now in this post we will show you hot to add a music player in blogger.This Widget Will Help you to play .mp3 and .ogg format music files. Note- You Need To Host Music files on dropbox or any other hosting service.



So Lets Start-

1. Go To Blogger >>Template >>Edit Html
2. Search For </head> now add the following code above it-

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script src="http://dl.dropboxusercontent.com/s/fxqls1drerhbou6/audio.min.js" type="text/javascript"></script>

3. Now Save Your Template.

How To Add Music Player?-

1. To Show Music Player Just Add This Code Where You Wan to show music player-

<div class="btnt-player">
<div class="btnt-player-inner nano">
<div class="content">
<ol>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
</ol>
</div>
</div>
<div style="clear: both;">
</div>
<audio preload="preload"></audio></div> 

2. After Adding the above code Replace YOUR-MUSIC-FILE-LINK with your music file link
Note:- You can host you music files in Dropbox
Then Replace MUSIC FILE NAME with the Name of the Music File 

Now You Have Successfully Added This Music Player In Your Blog...