Memasang Kode Audio mp3 Playlist
Login ke akun blog klik tombol blog baru,  
buat satubuah link baru  kemudian beri nama sesuai fungsi, 
klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan kode blank template, yang tersedia pada sumber  berikut 
Get Blank Template   edit background warna sesuai keinginan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini,  pastekan kedalam  Entri halaman baru HTML  dan klik simpan selesai
<style class="Mys2010-styles">
body {background-image: url();color:red;height:100%;overflow:hidden;}
body {
background:#808;} 
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top:-4px;
  width: 100%;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
  border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height:64px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
} 
M-2010, #teks, #posisi, #dibawah, span {
  font: 11 15vw Raleway;
  position: relative;
  display: inline-block;
}
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom:32px;
 -webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
  0% {
    text-shadow: 0 0 2px  #B0E0E6 , 
0 0 8px  #B0E0E6  , 0 0 10px  #B0E0E6 , 
0 0 20px  #B0E0E6 , 0 0 30px  #B0E0E6 , 
0 0 40px  #B0E0E6, 0 0 50px  #B0E0E6 , 
0 0 80px  #B0E0E6;
  }
  50% {
      text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8),
 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
 0 -10px 2px rgba(255, 0, 0, 0.8);
  }
 100% {
    text-shadow: 0 0 2px     #800080  , 
0 0 8px     #800080  , 0 0 10px     #800080  , 
0 0 20px     #800080  , 0 0 30px     #800080  , 
0 0 40px     #800080  , 0 0 50px     #800080  , 
0 0 80px     #800080  ;
  } 
}
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 80px #000;  
  
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #5F9EAD;    
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #8A2BE2;  
}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px rgba(255, 0, 0, 0.90);  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;
}
M2010-text-bawah-shadow;}
 .text-bawah {
  position: absolute;
  right: 410px;
  bottom: -310px;  
font-size: 50px;
font-family: agency fb, sans-serif;
  text-transform: uppercase;
}
.text-bawah1 {
  position: absolute;
  left: 90px;
  bottom: 74px;
  text-align: left;
  text-transform: uppercase;}
.text-bawah2 {
  position: absolute;
  right: 90px;
  bottom: 74px;
  text-align: right;
  text-transform: uppercase;
}
.M2010-textshadow {  
   margin: 0 auto;
   text-align: center;
   color: #00248E;
   text-shadow: 0 0 2px  #00248E, 
0 0 13px #00248E, 0 0 15px  #00248E, 
0 0 25px #00248E, 0 0 35px  #00248E, 
0 0 45px #00248E, 0 0 55px  #00248E, 
0 0 85px #00248E;}

body{
  font-family:verdana, arial;
}    
.mejs-list li:hover {
        background: rgba(0, 0, 0, 0.5);
        cursor: pointer;
    }
    .mejs-list li.current {
        background: #0000FF;
    }
.mejs-container{
  margin-left:auto;
  margin-right:auto;
}
#wrapper{
  width:490px;
  margin-left:auto;
  margin-right:auto;
  margin-top:250px;
  padding:15px; 
    Sule; 
    width: 500px;
    height: 350px;
    padding: 20px;
    border: 1px solid darkorange;
    border-radius: 8px;
  -webkit-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
}
#p5 {background-color:#990099;}
</style> 
<div align="center" style="margin-top:110px">
<div class="shadow1">
</div>
<div id="M2010-shadow">
</div>
<div align="center">
<div class="shadow-top">
</div>
<div class="M-logo"> 
</div>
</div></div>
</div></div>
<h3 class="M2010-textshadow">
<div class="text-bawah">
</div>
<div class="text-bawah1">
<a href="http://Link Judul" target="_blank" title="Music Media Elemen">
<span style="color: #fff; font-size: 26px;">&#9760;</a></div>
<div class="text-bawah2">
<a href="http://Link Judul"target="_blank" title="Download Playlist Music Mp3">
<span style="color: #fff; font-size: 26px;">&#9760;</a></div>
</h3> 
<font size="3" color="#5F9EAD"face="arial"> 
<div id="wrapper">
<audio id="mejs" src="../media/audio-01.mp3" type="audio/mp3" controls="controls"></audio>
<ul class="mejs-list">
<li  class="current"data-url="https://sites.google.com/site/studiedingsongmp3/laguku/Night-of-the-wolf-black-coach-ave-Sinitra-mys2010.mp3">01 - Nox Arcana - Night of the wolf</li>
<li data-url="https://sites.google.com/site/studiedingsongmp3/laguku/2-Pendulum-Resurrected-mys2010.mp3">02 - Nox Arcana - Pendulum - Resurrected</li>
<li data-url="https://sites.google.com/site/laguhiburan/mp3-1/ebonshire-mys2010.mp3">03 - Nox Arcana - Ebonshire Instrumental</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/4-Nox-Arcana-he-Rose-Of-Winter-mys2010.mp3">04 - Nox Arcana - he Rose Of Winter</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/5-Dream-Nox-Arcana-mys2010.mp3">05 - Nox Arcana - Dream a Dream</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/6-Circus-Diabolique-Nox-Arcana-mys2010.mp3">06 - Nox Arcana - Circus Diabolique</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/7-Blood-of-Angels-Nox-Arcana-mys2010.mp3">07 - Nox Arcana - Blood-of-Angels</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/8-Angels-Are-Weeping-Nox-Arcana-mys2010.mp3">08 - Nox Arcana - Angels-Are-Weeping</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/Blood-of-Angel-Esence-of-Evil--Nox-Arcana-mys2010.mp3">09 - Nox Arcana - Blood of Angel - Esence of-Evil</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/Kind-Red-Spirit-Lair-of-the-Vampire-Nox-Arcana-mys2010.mp3">10 - Nox Arcana - Kind Red Spirit - Lair of the Vampire</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/Sanctuary-Nox-Arcana-mys2010.mp3">11 - Nox Arcana - Sanctuary - Nox-Arcana</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/Scarbrough-Fire-Nox-Arcana-mys2010.mp3">12 - Nox Arcana - Scarbrough Fire - Nox Arcana</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/Temple-of-the-Black-Pharaoh-Arcana-mys2010.mp3">13 - Nox Arcana - Temple of the Black Pharaoh</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/Werise-Above-Nox-Arcana-mys2010.mp3">14 - Nox Arcana - Werise Above Nox-Arcana</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/Nox-Arcana-Beyond-Midnight-Cyristal-Forest-mys2010.mp3">15 - Nox Arcana - Beyond Midnight - Cyristal Forest</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/Nox-Arcana-Ghosts-of-Christmas-Past-Living-Dolls-mys2010.mp3">16 - Nox-Arcana - Ghosts of Christmas Past - Living Dolls</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/Nox-Arcana-Madness-mys2010.mp3">17 - Nox Arcana - Madness - Nox Arcana</li>
<li data-url="https://sites.google.com/site/sule62001/sule2001code/Nox-Arcana-Snake-Charmer-The-Devils-Daggers-M2010.mp3">18 - Nox Arcana - Snake Charmer - The Devil's Daggers</li>
<li data-url="https://sites.google.com/site/songlagustudy/mp3/Nox-Arcana-Past-Time-with-Good-Company-Ligeia-mys2010.mp3">19 - Nox Arcana - Past Time with Good - Ligeia</li>
<div align="center">
<li><p id="p5">(pause) &#10086; Sound of music by. <a href="http://noxarcana.com/" target="_blank" title="www nox arcana com">
<span style="color:#5F9EAD; font-size: 11 pt">Nox Arcana &#10086; (website)</li>
</ul>
</div>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a><span style="font-family: arial ; font-size: 12px; color:#fff;">&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://codepen.io/Myscript2010/pen/LbqpZE"target="_blank"title="edited in codepen"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<div align="center">
<a href="https://sites.google.com/site/sule62001/sule2001code/Mylogo-M2010.png" target="_blank" title="My Logo"><img class="expando" border="0" src="https://sites.google.com/site/code6916/file/M-2010.png" width="140"height="10"></h2>
</a></div>
</div>
<header>
<a href="http://Link Judul" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">Let's Study</a>  </h2>
</a>  
</div>
</header>
<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'></script>
<script>$(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mejsPlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mejs-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mejs:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mejsPlayNext(currentPlayer) {
    if ($('.mejs-list li.current').length > 0) {
        var current_item = $('.mejs-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mejs-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
} 
</script>
Audio by. Jereme Causing
Sound of music by. Nox Arcana
Design code is edited by. Mys2010 In Codepen
If you want to directly copy and paste you canDownload Here Audio mp3 Playlist