Memasang Kode Neon Hek with audio
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 halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff; 
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad; 
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
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;
text-shadow: 0px 0px #FFf; 
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
}
img {
  position: absolute;
  top:  109px;
  left: 578px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #f00;
  width: 211px;
  height: 212px;
  z-index: 3;
  opacity: 1;
  animation: photo-ani 7s forwards;
}
/* Keyframes */
@keyframes line-ani {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes photo-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.M-2010 {
  background: #8080;
  color: #f00;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}
canvas {
  position: absolute;
  width: 100%;
}
</style>
<canvas></canvas>
<canvas></canvas>
<div style="position: fixed; bottom: 160px; right: 430px;width:500px;height:300px;">
<h1 class="M-2010">
<center>
<p>
M-2010</p>
LOVE SONG 
</h1>
</div>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Xyz00fR_NylgVh-uwZEYhZUzN5903V8wR0QJvIdltoMEAmmt3KSZVW8a69rommCIgXlTlQ4aMVJca9346KNzh2QHl7a7jc53m15tLgJAeSggOfI_QQtaluyLvsLCzrQBBWEhQamLYSA/s1600/iis-mys2010.jpg"  />
<div class="ap" id="ap">
<div align="center">
<h2>
<audio id="mys2010" src="https://sites.google.com/site/kodesite/svn/Iis-masih-mys2010.mp3"controls="controls"></audio></2></a> </div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/06/neon-hek-with-audio.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:green; font-size: 10pt">LET'S STUDY</2></a> 
</div>
</header>
<div style="position: fixed; bottom: 399px; right: 507px;width:300px;height:30px;">
<a href="https://#" target="_blank" title="Source Code on Codepen">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXPeSBRYGveUdQH5S1ojAFrR914H9YM76RGmTyTusR8BAxZFMGwPm5Dj9MNGNp_Fiq8n0jJ6HOwgLrxAbzQL31i2GJczjOCoG41NqneyKRD3Srz0agCEx55Z8QMIBdPS8GYxrVpHa5_XM/s1600/love-mys2010.png" title="Source Code" width="10" height="10"></a> 
<div style="position: fixed; bottom: 370px; right: 1060px;width:300px;height:30px;">
<a href="http://#"title="Next Song">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnXfkfw6ke6Q1DnxhYB2ljomALm4HsxLipc6U2lU6D0o-NNu5VYGnF2m_WnVX4ErSOh8bBl9yHlXeV8ep2FBXXI8tzzQlMsMVBMdUsHg_HMff6b0SOWX53j_M_KIjwbN6v_B7jX4c3gMI/s1600/Logo-mys2010.png" title="Next Song" width="230" height="110"></a> 
<div style="position: fixed; bottom: 399px; left: -550px;width:300px;height:30px;">
<a href="https://#" title="Download Full Code">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn9j38y6U-Fl2jD7rLxeuetBXafvlgOUpQcDi8ROCCM7Is-BSz0Ze8t4cplSlGVoulBMVhbWwhn7mrME5xer_j8ggd7tUiMF0TKuemqLJeHEa0QgimuXplWu-NtOuWbPD_DlRe7L61afs/s1600/love-mys2010.png" title="Download Full Code" width="10" height="10"></a> 
<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>  
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> 
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   <script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>
<script src='//codepen.io/assets/libs/prefixfree.min.js'></script> <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script> 
<script>
Object.getOwnPropertyNames(Math).map(function(p) {
 window[p] = Math[p];
});

var HEX_CRAD = 32, 
  HEX_BG = '#171717', 
  HEX_HL = '#2a2a2a', 
  HEX_HLW = 2, 
  HEX_GAP = 4, 
  NEON_PALETE = [
   '#0000FF', '#0000FF', 
   '#ff6666', '#feff99', 
   '#ffff67', '#ccff66', 
   '#99fe00', '#fe99ff', 
   '#ff99cb', '#fe349a', 
   '#cc99fe', '#6599ff', 
   '#00ccff', '#ffffff'
  ], 
  T_SWITCH = 64, 
  
  unit_x = 3*HEX_CRAD + HEX_GAP*sqrt(3), 
  unit_y = HEX_CRAD*sqrt(3)*.5 + .5*HEX_GAP, 
  off_x = 1.5*HEX_CRAD + HEX_GAP*sqrt(3)*.5, 
  
  /* extract a work palette */
  wp = NEON_PALETE.map(function(c) {
   var num = parseInt(c.replace('#', ''), 16);
   
   return {
    'r': num >> 16 & 0xFF, 
    'g': num >> 8 & 0xFF, 
    'b': num & 0xFF
   };
  }), 
  nwp = wp.length, csi = 0, 
  
  f = 1/T_SWITCH, 
  
  c = document.querySelectorAll('canvas'), 
  n = c.length, w, h, _min, 
  ctx = [], 
  grid, source = null, 
  t = 0, request_id = null;

var GridItem = function(x, y) {
 this.x = x || 0;
 this.y = y || 0;
 this.points = { 'hex': [], 'hl': [] };
 
 this.init = function() {
  var x, y, a, ba = PI/3, 
    ri = HEX_CRAD - .5*HEX_HLW;
  
  for(var i = 0; i < 6; i++) {
   a = i*ba;
   x = this.x + HEX_CRAD*cos(a);
   y = this.y + HEX_CRAD*sin(a);
   
   this.points.hex.push({
    'x': x, 
    'y': y
   });
   
   if(i > 2) {
    x = this.x + ri*cos(a);
    y = this.y + ri*sin(a);
    
    this.points.hl.push({
     'x': x, 
     'y': y
    });
   }
  }
 };
 
 this.draw  = function(ct) {
  for(var i = 0; i < 6; i++) {
   ct[(i === 0?'move':'line')+ 'To'](
    this.points.hex[i].x, 
    this.points.hex[i].y
   );
  }
 };
 
 this.highlight = function(ct) {
  for(var i = 0; i < 3; i++) {
   ct[(i === 0?'move':'line')+ 'To'](
    this.points.hl[i].x, 
    this.points.hl[i].y
   );
  }
 };
 
 this.init();
};

var Grid = function(rows, cols) {
 this.cols = cols || 16;
 this.rows = rows || 16;
 this.items = [];
 this.n = this.items.length;
 
 this.init = function() {
  var x, y;
  
  for(var row = 0; row < this.rows; row++) {
   y = row*unit_y;
   
   for(var col = 0; col < this.cols; col++) {
    x = ((row%2 == 0)?0:off_x) + col*unit_x;
    
    this.items.push(new GridItem(x, y));
   }
  }
  
  this.n = this.items.length;
 };
 
 this.draw = function(ct) {
  ct.fillStyle = HEX_BG;
  ct.beginPath();
  
  for(var i = 0; i < this.n; i++) {
   this.items[i].draw(ct);
  }
  
  ct.closePath();
  ct.fill();
  
  ct.strokeStyle = HEX_HL;
  ct.beginPath();
  
  for(var i = 0; i < this.n; i++) {
   this.items[i].highlight(ct);
  }
  
  ct.closePath();
  ct.stroke();
 };
 
 this.init();
};

var init = function() {
 var s = getComputedStyle(c[0]), 
   rows, cols;
 
 w = ~~s.width.split('px')[0];
 h = ~~s.height.split('px')[0];
 _min = .75*min(w, h);
 
 rows = ~~(h/unit_y) + 2;
 cols = ~~(w/unit_x) + 2;
 
 for(var i = 0; i < n; i++) {
  c[i].width = w;
  c[i].height = h;
  ctx[i] = c[i].getContext('2d');
 }
 
 grid = new Grid(rows, cols);
 grid.draw(ctx[1]);
 
 if(!source) {
  source = { 'x': ~~(w/2), 'y': ~~(h/2) };
 }
 
 neon();
};

var neon = function() {
 var k = (t%T_SWITCH)*f, 
   rgb = {
    'r': ~~(wp[csi].r*(1 - k) + 
       wp[(csi + 1)%nwp].r*k), 
    'g': ~~(wp[csi].g*(1 - k) + 
       wp[(csi + 1)%nwp].g*k), 
    'b': ~~(wp[csi].b*(1 - k) + 
       wp[(csi + 1)%nwp].b*k)
   }, 
   rgb_str = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')', 
   light = ctx[0].createRadialGradient(
    source.x, source.y, 0, 
    source.x, source.y, .875*_min
   ), stp;
 
 stp = .5 - .5*sin(7*t*f)*cos(5*t*f)*sin(3*t*f);
   
 light.addColorStop(0, rgb_str);
 light.addColorStop(stp, 'rgba(0,0,0,.03)');
 
 fillBackground('rgba(0,0,0,.02)');
 fillBackground(light);
 
 t++;
 
 if(t%T_SWITCH === 0) {
  csi++;
  
  if(csi === nwp) {
   csi = 0;
   t = 0;
  }
 }
 
 request_id = requestAnimationFrame(neon);
};

var fillBackground = function(bg_fill) {
 ctx[0].fillStyle = bg_fill;
 ctx[0].beginPath();
 ctx[0].rect(0, 0, w, h);
 ctx[0].closePath();
 ctx[0].fill();
};

init();

addEventListener('resize', init, false);

addEventListener('mousemove', function(e) {
 source = { 'x': e.clientX, 'y': e.clientY };
}, false);
 
</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) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-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 = $('.mys2010-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> 
Neon Hek code by. Ana Tudor
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here  Neon Hek with audio