Memasang Kode Text 3D 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: #111; 
}
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em purple;
} 
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,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;
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%); 
} 
/*Text Bawah1*/  
M-2010, #teks, #posisi, #dibawah, span {
  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:28px;
} 

.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 80px #FFFF00;    
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #0033CC;    
}
#M2010-shadow  { 
margin:-150px;
box-shadow: 0 0 150px 80px  #009999;  
}
.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 #FFC0CB;  
    -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;
}  
h1 {
font-family: "agency fb", sans-serif;
font-size: 85px;
text-align: center;
font-weight: bold;
color: #000;
margin-top: 130px;
}
.3D-text {
position:relative;}    
span {
text-shadow: 
0 -1px 0 #858585,       
0 1px 10px rgba(0,0,0,.6),
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.2),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 7px 10px rgba(0,0,0,.25),
0 15px 10px rgba(0,0,0,.2),
0 25px 15px rgba(0,0,0,.15);}
</style>
<h1 class="3D-text">
<span>M-2010<br>COPYRIGHT &#xA9; 2016 CIBEBER CIMAHI</span></h1>

<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> 
<header>
<a href="https://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/emanloveforplace/tempatlagu/Don-Williams-Recall-MeM2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<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>
      $(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>  
Audio Code by. Jereme Causing
Design Code is Edited by. M-2010 on Codepen
If you want to directly copy  and  paste you canDownload Here Text 3D with Audio 

Memasang Kode Magnetype 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 {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em purple;
} 
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,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;
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%); 
} 
#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:28px;
} 
/*end*/ 
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 80px #FFFF00;    
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #0033CC;    
}
#M2010-shadow  { 
margin:-150px;
box-shadow: 0 0 150px 80px  #009999;  
}
.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 #FFC0CB;  
    -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;
}
     
 .text-bawah {
  position: absolute; 
right: 260px;
  bottom: 210px;  
font-size: 50px;
font-family: Century Gothic, sans-serif; 
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
  color: #222;  
  -webkit-animation: shadow 15s ease-in-out infinite;
          animation: shadow 15s ease-in-out infinite;
}
@-webkit-keyframes shadow {
  0% {
    text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 -1px 2px rgba(160, 7, 59, 0);
  }
  50% {
    text-shadow: 0 12px 7px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 50px black, 0 -1px 2px rgba(160, 7, 59, 0.6);
  }
  100% {
    text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 -1px 2px rgba(160, 7, 59, 0);
  }
}
@keyframes shadow {
  0% {
    text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 -1px 2px rgba(160, 7, 59, 0);
  }
  50% {
    text-shadow: 0 12px 7px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 50px black, 0 -1px 2px rgba(160, 7, 59, 0.6);
  }
  100% {
    text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 -1px 2px rgba(160, 7, 59, 0);
  }
}
body {
margin-top:1px;
  height: 100vh;
  overflow: hidden;
  background: #111;
  -webkit-animation: glow 8s both;
          animation: glow 8s both;
}
      @import url(http://fonts.googleapis.com/css?family=Raleway:100,900);
@-webkit-keyframes flip-top {
  from {
    -webkit-transform: rotate(50deg) translateY(120vh);
            transform: rotate(50deg) translateY(120vh);
  }
}
@keyframes flip-top {
  from {
    -webkit-transform: rotate(50deg) translateY(120vh);
            transform: rotate(50deg) translateY(120vh);
  }
}
@-webkit-keyframes flip-bottom {
  from {
    -webkit-transform: rotate(-50deg) translateY(120vh);
            transform: rotate(-50deg) translateY(120vh);
  }
}
@keyframes flip-bottom {
  from {
    -webkit-transform: rotate(-50deg) translateY(120vh);
            transform: rotate(-50deg) translateY(120vh);
  }
}
span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
  -webkit-perspective: 500px;
          perspective: 500px;
}
span:nth-child(odd):before {
  -webkit-animation-name: flip-top;
          animation-name: flip-top;
}
span:nth-child(odd):after {
  -webkit-animation-name: flip-bottom;
          animation-name: flip-bottom;
}
span:nth-child(even):before {
  -webkit-animation-name: flip-bottom;
          animation-name: flip-bottom;
}
span:nth-child(even):after {
  -webkit-animation-name: flip-top;
          animation-name: flip-top;
}
span:nth-child(1n + 0):before {
  color: #4EC0B6;
}
span:nth-child(1n + 0):after {
  color: #4ea4c0;
}
span:nth-child(2n + 1):before {
  color: #3967CB;
}
span:nth-child(2n + 1):after {
  color: #3c39cb;
}
span:nth-child(3n + 2):before {
  color: #FDCD2F;
}
span:nth-child(3n + 2):after {
  color: #e8fd2f;
}
span:nth-child(4n + 3):before {
  color: #E23942;
}
span:nth-child(4n + 3):after {
  color: #e26839;
}
span:nth-child(1):before {
  -webkit-animation-delay: 0.88706s;
          animation-delay: 0.88706s;
}
span:nth-child(1):after {
  -webkit-animation-delay: 1.32717s;
          animation-delay: 1.32717s;
}
span:nth-child(2):before {
  -webkit-animation-delay: 1.76318s;
          animation-delay: 1.76318s;
}
span:nth-child(2):after {
  -webkit-animation-delay: 2.19375s;
          animation-delay: 2.19375s;
}
span:nth-child(3):before {
  -webkit-animation-delay: 2.61756s;
          animation-delay: 2.61756s;
}
span:nth-child(3):after {
  -webkit-animation-delay: 3.03328s;
          animation-delay: 3.03328s;
}
span:nth-child(4):before {
  -webkit-animation-delay: 3.43965s;
          animation-delay: 3.43965s;
}
span:nth-child(4):after {
  -webkit-animation-delay: 3.8354s;
          animation-delay: 3.8354s;
}
span:nth-child(5):before {
  -webkit-animation-delay: 4.21932s;
          animation-delay: 4.21932s;
}
span:nth-child(5):after {
  -webkit-animation-delay: 4.59022s;
          animation-delay: 4.59022s;
}
span:nth-child(6):before {
  -webkit-animation-delay: 4.94696s;
          animation-delay: 4.94696s;
}
span:nth-child(6):after {
  -webkit-animation-delay: 5.28843s;
          animation-delay: 5.28843s;
}
span:nth-child(7):before {
  -webkit-animation-delay: 5.61358s;
          animation-delay: 5.61358s;
}
span:nth-child(7):after {
  -webkit-animation-delay: 5.92141s;
          animation-delay: 5.92141s;
}
span:nth-child(8):before {
  -webkit-animation-delay: 6.21098s;
          animation-delay: 6.21098s;
}
span:nth-child(8):after {
  -webkit-animation-delay: 6.48137s;
          animation-delay: 6.48137s;
}
span:nth-child(9):before {
  -webkit-animation-delay: 6.73177s;
          animation-delay: 6.73177s;
}
span:nth-child(9):after {
  -webkit-animation-delay: 6.96139s;
          animation-delay: 6.96139s;
}
span:before, span:after {
  display: block;
  content: attr(data-text);
  -webkit-animation: 0.88889s ease-out both;
          animation: 0.88889s ease-out both;
  -webkit-animation-name: inherit;
          animation-name: inherit;
  text-shadow: 0 0 1em;
}
span:before {
  -webkit-clip-path: polygon(0 0 100% 0, 100% 100%);
  clip-path: polygon(0 0 100% 0, 100% 100%);
  position: absolute;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  color: #4EC0B6;
}
span:after {
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  color: #222;  
  -webkit-animation: shadow 5s ease-in-out infinite;
          animation: shadow 5s ease-in-out infinite;
}
</style>
<div align="center" style="margin-top:70px">
    <span data-text="M"></span>
<span data-text="-"></span>
<span data-text="2"></span>
<span data-text="0"></span>
<span data-text="1"></span>
<span data-text="0"></span>

<div class="text-bawah"><a href="http://sites.google.com/site/theecodes/lagu/Don-Williams-Lay-Down-Beside2-MeM2010s.mp3"title="Download Don Williams Mp3"><font size="30" color="#000"face="arial"> COPYRIGHT &#xA9; 2016 CIBEBER CIMAHI</a></div>
<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>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/09/magnetype-with-audio.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://sites.google.com/site/safe50534/lagu/Magnetype-with-audio-M2010.css"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/theecodes/lagu/Don-Williams-Lay-Down-Beside2-MeM2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<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>
      $(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>
Audio Code by. Jereme Causing
Magnetype Code by. Bennett Feely
Design Code is Edited by. M-2010 on Codepen
If you want to directly copy  and  paste you canDownload Here Magnetype with audio 

Memasang Kode Flying bird 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: linear-gradient(270deg,  #333, #660099, #333, #660099,#008E00, #8E006B,#008E00, #660099, #333, #660099,#333);
   font-family: 'agency fb', Helvetica, Arial, sans-serif;
}
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em purple;
} 
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:-3px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;
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%); 
} 
#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:28px;
} 
#gradient { 
position: fixed; 
bottom:-119px; 
width: 600%;
height: 600%;
left:-20px;
position: absolute;
background: linear-gradient(270deg, #9400D3, #003366, #b27000, #06617d, #f00, #ff0, #067370, #B0E0E6, #009999, #330099, #B20000, #800080,  #8B4513, #CC0099, #87CEEB, #00FFFF,  #DC143C, #4B0082 ,  #8B008B, #FF7F50, #DDA0DD, #800080, #B0E0E6 , #008080 ,   #D8BFD8, #40E0D0 ,   #DA70D6, #FF69B4, #9400D3  );
background-size: 800% 800%; 
-webkit-animation: colors 160s ease infinite;
-moz-animation: colors 160s ease infinite;
animation: colors 160s ease infinite;
}
@-webkit-keyframes colors {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes colors {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes colors { 
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.svg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.svg--rays {
  width: 100%;
  height: 100%;
}
.svg--bird {
  top: -60px;
  left: -30px;
  width: 280px;
  height: 350px;
  /* mix-blend-mode: difference */
}
.c-rays {
  fill: none;
  stroke:#003366;
  stroke-width: 100%;
  stroke-dasharray: 7%;
  -webkit-animation: rotate 20s linear infinite;
          animation: rotate 20s linear infinite;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.svg--bird {
  -webkit-animation: up-down 1.68s infinite ease-out;
          animation: up-down 1.68s infinite ease-out;
}
@-webkit-keyframes up-down {
  50% {
    -webkit-transform: translate(0, 30px);
            transform: translate(0, 30px);}}
@keyframes up-down {
  50% {
    -webkit-transform: translate(0, 30px);
            transform: translate(0, 30px);}}
.container {
  position: fixed;
  bottom: 1em;
  right: 1em;
}
/*1-bottom up 50px*/
.menu-toggle {
  width: 50px;
  height:50px;
  border-radius: 50%;
  background-color: #111;  
  position: absolute;
  z-index: 5;
  bottom: 46px;
  right:1px;
  display: table;
  text-align: center;
}
.menu-toggle .fa {
  color: #dad;
  font-size: 18px;
  display: table-cell;
  vertical-align: middle;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.menu-toggle.open .fa {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.btn-app {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  position: absolute;
  background-color: #4644fd;
  color: #fff;
  text-align: center;
}
.btn-app .fa {
  line-height: 2.5em;
}
.open .btn-app {
  box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
}
/*2- bottom up 50px*/
.menu-round {
  position: absolute;
bottom:  50px;
  right: 0;
  z-index: 3;
}
.menu-round .btn-app {
  bottom: 0.25em;
  right: 0.25em;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.menu-round.open .btn-app:nth-of-type(1) {
  right: 0.5em;
bottom: 4.25em;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.menu-round.open .btn-app:nth-of-type(2) {
  right: 3.5em;
  bottom: 3.5em;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.menu-round.open .btn-app:nth-of-type(3) {
  right: 4.25em;
  bottom: 0.5em;
}
/*3- bottom up icon 20px*/
.menu-line {
  position: absolute;
bottom: 50px;
  z-index: 2;
}
/*4- bottom up 50px*/
.menu-line .btn-app {
  bottom: 50px;
  right: 0.5em;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.menu-line.open .btn-app:nth-of-type(1) {
  bottom: 50px;
}
.menu-line.open .btn-app:nth-of-type(1) {
  bottom: 7.25em;
}
.menu-line.open .btn-app:nth-of-type(2) {
  bottom: 10.25em;
}
.menu-line.open .btn-app:nth-of-type(3) {
  bottom: 13.25em;
}
.menu-line.open .btn-app:nth-of-type(4) {
  bottom: 16.25em;
}
.menu-line.open .btn-app:nth-of-type(5) {
  bottom: 19.25em;
}
.menu-line.open .btn-app:nth-of-type(6) {
  bottom: 22.25em;
}
.menu-line.open .btn-app:nth-of-type(7) {
  bottom: 25.25em;
} 
</style>
 <div id="gradient">
</div>
<svg class="svg svg--bird" viewBox="0 0 280 450">
    <defs>
        <mask id="mask" maskunits="userSpaceOnUse"
              maskcontentunits="userSpaceOnUse">
            <image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHbvHHPXvRXQ6RfqcyZ1HqCRe2PdDULzLRn-eoI7r6KLl6cyF8N-ly69kHXHFgBKxZ0-bCDpPFFgA9aN9A6KR3Qb6o34aIEkqE_l7-J3ezlzipbLVQeEtBHlsWY-WTQE8vutXU9XhHQaM/s1600/Bird-M2010.gif" 
                   width="277" height="293"></image>
        </mask>        
        <filter id="drop-shadow">
          <feGaussianBlur stdDeviation="5"  in="SourceAlpha" />
          <feOffset dx="4" dy="140"           result="offsetblur"/>
          <feFlood flood-color="#222"/>
          <feComposite operator="in"        in2="offsetblur"/>
          <feMerge>
            <feMergeNode/>
            <feMergeNode                    in="SourceGraphic"/>
          </feMerge>
        </filter>
    </defs>
    
    <g  filter="url(#drop-shadow)">
        <g mask="url(#mask)">
            <circle r="50%" cx="60%" cy="35%" class="c-rays" ></circle>
        </g>
    </g>
</svg>

 
 
<div class="share"> 
<div class="container">
	<div class="menu-toggle">
		<span class="fa fa-superscript"></span>
	</div>
	
	<div class="menu-round">
		<div class="btn-app">
	<a id="hover" class="text" href="https://twitter.com/myscript2010s"target="_blank" title="Twitter"><span style="color:#0033CC"i class="fa fa-twitter"></i></a>
   </div>
		<div class="btn-app">
	<a id="hover" class="text" href="https://www.facebook.com/learn.editing.myscript2010"target="_blank" title="Facebook"><span style="color:#0033CC"i class="fa fa-facebook"></i></a>
   </div>	 
		<div class="btn-app">
	<a id="hover" class="text" href="https://plus.google.com/u/0/101254379497511200564/posts"target="_blank" title="G-Plus"><span style="color:#0033CC"i class="fa fa-google-plus"></i></a>
  </div>	 
	</div>
	
	<div class="menu-line">
		<div class="btn-app">
	<a id="hover" class="text" href="http://codepen.io/Myscript2010"target="_blank" title="Codepen"><span style="color:#0033CC"i class="fa fa-codepen"></i></a>
		</div>
		<div class="btn-app">
<a id="hover" class="text" href="https://id.pinterest.com/myscript2010"target="_blank" title="Pinterest"><span style="color:#0033CC"i class="fa fa-pinterest"></i></a>
 </div>	
		<div class="btn-app">
	<a id="hover" class="text" href="https://github.com/Myscript2010/Editing-Script-2010-2016"target="_blank" title="Github"><span style="color:#0033CC"i class="fa fa-github" aria-hidden="true"></i>
</i></a>
		</div>
		<div class="btn-app">
	<a id="hover" class="text" href="https://www.linkedin.com"target="_blank" title="Linkedin"><span style="color:#0033CC"i class="fa fa-linkedin"></i></a>
  </div>
		<div class="btn-app">
	<a id="hover" class="text" href="https://www.youtube.com/user/myscript2010s"target="_blank" title="Youtube"><span style="color:#0033CC"i class="fa fa-youtube"></i></a>
 </div>
		<div class="btn-app">
	<a id="hover" class="text" href="https://dribbble.com/Myscript2010s"target="_blank" title="Dribbble"><span style="color:#0033CC"i class="fa fa-dribbble"></i></a>
	</div>

	<div class="btn-app">
	<a id="hover" class="text" href="http://demoshow-mys2010.blogspot.co.id/p/contact-us-music.html"target="_blank" title="Email"><span style="color:#0033CC"i class="fa fa-envelope"></i></a>
  </div> 
		</div>
	</div>
 <header>
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/theecodes/lagu/Don-Williams-Lay-Down-Beside-MeM2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='//codepen.io/assets/reset/normalize.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'>
</script>
<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>
      $(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> 
<script>$('.menu-toggle').click(function () {
    $('.menu-toggle').toggleClass('open');
    $('.menu-round').toggleClass('open');
    $('.menu-line').toggleClass('open');
}); 
</script>
Flying bird Code by. Yoksel
Audio Code by. Jereme Causing
Button Share Code by. Simon Gooder
Design Code is Edited by. M-2010 on Codepen
If you want to directly copy  and  paste you canDownload Here Flying bird with audio 

Memasang Kode Magic Rays 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: linear-gradient(270deg,  #333, #660099, #333, #660099,#008E00, #8E006B,#008E00, #660099, #333, #660099,#333);
   font-family: 'agency fb', Helvetica, Arial, sans-serif;
}
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em purple;
} 
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,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;
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%); 
} 
#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:28px;
}
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 80px #FFFF00;    
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #0033CC;    
}
#M2010-shadow  { 
margin:-150px;
box-shadow: 0 0 150px 80px  #009999;  
}
.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 #FFC0CB;  
    -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;
}
.wrapper {
  position: relative;
  height: 100%;
}
.text {
  position: relative;
  z-index: 1;
  position: absolute;
  left: -1em;
  right: -1em;
  top: 6em;
  bottom: -1em;
  margin: auto;
  height: 1em;
  font: 5em/1 Broadway, Georgia, cursive;
  text-align: center;
  text-shadow: -1px -1px #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
   color: #222;
  -webkit-transition: all .7s;
  transition: all .7s;
}
H1:hover {
  color: lightgray;
}
UL {
  position: absolute;
  left: -1em;
  right: -1em;
  top: -1em;
  bottom: -6em;
  margin: auto;
  padding: 0;
  width: 0;
  height: 0;
  list-style: none;
  -webkit-animation: 10s rotate infinite linear;
          animation: 10s rotate infinite linear;
}
LI,
LI:before,
LI:after {
  position: absolute;
  border: 0 solid transparent;
  border-width: 1.2em 20em;
  border-color: transparent rgba(255, 0, 0, 0.2); 
  width: 0;
  height: 0;
  font-size: 20px;
}
LI {
  left: -20em;
  top: 50%;
  margin-top: -1.2em;
  -webkit-transform: rotate(0.1deg);
          transform: rotate(0.1deg);
}
LI:before,
LI:after {
  left: -20em;
  top: -1.2em;
  display: block;
  content: "";
}
LI:before {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
LI:after {
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
}
LI:nth-child(2) {
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}

LI:nth-child(3) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
LI:nth-child(4) {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
} 
</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>
 <a href="http://Link Title" target="_blank" title="Mari Belajar">
<div class="wrapper">
    <h1 class="text">CIBEBER CIMAHI</h1></a>  
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>  
  </div>
<header>
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/theecodes/lagu/Don-Williams-Lay-Down-Beside-MeM2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<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>
      $(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>
Magic Rays Code by. Yoksel
Audio Code by. Jereme Causing
Design Code is Edited by. M-2010 on Codepen
If you want to directly copy  and  paste you canDownload Here Magic Rays with Audio 

Memasang Mummy style text
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: linear-gradient(270deg,  #333, #660099, #333, #660099,#008E00, #8E006B,#008E00, #660099, #333, #660099,#333);
   font-family: 'agency fb', Helvetica, Arial, sans-serif;
}
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em purple;
} 
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:-16px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;
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%); 
} 
#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:28px;
} 
/*end*/ 
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 80px #FFFF00;    
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #0033CC;    
}
#M2010-shadow  { 
margin:-150px;
box-shadow: 0 0 150px 80px  #009999;  
}
.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 #FFC0CB;  
    -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;
}
/*end*/
.M-logo {
  position: absolute;
  top: 40%;
  left: 58%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 1024px;
  height: 350px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0kMSn1klfPD-qTo_YiVkhZGau5P9xLNRyNttByGwCuXvX6fRlBLuvIrWNEKVVBL7YiURitxRsnBvUkk5X8K02zqn8PA6PyMj03o5_0mmVva_Xj0dSDWF1RebHStZ7oeT4hTirCN0998/s1600/logo-M2010.png);
  background-repeat: no-repeat;
} 
.M2010 {  
  margin: 0 auto;
  text-align: center;
  color: #FFF8DC;
  text-shadow: 0 0 10px #87ceeb, 0 0 15px #87ceeb, 0 0 30px #87CEEB;
}
</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>
<header>
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/theecodes/lagu/Don-williams-Jamaica-farewell-M2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<h3 class="M2010">
<div align="center" style="margin-top:310px">
<font size="5" color="#12127D"face="agency fb">COPYRIGHT &#xA9; 2016 CIBEBER CIMAHI</h3>
</div>
</div>
<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>
      $(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>  
Audio Code by. Jereme Causing
Design Code is Edited by. M-2010 on Codepen
If you want to directly copy  and  paste you canDownload Here Logo with Bg Gradient 

Memasang Kode Lighthouse 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: linear-gradient(to bottom, #000 0%, #57c1eb 100%);
}
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em purple;
} 
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:-10px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;
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%); 
} 
#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:28px;
} 
.M2010 {  
  margin-top:-450px;
  margin-left:700px; margin-right: 20px; 
  color: #FFF8DC;
  text-shadow: 0 0 30px #FFFF00, 0 0 35px #eee8aa, 0 0 30px #87CEEB;
}
.sky {
  height: 500px;
  position: relative;
  width: 100%;
}
.ground {
  float: left;
  height: 200px;
  position: relative;
  width: 80%;
  border-radius: 0 25px 0 0;
  background: linear-gradient(to bottom, #59230B 0%, #2F1107 100%);
}
.lighthouse {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 200px;
  height: auto;
}
.lighthouse .base {
  height: 50px;
  width: 100%;
  background: #444;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.lighthouse .base .door {
  height: 70%;
  position: absolute;
  bottom: 0;
  width: 5px;
  background: brown;
}
.lighthouse .towerSection {
  height: 40px;
  width: 80%;
  margin: auto;
  background: #B20000;
}
.lighthouse .towerSection:nth-child(2n) {
  background: red;
}
.lighthouse .towerTopper {
  height: 20px;
  width: 90%;
  background: #990099;
  border-radius: 0 0 5px 5px;
  margin: auto;
}
.lighthouse .lightbox {
  margin: auto;
  width: 70%;
  height: 140px;
  padding-top: 20px;
  background: rgba(0, 0, 0, 0.2);
}
.lighthouse .lightbox .bulb {
  margin: auto;
  width: 40%;
  height:40%;
  background:rgba(255, 0, 0, 0.2);
  border-radius: 60% ;
-moz-box-shadow:    inset 0 0 10px rgba(255, 0, 0, 0.6);
   -webkit-box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.6);
   box-shadow:         inset 0 0 10px rgba(255, 0, 0, 0.6);
}
.box {
position: absolute;
right:65px;
width: 200px;
height:70px;
width:70px;
border-radius:35px;
background: #000;
margin-top:115px;
-moz-box-shadow:    inset 0 0 10px rgba(255, 0, 0, 0.8);
   -webkit-box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.8);
   box-shadow:         inset 0 0 10px rgba(255, 0, 0, 0.8);
}
.lighthouse .topper {
  height: 30px;
  width: 90%;
  background: #990099;
  border-radius: 50% 50% 0 0;
  margin: auto;
}
#lightWrapper {
  width: 100px;
  z-index: -2;
  height: 10px;
  position: absolute;
  margin: 30px;
  perspective: 10px;
  animation: rotate 8s infinite;
  transform-origin: left;
}
.light {
  background: url(https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png);
  background: linear-gradient(to right, white 0%, white 16%, rgba(255, 255, 255, 0.72) 48%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000',GradientType=1 );
  width: 100%;
  height: 100%;
  transform: rotatey(-12deg);
  border-radius: 5000px 5px 5px 5000px;
}
@keyframes rotate {
  0% {
    transform: rotatey(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    transform: rotatey(180deg);
  }
  61% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.la {
  position: absolute;
  bottom: 10px;
  width: 7px;
  height: 150px;
  background: #111;
  margin-right: 20px;
}
.la:before {
  top: 5px;
  left: -10px;
  width: 22px;
  height: 2px;
  background: #182b3d;
}
.la:after {
  bottom: 0;
  left: -2px;
  width: 6px;
  height: 12px;
  background: #182b3d;
}
.l {
  position: absolute;
  width: 15px;
  height:15px;
  border-radius:50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 25px #fff, 0 0 50px #fff;
}
.l:nth-child(1) {
  left: -13px;
}
.l:nth-child(2) {
  right: -13px;
}
.la:nth-child(1) {
  left: 100px;
}
.la:nth-child(2) {
  left: 200px;
}
.la:nth-child(3) {
  left: 300px;
}
.la:nth-child(4) {
  left: 400px;
}
.la:nth-child(5) {
  left: 500px;
}
.la:nth-child(6) {
  left: 600px;
}
.la:nth-child(7) {
  left: 700px;
}
.la:nth-child(8) {
  left: 800px;
}
.la:nth-child(9) {
  left: 900px;
}
.la:nth-child(10) {
  left: 1000px;
}
.la:nth-child(11) {
  left: 1100px;
}
.la:nth-child(12) {
  left: 1200px;
}
.la:nth-child(13) {
  left: 1300px;
}
.la:nth-child(14) {
  left: 1400px;
}
.la:nth-child(15) {
  left: 1500px;
}
.la:nth-child(16) {
  left: 1600px;
}
.la:nth-child(17) {
  left: 1700px;
}
.la:nth-child(18) {
  left: 1800px;
}
.la:nth-child(19) {
  left: 1900px;
}
.la:nth-child(20) {
  left: 2000px;
}    
</style> 
<div class="planet">
  <div class="sky">
    <div class="lighthouse">
<div class="box"></div>
      <div class="topper"></div>
      <div class="lightbox">
        <div class="bulb">
          <div id="lightWrapper">
           <div class="light"></div>
          </div>
        </div>
      </div>
      <div class="towerTopper"></div>
      <div class="towerSection"></div>
      <div class="towerSection"></div>
      <div class="towerSection"></div>
      <div class="towerSection"></div>
      <div class="towerSection"></div>
    
      <div class="base">        
      </div>
    </div>
  </div>
  <div class="ground">
<h3 class="M2010"> 
<font size="2" color="#12127D"face="agency fb">COPYRIGHT &#xA9; 2016 CIBEBER CIMAHI</h3>
</div>
</div>
</div>     
  </div>
</div>
<div class='lampu'>
<div class='layer l3'>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<header>
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/theecodes/lagu/Don-Williams-Expressions-M2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<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>
      $(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>
Audio Code by. Jereme Causing
Lighthouse code by. Bradley Jordan
Design Code is Edited by. M-2010 on Codepen
If you want to directly copy  and  paste you canDownload Here Lighthouse With Audio 

Memasang Kode Mummy style text
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: linear-gradient(270deg,  #333, #660099, #333, #660099,#008E00, #8E006B,#008E00, #660099, #333, #660099,#333);
   font-family: 'agency fb', Helvetica, Arial, sans-serif;
}
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em purple;
} 
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:-10px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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,  #333, #660099, #333, #660099,#660, #B20000, #660, #660099, #333, #660099,#333);
  border-bottom: 3px solid #333;
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%); 
} 
#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:28px;
} 
.M2010 {  
  margin: 0 auto;
  text-align: center;
  color: #FFF8DC;
  text-shadow: 0 0 10px #87ceeb, 0 0 15px #87ceeb, 0 0 30px #87CEEB;
}
/*end*/
@import url(http://fonts.googleapis.com/css?family=Russo+One);
HTML, BODY {
  height: 100%;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
margin-top:-60px
}
text {
  stroke: #87ceeb;
  stroke-width: 2;
  stroke-dasharray: 20;
  font: 10em/1 'Russo One', Impact;
}
.g-lines path {
  stroke: #f00;
  stroke-width: 10;
}
</style> 
<svg viewbox="0 0 1024 640">
  <linearGradient id="gr-mask-opacity"
        x1="100%" y1="0" x2="100%" y2="25%"
        gradientUnits="objectBoundingBox">
      <animate attributeName="x1" 
               values="-100%;100%;"
               dur="7s" repeatCount="indefinite" />
      <animate attributeName="x2" 
               values="0%;200%;"
               dur="7s" repeatCount="indefinite" />    
      <stop stop-color="rgb(0,0,0)" offset="0%"/>
      <stop stop-color="rgb(255,255,255)" offset="30%"/>
      <stop stop-color="rgb(255,255,255)" offset="70%"/>
      <stop stop-color="rgb(0,0,0)" offset="100%"/>
  </linearGradient>
  <mask id="mask-text-appear"
        maskunits="userSpaceOnUse"
        maskcontentunits="userSpaceOnUse">
            <rect width="100%" height="100%" fill="url(#gr-mask-opacity)"/>
  </mask>
<pattern id="pt-stripes" 
           width="100" height="100" 
           viewBox="0 0 600 400"
           patternUnits="userSpaceOnUse">
    <g class="g-lines">
      <path d="M0,0 600,400" class="pt-line"/>
      <path d="M0,200 600,350" class="pt-line"/>
      <path d="M0,350 600,350" class="pt-line"/>
      <path d="M0,200 600,0" class="pt-line"/>
      <path d="M0,150 600,200" class="pt-line"/>
      <path d="M0,400 600,150" class="pt-line"/>
      <path d="M0,150 600,100" class="pt-line"/>
      <path d="M0,100 600,300" class="pt-line"/>
      <path d="M0,300 600,10" class="pt-line"/>
      <path d="M0,300 600,250" class="pt-line"/>
      <path d="M0,250 600,400" class="pt-line"/>
      <path d="M100,0 600,200" class="pt-line"/>
      <path d="M100,0 0,250" class="pt-line"/>
      <path d="M400,0 300,400" class="pt-line"/>
      <path d="M300,0 100,400" class="pt-line"/>
      <path d="M200,0 300,400" class="pt-line"/>
      <path d="M400,0 600,400" class="pt-line"/>
      <path d="M400,400 500,0" class="pt-line"/>
      <path d="M200,400 170,0" class="pt-line"/>
      <path d="M170,400 370,0" class="pt-line"/>
      <path d="M370,400 600,0" class="pt-line"/>
      <path d="M0,40 600,40" class="pt-line"/>
      <path d="M0,20 600,100" class="pt-line"/>
      <path d="M500,400 600,100" class="pt-line"/>
      <path d="M0,100 40,40" class="pt-line"/>
      <path d="M260,-5 60,405" class="pt-line"/>
      <path d="M60,-5 260,405" class="pt-line"/>
      <path d="M-5,240 110,405" class="pt-line"/>
      <path d="M120,160 0,405" class="pt-line"/>
      <path d="M600,200 395,405" class="pt-line"/>
      <path d="M400,120 370,405" class="pt-line"/>
      <path d="M300,0 400,120" class="pt-line"/>
      <path d="M280,190 370,405" class="pt-line"/>
    </g>
  </pattern>
  <g mask="url(#mask-text-appear)"
     fill="url(#pt-stripes)">
    <text x="50%" y="33%" dy=".25em"
        text-anchor="middle"
        >M-2010</text>
    <text x="50%" y="67%" dy=".25em"
        text-anchor="middle"
        >CIBEBER CIMAHI</text>
  </g>  
</svg>
<header>
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/sitescode2/lagu/Don-William-Emmylou-M2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<h3 class="M2010">
<div align="center" style="margin-top:460px">
<font size="5" color="#12127D"face="agency fb">COPYRIGHT &#xA9; 2016 LEARN EDITING SCRIPT</h3>
</div>
</div>
<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>
      $(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>
Audio Code by. Jereme Causing
Mummy Style Text code by. Yoksel
Design Code is Edited by. M-2010 on Codepen
If you want to directly copy  and  paste you canDownload Here Mummy Style Text