How to Add Music MP3 Playlist in Blogger

Installing Music Player in Blogger
The first thing you should do is to Login into your Blogger Dashboard through your Google account. After logging into your account, from the list of your blogs, select that blog on which you want to install HTML5 Music Player. Now go to Template >> Edit HTML and search for the ending Tag. After finding the tag, just above it paste the following code.

• <link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>
  
  <link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  
  <script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script>

Once the whole thing is done, it is the period to save your template. Just press the “Save Template” button situated on the top right corner of your monitor screen. Now move to the next step ahead.

Adding Music Player in Blogger
The next thing is to add the HTML5 music player either in your sidebar or into specific page/posts on your site. This entirely depends on your needs, whether you want it into your sidebar, posts, pages or anywhere else. It would work perfectly well everywhere. Follow the following instructions properly.

Go to Blogger >> Layout >> Add a Gadget >> Add HTML/JavaScript and just paste the following code into the HTML Text Box. Now you probably want to customize your Music player so before we save the gadget lets learn how you can customize it. For example, Changing, Music, Covers and etc.

• <div class="mbl">
   <div class="mbl_player" id="mnplp">
    <div class="mbl_art_bg"></div>
    <img class="mbl_cover" src="" alt=""/>
    <span class="mnpl_title"></span>
    <span class="mnpl_author"></span>
    
    <div class="mnpl_volume_min"></div>
    <div class="mnpl_volume"></div>
    <div class="mbl_volume_max"></div>
    
    <div class="mnpl_toolbar">
     <div class="mnpl_tlb_prev"></div>
     <div class="mnpl_tlb_stop"></div>
     <div class="mnpl_tlb_next"></div>
     <div class="mnpl_current"></div>
     <div class="mnpl_long"></div>
     <div class="mnpl_all"></div>
    </div>
    
    <div class="mbl_playlist">
    </div>
   </div>
   </div>
  
  <script type="text/javascript">
  $(function(){
  $('#mnplp').mnplp({
  'volume': 80,
  'playlist':[
  {"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
  
  {"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
  
  {"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
  
  {"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
  
  {"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"}
      ]
     });
    });
   </script><style> .mbl_player { width: 500px;} .mbl { float: left; width: 520px; border-top: 1px solid #d2d2d2; margin-bottom: 0px; padding: 0px; } .mbl_player .mnpl_current { padding: 2px!important; padding-left: 10px!important; } .mbl_player .mnpl_all, t { padding: 2px; }</style>

Customization
title : Represents the title of your music or song.
mfile : It represents the music file in .mp3 extension
author : The name of the person who composed the music.
cover : Cover thumb image that appears when the song is playing.
background : The image that appears in the background of the music player.

After customizing, press "Save" button located at the bottom of the window. Now, go and check your site. I am pretty sure your site would rock now. Let us know about your thoughts on this amazing gadget.

Live Demo MP3 Playlist

ดูวิธีใส่เครื่องเล่น MP3 แบบ Playlist ลงใน Blogger ภาษาไทยได้ที่นี่