Membuat Music Player valid HTML5 dengan Playlist di Blogger

Membuat Music Player valid HTML5 dengan Playlist di Blogger - Apa kabar sobat Blogger? Udah tenang rasanya saat ini soalnya baru pulang kampung dari tepat tinggal nenek saya, selepas libur panjang lebaran tahun ini. Oia.. saya juga mau mengucapkan "Selamat Hari Raya Idul Fitri 1436 H", "Mohon Maaf Lahir & Batin".

Pada artikel pertama saya selepas Hari Raya Idul Fitri ini saya akan berbagi tutorial untuk anda yang yang suka mendengar music, karna saya akan mengajrkan anda untuk "Membuat Music Player valid HTML5 dengan Playlist di Blogger", Bagaimana apakah anda tertarik untuk mencobanya? kalau begitu langsung saja deh kita cara pembuatannya. :)

Membuat Music Player valid HTML5 dengan Playlist di Blogger

• Pertama-tama anda harus masuk ke akun Blogger anda
• Lalu pada Dashboard pilih tab Template > Edit HTML
• Kemudian cari kode </head> dan paste kode berikut diatasnya.

<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> 

• Selanjutnya 'Simpan Template' anda.

Menambah Music Player valid HTML5 di Blogger

• Selanjutnya Pilih Tata Letak > Tambah Gadget > HTML/Javascript
• Kemudian paste kode berikut ke dalam konten box kemudian Simpan gadget.
• Jangan lupa untuk disesuaikan Playlist Music mp3 nya. :)

<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> 

Kustomisasi:

1. Title: Merupakan judul musik atau lagu.
2. mfile: Ini merupakan file musik di .mp3 ekstensi.
3. Author: Nama orang atau penyanyi musik.
4. Cover: Sampul gambar yang muncul saat lagu diputar.
5. Background: Gambar yang muncul di latar belakang pemutar musik.

Nah, sekarang anda telah memasang widget "Membuat Music Player valid HTML5 dengan Playlist di Blogger", Anda dapat menambah Playlist Mp3 sesuai keinginan anda yang penting ekstensi file music anda dalam bentuk .MP3

Semoga bermanfaat..