Cara Menambahkan HTML5 Music Player dengan Playlist di Blogger

Demo

Baru-baru ini, salah satu pembaca meminta kami Cara Menambahkan HTML5 Music Player dengan Playlist di Blogger? Pemain musik dibahas sebagai sumber utama daya tarik bagi beberapa pengguna umum. Oleh karena itu, hari ini di artikel ini, kami akan menunjukkan cara untuk menambahkan HTML5 Music Player dengan Playlist di Blogger.

Instalasi HTML5 Music Player di Blogger:

Hal pertama yang harus Anda lakukan adalah untuk login ke Dashboard Blogger Anda melalui akun Google Anda. Setelah login ke account Anda, dari daftar blog Anda, pilih bahwa blog yang Anda ingin menginstal HTML5 Music Player. Sekarang pergi ke Template >> Edit HTML dan cari tag </ head> berakhir. Setelah menemukan tag, tepat di atas itu paste kode berikut.

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

Setelah semuanya dilakukan, itu adalah masa untuk menyimpan template Anda. Hanya tekan tombol "Simpan Template" tombol terletak di sudut kanan atas layar monitor Anda. Sekarang pindah ke langkah berikutnya ke depan.

Menambahkan HTML 5 Music Player di Blogger:

Hal berikutnya adalah menambahkan pemutar musik HTML5 baik pada sidebar Anda atau ke halaman tertentu / posting di situs Anda. Hal ini sepenuhnya tergantung pada kebutuhan Anda, apakah Anda ingin menjadi sidebar Anda, posting, halaman atau tempat lain. Ini akan bekerja dengan baik di mana-mana. Ikuti petunjuk berikut dengan benar.

Pergi ke Blogger >> Tata Letak >> Tambah Gadget >> Tambahkan HTML / JavaScript dan hanya paste kode berikut ke dalam kotak teks HTML. Sekarang Anda mungkin ingin menyesuaikan Pemutar musik Anda sehingga sebelum kita menyimpan gadget memungkinkan mempelajari bagaimana Anda dapat menyesuaikannya. Misalnya, Mengubah, Musik, dan lain-lain Covers.

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

Customization:

1. Judul: Merupakan judul musik atau lagu.
2. mfile: Ini merupakan file musik dalam ekstensi mp3.
3. Penulis: Nama orang yang terdiri musik.
4. meliputi: gambar jempol Sampul yang muncul saat lagu diputar.
5. background: Gambar yang ditampilkan di latar belakang dari pemutar musik.

Selamat: Setelah menyesuaikan, tekan tombol "Simpan" yang terletak di bagian bawah jendela. Sekarang, pergi dan memeriksa situs Anda. Saya cukup yakin situs Anda akan batu sekarang. Marilah kita tahu tentang pikiran Anda pada gadget luar biasa ini.

Kami berharap bahwa Anda telah dipuja dan belajar Cara Menambahkan HTML5 Music Player dengan Playlist di Blogger. Gadget ini sangat kuat dan mengambil detik untuk memuat, sehingga dapat dimengerti bahwa hal itu tidak akan mempengaruhi kecepatan situs Anda sama sekali. Marilah kita tahu apa yang Anda pikirkan tentang hal itu.

Catatan: Widget ini tidak akan bekerja sampai Anda akan menyesuaikannya. jadi, pastikan Anda benar menyesuaikan sesuai dengan petunjuk yang kami sebutkan di atas.

Share this post