Memasang Newspaper-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 type="text/css">   
.koran{   
-moz-column-count:4; 
-webkit-column-count:4;   
column-count:4; 
-moz-column-gap:100px;   
-webkit-column-gap:100px;   
column-gap:100px;  
-moz-column-rule-style:outset;   
-webkit-column-rule-style:outset;    
column-rule-style:outset;    
-moz-column-rule-color:#ff0000;     
-webkit-column-rule-color:#ff0000;     
column-rule-color:#ff0000;}    
</style>
<div class="koran">
Your text here
</div>
If you want to directly copy and paste you canDownload Here Newspaper-style text 

Memasang Logo with gradient code
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;}
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:80px;
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: 900 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:45px;
 -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-atas:after { 
    content: " ";
    box-shadow: 0 0 200px 108px #fff;   
}
.shadow-atas:before {  
    content: " ";
    box-shadow: 0 0 200px 110px #809FFE;    
}
#M2010-shadow-atas  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #A52A2A;  
}
.shadow-bawah:before,.shadow-bawah:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px #809FFE;  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow-bawah:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;
}
body {
  background-color: rgba(0, 67, 125, 0.9);
}
figure {
 position: absolute;
 display: block;
 width: 520px;  
  top: 30%;
  left:  40%;
  margin: 0 0 0 -150px;
}
figure:before {
 content: "";
 position: absolute;
 display: block;
 width: 132%;
 height: 132%;
 top: -16%;
 left: -16%;
 background-color: #f8f8f8;
 z-index: -1;
 box-shadow:
  inset 0px 10px .5em rgba(7,7,7,.7),
  inset .1em 0px .1em rgba(7,7,7,.7),
  inset -0.1em 0px .1em rgba(7,7,7,.7),
  0 .3em .2em #DA70D6 ;
 background-image: -moz-radial-gradient(50% 50%, circle farthest-corner,  #FFDEAD, #1E90FF  100%);
 background-image: -webkit-radial-gradient(50% 50%, circle farthest-corner,  #FFDEAD, #1E90FF  100%);
 background-image: -o-radial-gradient(50% 50%, circle farthest-corner,  #FFFF00, #1E90FF  100%);
 background-image: -ms-radial-gradient(50% 50%, circle farthest-corner,  #FFFF00, #1E90FF  100%);
 background-image: radial-gradient(50% 50%, circle farthest-corner,  #FFDEAD, #1E90FF  100%)
}
figure:after {
 content: "";
 position: absolute;
 display: block;
 width: 145%;
 height: 148%;
 top: -22.5%;
 left: -22.5%;
 border: 3px solid #809FFE;
 background: #111;
 z-index: -2;
 box-shadow:
  0px 1em 2em -1em rgba(0,0,0,.4),
  0px 2em 2em -1em rgba(0,0,0,.3),
  0px 3em 2em -1em rgba(0,0,0,.2),
  0px 4em 1.5em -1em rgba(0,0,0,.15),
  0px 2em 4em .5em rgba(0,0,0,.1),
  inset 0 .2em .1em rgba(7,7,7,.7);
}
img {
 background-color: rgba(255, 0, 0, 0.1);
 position: relative;
 display: block;
 width: 88%;
 height:197px;
 padding: 6%;
 box-shadow: inset 0px .3em .1em #000); 
}
#wrapper{
  width:490px;
  margin-left:-11px;
  margin-right:0px;
  margin-top:9px;
  padding:15px;  
  width: 500px;
    height: 250px;
    padding: 20px;
    border: 1px solid darkorange;
    border-radius: 8px;
-webkit-box-shadow: 0px 1px 71px 15px #330099;
-moz-box-shadow:    0px 1px 71px 15px rgba(0, 0, 0, 0.5);
}
</style> 
<div align="center" style="margin-top:110px">
<div id="M2010-shadow-atas">
</div> 
<div class="shadow-atas">
</div>
<div class="shadow-bawah">
</div> 
<figure> 
<div id="wrapper">
<img src="https://sites.google.com/site/sule62001/sule2001code/Mylogo-M2010.png" />
</figure>
<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:11px; 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://Link Title"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
 <audio id="player" preload="auto">
  <source src="https://sites.google.com/site/sulelagu042/l/Instru-M2010.mp3">
  </source></h2>
</a></div>
</div>
<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>
<link Audio mp3>
<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 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 gradient code

Memasang Kode Blank Templates
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 di bawah ini :  copy kode berikut, edit background warna sesuai keingian kemudian klik simpan selesai.
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<meta content='Call' name='Sule'/>
<meta content='Initials' name='M.2010'/>
<meta content='Webblog' name='Myscript2010'/>
<meta content='Work' name='Create Blog'/>
<meta content='Skill' name='Design'/>
<meta content='Design' name='Blogger'/>
<meta content='Blogger' name='Blogspot'/> 
<meta content='Residence' name='Cibeber Cimahi'/>
<meta content='City' name='Bandung'/>
<meta content='Province' name='West Java'/>
<meta content='Country' name='Indonesian'/>
<meta content='Language' name='Sundanese'/>
<meta expr:content='data:blog.pageName' property='og:title'/>    
<meta expr:content='data:blog.title' property='og:site_name'/>     
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>     
<b:if cond='data:blog.metaDescription'>     
<meta expr:content='data:blog.metaDescription' property='og:description'/>     
</b:if>     
<b:if cond='data:blog.pageType == &quot;item&quot;'>     
<meta content='article' property='og:type'/>     
<b:if cond='data:blog.postImageThumbnailUrl'>     
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>     
</b:if>     
<b:else/>     
<meta content='blog' property='og:type'/>     
<meta content='URL for image file, e.g. site logo' property='og:image'/>     
</b:if> 
<b:skin><![CDATA[
================================================
Blogger Template Style
Nama        : Blank Template
diedit oleh : Myscript2010
Tgl Edit    : 17/01/16
Sumber Kode : Blogger
================================================
/* terlihat */ 
#navbar-iframe { opacity:0.2; filter:alpha(Opacity=0); } 
#navbar-iframe:hover { opacity:0.5; filter:alpha(Opacity=100, FinishedOpacity=50); }

/* tidak terlihat */ 
#navbar-iframe { opacity:0.0;filter:alpha(Opacity=0); } 
#navbar-iframe:hover { opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100); }

/* tidak menggaris bawahi */
#navbar-iframe{height:0;visibility:hidden;display:none;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
a:link,a:visited{color:#fff;text-decoration:none;margin-left:0px;margin-right:0px;}
a img{border-width:0;}

/* http://myscript2010s.blogspot.co.id
   versi    : none | 17/01/16
   Lisensi  : none | publik domain */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;}
 
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
} 
img{max-width:100%;vertical-align:middle;border:0;height:auto;}
.quickedit{display:none;}
.clear{clear:both;}
body{background:#dad;margin:0;padding:0;font-family: calibri;color:#fff;}
.quickedit{
display:none;
}
.feed-links{ display:none; }
.status-msg-body {display:none;
}
.status-msg-wrap {display:none;
}
#Attribution1 {
height:0px;
visibility:hidden;
display:none
]]></b:skin>
</head>
<body>
<b:section class='main' id='main2' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<center><a href="http://Blank Template ">Myscript2010 </a></center>
</body>
</html>
Templates Code by. Blogger
Design Code is Edited by. M-2010
* If you want to directly copy  & paste you canDownload Here Blank Templates Code  

Memasang Sitemamp Diagrams 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:  0px 0;
  position: fixed;
  top: -12px;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #809FFE;   
font-size:  6px;
background: -moz-linear-gradient(top, #444 0%, #333 100%);
  border-bottom: 3px solid #809FFE;   
}
.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 #809FFE;   
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, #333 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #444 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: 15px;
    bottom:18px;
 -webkit-animation: shadow 60s ease-in-out infinite;
          animation: shadow 60s ease-in-out infinite;
}
@keyframes shadow {
  0% {
    text-shadow:  0 0 2px   #809FFE, 
0 0 8px  #809FFE, 0 0 10px  #809FFE, 
0 0 20px #809FFE, 0 0 30px  #809FFE, 
0 0 40px #809FFE, 0 0 50px  #809FFE, 
0 0 80px #809FFE;
  }
  50% {
      text-shadow: 0 12px 7px #0033CC,
 0 5px 15px #0033CC, 0 0 50px #0033CC,
 0 -10px 2px #0033CC;
  }
 100% {
    text-shadow: 0 0 2px        #809FFE, 
0 0 8px      #809FFE, 0 0 10px  #809FFE, 
0 0 20px     #809FFE, 0 0 30px  #809FFE, 
0 0 40px     #809FFE, 0 0 50px  #809FFE, 
0 0 80px     #809FFE;
}} 
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 180px #444;    
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 10px #F00;    
}
#M2010-shadow  { 
margin:-150px;
box-shadow: 0 0 150px 80px  #809FFE;
}
.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 #809FFE;  
    -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;

} 
body{
border:none;
background:#444;
font-size:10px;
font-family:'Source Sans Pro', sans-serif;
font-weight:300;
color:#86d004;
 text-shadow: 0 0 2px #809FFE, 
0 0 118px #809FFE, 0 0 10px #809FFE, 
0 0 180px #809FFE;
  } 
form {
width:355px;
height:355px;
margin:0 auto;}
#contact h3 {
text-align: center;
text-transform:uppercase;
margin-top:11px;
color:#fff;
display:block;
font-size:23px;
font-weight:200;
background-color:#000;
border: 2px solid #f0f;
width: 500px;
 -webkit-animation: shadow 1110s ease-in-out infinite;
          animation: shadow 1110s ease-in-out infinite;
-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);
}
.skill {
background: -webkit-linear-gradient(transparent 10%, #333 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #444 50%, transparent 90%); 
border: 2px solid transparent;
border-image: linear-gradient(to right, #EABFFE 60%,#FFFF00 90%);
border-image-slice: 1;
width: 200px;
margin: 20px 0px;
padding: 5px 0px;
 -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);
}
.skill p { 
margin: 0px 10px; 
color:#fff; 
} 
#wrapper{
  width:490px;
  margin-left:auto;
  margin-right:auto;
  margin-top:225px;
  padding:15px;  
  width: 500px;
    height: 450px;
    padding: 20px;
    border: 3px solid darkorange;
    border-image: linear-gradient(to left, #EABFFE 60%,#FFFF00 90%);
border-image-slice: 1;
  -webkit-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 71px 15px #000;
}
</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>
<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>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://codepen.io/hello/" 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/kodesite/svn/Fade-mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/12/grafh-views.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<div id="wrapper">
<section id="contact">
<h3>The skills I learned</h3>
<form>  
<font size="2" color="#5F9EAD"face="arial"> 
<div class="skill 1"><p>Statistik Pemirsa</p>
<p>Penayangan menurut Negara - Penayangan : Entri</p></div>
<div class="skill 5"><p>110</p><p>Indonesia</p></div>
<div class="skill 3"><p>2</p><p>Slovenia</p></div>
<div class="skill 2"><p>349</p><p>Rusia</p></div>
<div class="skill 4"><p>15</p><p>Amerika Serikat</p></div>
<div class="skill 6"><p>4</p><p>Prancis</p></div>
<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>
$('.1').animate({ width: '95%' }, 1000);
$('.2').animate({ width: '85%' }, 1000);
$('.3').animate({ width: '30%' }, 1000);
$('.4').animate({ width: '60%' }, 1000);
$('.5').animate({ width: '75%' }, 1000);
$('.6').animate({ width: '40%' }, 1000);
</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
Grafh Views Code by. Stefanie Voss
Design code is edited by. Mys2010 In Codepen
* If you want to directly copy and paste you canDownload Here Grafh Views Audio 

Memasang Sitemamp Diagrams 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 {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-family: Agency FB;
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:80px;
margin: auto;
font-family: Agency FB;
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:45px;
 -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 #0033CC;  
}
.shadow-top:before {   
    content: " ";
    box-shadow: 0 0 200px 250px #8A2BE2;     
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #809FFE;  
}
.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 #8A2BE2; 
    -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;
}
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:150px;
  padding:15px;  
  width: 500px;
    height: 450px;
    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);
}
.nav {
  margin: 20px auto;
  width: 455px;
  min-height: auto;
}
.nav ul {
  position: relative;
  padding-top: 20px; 
}
.nav li {
  position: relative;
  padding: 20px 3px 0 3px; 
  float: left;   
  text-align: center;
  list-style-type: none; 
}
.nav li::before, .nav li::after{
  content: '';
  position: absolute; 
  top: 0; 
  right: 50%;
  width: 50%; 
  height: 20px;
  border-top: 1px solid #f00;
}
.nav li::after{
  left: 50%;
  right: auto;   
  border-left: 1px solid #eee;
}
.nav li:only-child::after, .nav li:only-child::before {
  content: '';
  display: none;
}
.nav li:only-child{ padding-top: 0;}
.nav li:first-child::before, .nav li:last-child::after{
  border: 0 none;
}
.nav li:last-child::before{
  border-right: 1px solid #aaa;
  border-radius: 0 5px 0 0;
}
.nav li:first-child::after{
    border-radius: 5px 0 0 0;
}
.nav ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ddd;
  width: 0; 
  height: 20px;
}
.nav li a{
  display: inline-block;
  padding: 5px 10px;  
  border-radius: 5px;
  border: 1px solid #eee;  
  text-decoration: none;
  text-transform: uppercase;
  color: #dad;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
 -webkit-animation: shadow 16s ease-in-out infinite;
          animation: shadow 16s ease-in-out infinite;
 -webkit-box-shadow: 0px 1px 7px 5px green;
-moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
}
@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  ;
  } 
}
.nav li a:hover, .nav li a:hover+ul li a {
  color: #000;
  background: #fff;   
  border: 1px solid #94a0b4;
}
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:180px;
  padding:15px;  
  width: 500px;
    height: 450px;
    padding: 20px;
    border: 3px 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);
}
<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://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<div id="wrapper">
<div align="center" style="margin-top:30px"> 
<span style="color:orange; font-size: 11pt">SITEMAP DIAGRAMS</h1>
<nav class="nav">

   <ul>
    <li>
     <a href="#">M-2010</a>
     <ul>
      <li>
       <a href="#">Study</a>
       <ul>
        <li>
         <a href="#">Blog</a>
         <ul>
          <li>
           <a href="#">Category</a>
           <ul>
            <li>
             <a href="#">Animated</a>
             <ul>
              <li>
               <a href="#">Wallpaper</a>
              </li>
             </ul>
            </li>
           </ul>
          </li>
         </ul>
        </li>
        <li>
         <a href="#">Design</a>
         <ul>
          <li>
           <a href="#">CssHtml</a>
           <ul>
            <li>

             <a href="#">Jquery</a>
            </li>
           </ul>
          </li>
         </ul>
        </li>
       </ul>
      </li>
      <li>
       <a href="#">Author</a>
       <ul>
        <li>
         <a href="#">Profile</a>
         <ul>
          <li>
           <a href="#">T-Seo</a>
          </li>

          <li>
           <a href="#">Music</a>
          </li>
         </ul>
        </li>
       </ul>
      </li>
      <li>

       <a href="#">Card</a>
       <ul>
        <li>
<a href="#">Graph</a>
       <ul>
        <li>

         <a href="#">Orb</a>

         
        </li>
        <li>
         <a href="#">Map</a>
        </li>
       </ul>
      </li>
     </ul>
    </li>
   </ul>
  </nav>
</div>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family:arial;font-size:11px; 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="https://codepen.io/Myscript2010/pen/XNLJRO"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
 <audio id="player" preload="auto">
  <source src="https://Link-Music.mp3">
  </source></h2>
</a></div>
</div>
<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>
<link Audio mp3>
<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>
Edited by. M2010
Audio Code by. Jereme Causing
Diagrams Code by. François Lesenne
* If you want to directly copy and paste you canDownload Here  S Diagram with Mp3

Memasang Kode Sitemap Diagram
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
<style class="Mys2010-styles">
body {background-image: url();color:red;height:100%;overflow:hidden;}
body {
background:#808;}
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 80px #0033CC;  
}
.shadow-top:before {   
    content: " ";
    box-shadow: 0 0 200px 250px #8A2BE2;     
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #809FFE;  
}
.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 #8A2BE2; 
    -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;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
* {
  position: relative;
  margin: 0;
  padding: 0;
  
  border: 0 none;
    
  -webkit-transition: all ease .4s;
  -moz-transition: all ease .4s;
    transition: all ease .4s;
}
html,
body {
  width: 100%;
  height: 100%;
    
  background: RGBA(0, 58, 97, 1);
    
  font-family: 'Fjalla One', sans-serif;
  font-size: 18px;
}
h1 {
  padding-top: 40px;
    
  color: #ccc;
  text-align: center;
  font-size: 1.8rem;
     
    text-shadow: rgba(0,0,0,0.6) 1px 0, rgba(0,0,0,0.6) 1px 0, rgba(0,0,0,0.6) 0 1px, rgba(0,0,0,0.6) 0 1px;
}
.nav {
  margin: 20px auto;
  width: 455px;
  min-height: auto;
}
.nav ul {
  position: relative;
  padding-top: 20px; 
}
.nav li {
  position: relative;
  padding: 20px 3px 0 3px; 
  float: left; 
  
  text-align: center;
  list-style-type: none; 
}
.nav li::before, .nav li::after{
  content: '';
  position: absolute; 
  top: 0; 
  right: 50%;
  width: 50%; 
  height: 20px;
  border-top: 1px solid #ccc;
}
.nav li::after{
  left: 50%;
  right: auto; 
  
  border-left: 1px solid #ccc;
}
.nav li:only-child::after, .nav li:only-child::before {
  content: '';
  display: none;
}
.nav li:only-child{ padding-top: 0;}
.nav li:first-child::before, .nav li:last-child::after{
  border: 0 none;
}
.nav li:last-child::before{
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
}
.nav li:first-child::after{
    border-radius: 5px 0 0 0;
}
.nav ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; 
  height: 20px;
}
.nav li a{
  display: inline-block;
  padding: 5px 10px;  
  border-radius: 5px;
  border: 1px solid #eee;  
  text-decoration: none;
  text-transform: uppercase;
  color: #dad;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
 -webkit-animation: shadow 16s ease-in-out infinite;
          animation: shadow 16s ease-in-out infinite;
 -webkit-box-shadow: 0px 1px 7px 5px green;
-moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
}
@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  ;
  } 
}
.nav li a:hover, .nav li a:hover+ul li a {
  color: #000;
  background: #fff;   
  border: 1px solid #94a0b4;
}
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:180px;
  padding:15px;  
  width: 500px;
    height: 450px;
    padding: 20px;
    border: 3px 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);
}
<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>
<div id="wrapper">
<div align="center" style="margin-top:30px"> 
<span style="color:orange; font-size: 11pt">SITEMAP DIAGRAMS</h1>
<nav class="nav">

   <ul>
    <li>
     <a href="#">M-2010</a>
     <ul>
      <li>
       <a href="#">Study</a>
       <ul>
        <li>
         <a href="#">Blog</a>
         <ul>
          <li>
           <a href="#">Category</a>
           <ul>
            <li>
             <a href="#">Animated</a>
             <ul>
              <li>
               <a href="#">Wallpaper</a>
              </li>
             </ul>
            </li>
           </ul>
          </li>
         </ul>
        </li>
        <li>
         <a href="#">Design</a>
         <ul>
          <li>
           <a href="#">CssHtml</a>
           <ul>
            <li>

             <a href="#">Jquery</a>
            </li>
           </ul>
          </li>
         </ul>
        </li>
       </ul>
      </li>
      <li>
       <a href="#">Author</a>
       <ul>
        <li>
         <a href="#">Profile</a>
         <ul>
          <li>
           <a href="#">T-Seo</a>
          </li>

          <li>
           <a href="#">Music</a>
          </li>
         </ul>
        </li>
       </ul>
      </li>
      <li>

       <a href="#">Card</a>
       <ul>
        <li>
<a href="#">Graph</a>
       <ul>
        <li>

         <a href="#">Orb</a>

         
        </li>
        <li>
         <a href="#">Map</a>
        </li>
       </ul>
      </li>
     </ul>
    </li>
   </ul>
  </nav>
</div>
Edited by. M2010
Diagrams Code by. François Lesenne
* If you want to directly copy and paste you canDownload Here  : Sitemap Diagram

Memasang Kode Tabel Gambar
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 type="text/css">
@import "compass/css3";
body {
    background: #FFF;
    padding-left:0px;}
h1 {
  text-align: center;
  font: bold 80px Sans-Serif;
  padding: 0px 0;
}
.M2010 {
  background: #dad ;
  color: yellow;
  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);}</style>
<h1 class="M2010">
DEMO SHOW
</h1>
<font size="5" color=" green "face="Time newroman">MEMASANG TABEL GAMBAR HORIZONTAL PADA POSTINGAN</font>
<table  border="kode a1">
<tr><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td></tr>
</table>
<table  border="kode a2">
<tr><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td></tr>
</table>
<table  border="kode a3">
<tr><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td></tr>
</table>
<table  border="kode a4">
<tr><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td></tr>
</table>
<table  border="kode a5">
<tr><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td></tr>
</table>
<table  border="kode a6">
<tr><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td> </tr>
</table>
<table  border="kode a7">
<tr><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td> <td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td><td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td> <td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg" name="e902" border="0" width="230" height="230"   
onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETGCJdNi12WirMF0aonNQFx7e3ZJ8EmhYDtthnuHWfnc56pyGNEk0MyYtu430kQKc5vWgLoQAC0d7qrpTMS5bF30qVg6x6MkheKjAhKF31vVhKtuLF9JNLtZ_aayatUGLrbeoun7vU4Q/s1600-r/tidak_mys2010.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">
<font size="3" color="gray"face="arial"><center>
YOUR TEXT</center>
</a>
</td> <td>
</table>
Edited by. M2010
* If you want to directly copy and paste you canDownload Here  : Table of figures

Memasang Kode 7Dragon with Mp3
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:#000;}  
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: -moz-linear-gradient(top, #222 0%, #333 100%);
  border-bottom: 3px solid #333;  
}
.ap {
position: fixed;
right: 0;
bottom:-12px;
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:  #111;
border-top: 2px solid #000;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, #222 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #000 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 180px #111;   
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #24006B;    
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #B20000;  
}
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: #FFF8DC;
  text-shadow: #dad 10px 0px 30px, #033FFF -10px 0px 30px, #dad 0px 10px 30px, #dad 0px -10px 30px;
  color: #eee;
  background:#eee;
  mix-blend-mode: screen;
}
@import url(http://fonts.googleapis.com/css?family=Oswald);
@keyframes clouds-loop-1 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-1 {
  background-image: url("http://s.cdpn.io/15514/clouds_2.png");
  animation: clouds-loop-1 20s infinite linear;
}
@keyframes clouds-loop-2 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-2 {
  background-image: url("http://s.cdpn.io/15514/clouds_1.png");
  animation: clouds-loop-2 15s infinite linear;
}
@keyframes clouds-loop-3 {
  to {
    background-position: -1579px 0;
  }
}
.clouds-3 {
  background-image: url("http://s.cdpn.io/15514/clouds_3.png");
  animation: clouds-loop-3 17s infinite linear;
}
section.info {
  position: absolute;
  bottom: 0;
  right: 2ch;
  font-size: 60%;
}
section.info dl {
  display: -webkit-flex;
  display: flex;
}
section.info dl dt, section.info dl dd {
  margin: 0;
  padding: 0;
}
section.info dl dt {
  padding-right: 1ch;
}
section.info dl dd {
  padding-right: 4ch;
}
.clouds {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}
.clouds-1,
.clouds-2,
.clouds-3 {
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 500px;
}
.kalong-1 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 300px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 75px;
}
.kalong-2 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 390px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 35px;
}
 .kalong-3 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 370px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 65px;
}
 .kalong-4 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 450px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 35px;
}
 .kalong-5 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 450px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 35px;
}
.kalong-1 {
  -webkit-animation: parallax_kalong linear 70s infinite both;
          animation: parallax_kalong linear 70s infinite both;
}
.kalong-2 {
  -webkit-animation: parallax_kalong linear 15s infinite both;
          animation: parallax_kalong linear 15s infinite both;
}
.kalong-3 {
  -webkit-animation: parallax_kalong linear 100s infinite both;
          animation: parallax_kalong linear 100s infinite both;
}
.kalong-4 {
  -webkit-animation: parallax_kalong linear 40s infinite both;
          animation: parallax_kalong linear 40s infinite both;
}
 .kalong-5 {
  -webkit-animation: parallax_kalong linear 17s infinite both;
          animation: parallax_kalong linear 17s infinite both;
}
@-webkit-keyframes parallax_kalong {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}
@keyframes parallax_kalong {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}</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 Title" target="_blank" title="Mari Belajar">
<span style="color: #fff; font-size: 26px;">&#9760;</a></div>
<div class="text-bawah2">
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<span style="color: #fff; font-size: 26px;">&#9760;</a></div>
</h3> 
<div class="parallax kalong-1">
</div>
<div class="parallax kalong-2">
</div> 
<div class="parallax kalong-3">
</div>
<div class="parallax kalong-4">
</div>
<div class="parallax kalong-5">
</div>
<canvas id="c">Dragon</canvas>
<div class='clouds'>
<div class='clouds-1'>
</div>
<div class='clouds-2'>
</div>
<div class='clouds-3'>
</div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/12/7dragon-with-mp3.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://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/pen/JbVzNe" 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/sulelagu042/l/Nox-Arcana-Treasure-the-Four-Eternal-Champions-M2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<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>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>                   
<script src='https://sites.google.com/site/codesule/lagu/stopExecutionOnTimeout-M2010.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>
      // full source for entry into js1k dragons: http://js1k.com/2014-dragons/demo/1837
// thanks to simon for grunt help and sean for inspiration help
// js1k shim
var a = document.getElementsByTagName('canvas')[0];
var b = document.body;
var d = function(e){ return function(){ e.parentNode.removeChild(e); }; }(a);
// unprefix some popular vendor prefixed things (but stick to their original name)
var AudioContext =
    window.AudioContext ||
    window.webkitAudioContext;
var requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(f){ setTimeout(f, 1000/30); };
// stretch canvas to screen size (once, wont onresize!)
a.style.width = (a.width = innerWidth - 0) + 'px';
a.style.height = (a.height = innerHeight - 0) + 'px';
var c = a.getContext('2d');
// end shim
var sw = a.width, 
sh = a.height, 
M = Math,
Mc = M.cos,
Ms = M.sin,
ran = M.random,
pfloat = 0, 
pi = M.PI, 
dragons = [], 
shape = [],
loop = function() {
  a.width = sw; // clear screen
  for ( j = 0; j < 7; j++) {
    if ( !dragons[j] ) dragons[j] = dragon(j); // create dragons initially
    dragons[j]();
  }
  pfloat++;
  requestAnimationFrame(loop);
},
dragon = function(index) {
  var scale = 0.1 + index * index / 49, 
    gx = ran() * sw / scale, 
    gy = sh / scale, 
    lim = 300, // this gets inlined, no good!
    speed = 3 + ran() * 5, 
    direction = pi, //0, //ran() * pi * 2, //ran(0,TAU), 
    direction1 = direction, 
    spine = [];
  return function() {
    // check if dragon flies off screen 
    if (gx < -lim || gx > sw / scale + lim || gy < -lim || gy > sh / scale + lim) {
      // flip them around
      var dx = sw / scale / 2 - gx,
        dy = sh / scale / 2 - gy;
      direction = direction1 = M.atan(dx/dy) + (dy < 0 ? pi : 0);
    } else {
       direction1 += ran() * .1 - .05;
       direction -= (direction - direction1) * .1;
    }
    // move the dragon forwards
    gx += Ms(direction) * speed;
    gy += Mc(direction) * speed;
    // calculate a spine - a chain of points
    // the first point in the array follows a floating position: gx,gy
    // the rest of the chain of points following each other in turn
    for (i=0; i < 70; i++) {
      if (i) {
        if (!pfloat) spine[i] = {x: gx, y: gy}
        var p = spine[i - 1],
          dx = spine[i].x - p.x,
          dy = spine[i].y - p.y,
          d = M.sqrt(dx * dx + dy * dy),
          perpendicular = M.atan(dy/dx) + pi / 2 + (dx < 0 ? pi : 0);
        // make each point chase the previous, but never get too close
        if (d > 4) {
          var mod = .5;
        } else if (d > 2){
          mod = (d - 2) / 4;
        } else {
          mod = 0;
        }
        spine[i].x -= dx * mod;
        spine[i].y -= dy * mod;
        // perpendicular is used to map the coordinates on to the spine
        spine[i].px = Mc(perpendicular);
        spine[i].py = Ms(perpendicular);
        if (i == 20) { // average point in the middle of the wings so the wings remain symmetrical
          var wingPerpendicular = perpendicular;
        }
      } else {
        // i is 0 - first point in spine
        spine[i] = {x: gx, y: gy, px: 0, py: 0}; 
      }
    }
    // map the dragon to the spine
    // the x co-ordinates of each point of the dragon shape are honoured
    // the y co-ordinates of each point of the dragon are mapped to the spine
    c.moveTo(spine[0].x,spine[0].y)
    for (i=0; i < 154; i+=2) { // shape.length * 2 - it's symmetrical, so draw up one side and back down the other
      if (i < 77 ) { // shape.length
        // draw the one half from nose to tail
        var index = i; // even index is x, odd (index + 1) is y of each coordinate
        var L = 1;
      } else {
        // draw the other half from tail back to nose
        index = 152 - i;  
        L = -1;
      }
      var x = shape[index];
      var spineNode = spine[shape[index+1]]; // get the equivalent spine position from the dragon shape
      if (index >= 56) {  // draw tail
        var wobbleIndex = 56 - index; // table wobbles more towards the end
        var wobble = Ms(wobbleIndex / 3 + pfloat * 0.1) * wobbleIndex * L;
        x = 20 - index / 4 + wobble;
        // override the node for the correct tail position
        spineNode = spine[ index * 2 - 83 ];
      } else if (index > 13) {  // draw "flappy wings"
        // 4 is hinge point
        x = 4 + (x-4) * (Ms(( -x / 2 + pfloat) / 25 * speed / 4) + 2) * 2; // feed x into sin to make wings "bend"
        // override the perpindicular lines for the wings
        spineNode.px = Mc(wingPerpendicular);
        spineNode.py = Ms(wingPerpendicular);
      }
      c.lineTo(
        (spineNode.x + x * L * spineNode.px) * scale, 
        (spineNode.y + x * L * spineNode.py) * scale
      );}
    c.fill();
  }
}
// the shape of the dragon, converted from a SVG image
'! ((&(&*$($,&.)/-.0,4%3"7$;(@/EAA<?:<9;;88573729/7,6(8&;'.split("").map(function(a,i) {
  shape[i] = a.charCodeAt(0) - 32;
});
loop();     
    </script>
Audio Code 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 7Dragon with Mp3