Menambahkan Musik Player HTML 5 dengan Playlist di Blog

Oleh Unknown

Selasa, 13 Oktober 2015

Bagikan :

Tweet

Cara Menambahkan Musik Player HTML 5 dengan Playlist di Blog, saya akan menjelaskan bagaimana membuat flash MP3 palyer di Blog Blogger Anda. Semua browser yang kita pakai akan berbeda konfigurasi, dan mungkin sebagian browser tidak mendukung flash tersebut.

Lalau bagaimana cara menambahkan HTML 5 Musik Player dengan Playlist di Blogger? dalam artikel ini saya akan menunjukan cara menambahkan Musik palyer HTML 5 dengan playlist diblog.

1. Login Ke Www.Blogger.com <Dashbord>
2. Plihit HTML.
3. Cari Kode </haed>  Copy kode dbawah ini diatas kode Tersebut.

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

     4. Klik Save .

Memanbahkan Musik HTML 5 palyet di blog.

Berikutnya untuk menambahkan musik HTML 5 tersebut terserah Anda mau di halaman/postingan tertentu, atau mau disidebar tergantung kebutuhan Ada.

Pergi Ke Blogger
Tata Letak << Tambahkan Gadget>>  <<Tambahkan HTML/JavaScript>
Lalu masukan kode berikut kedalam kotak HTML Text.

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

Costomization

• Judul: Merupakan judul musik atau lagu.
• mfile: Ini merupakan file musik dalam .mp3 ekstensi
• Penulis: Nama orang yang terdiri musik.
• meliputi: Sampul jempol gambar yang muncul saat lagu diputar.
• background: Gambar yang muncul di latar belakang pemutar musik.
• Selamat: Setelah menyesuaikan, tekan "Simpan" tombol yang terletak di bagian bawah jendela. Sekarang, cek blog Anda. 

 Sekian cara membuat atau Menambahkan Musik Player HTML 5 dengan Playlist di Blog,, Happy Blogging,,, Wasalam (www.contohblogspotnih.blogspot.com).

Tag : Desain, Desain Blogspot