Memasang Kode Animated Frame
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:   -7px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:   -1px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 10px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
}
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
background-image: linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -o-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
body {
    background: #333;
    padding-left:0px;}

h1 {
  text-align: center;
  font: bold 45px Sans-Serif;
  padding: 260px 0;
}
.otto {
  background: #8080;
  color: #888;
  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);}
    body {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbPaw9NJ48fhMHOrIT3df6gJngIPaLaQBS75JQfM6-NMk1h4xM6kPOzPxCB80MxJelR9z4hHDJv5PPFv7EXiayBPaxK5jugZJf2IvvxmYRjcDkadFUbxF5Ww5kvzBDO6oF5o_68_SodAg/s1600/anjing-mys2010.jpg");
 margin-top:-110px;
    background-repeat: no-repeat;
background-size: 300px 260px;
background-attachment: fixed;
    background-position: center;
 background-color: #242930; 
 
}
		body{ 
		margin-top:-59px;
		background-color:#B0E0E6;} 
		#box{
		margin:0 auto;
		position:relative;
		width:500px;
		height:500px;
		border:1px solid rgba(255,255,255,.4);
		box-shadow:inset 1px 1px 3px #4f4f4f, inset 1px 1px 3px #4f4f4f, inset -1px -1px 3px #4f4f4f, inset -1px -1px 3px #4f4f4f;}	
	
		#box:after{
		content:"";
		left:25px;
		top:25px;
		position:absolute;
		width:450px;
		height:450px;
		border:1px solid #4f4f4f;
		box-shadow:1px 1px 3px rgba(255,255,255,.4), 1px 1px 3px rgba(255,255,255,.4), -1px -1px 3px rgba(255,255,255,.4), -1px -1px 3px rgba(255,255,255,.4);		
		}		
		.box{
		opacity:0;}		
		#top{
		position:absolute;		
		top:3px;
		right:2px;		
		height:0px;
		width:60px;
		border-top:20px solid  #800080;
		border-left:22px solid transparent;
		border-right:22px solid transparent;
		-moz-animation:top 20s linear infinite;		
		}		
		@-moz-keyframes top{
		0%{right:2px;opacity:1;}
		25%{right:400px;opacity:1;}
		26%{opacity:0;}
		50%{opacity:0;}
		100%{opacity:0;}
		}
		
		#left{
		position:absolute;		
		top:2px;
		left:2px;				
		height:60px;
		width:0px;		
		border-left:22px solid  #0000FF;
		border-top:20px solid transparent;
		border-bottom:22px solid transparent;
		-moz-animation:left 20s linear 5s infinite;}		
		@-moz-keyframes left{
		0%{top:2px;opacity:1;}
		25%{top:400px;opacity:1;}
		26%{opacity:0;}
		50%{opacity:0;}
		100%{opacity:0;}
		}	
		
		#bottom{
		position:absolute;		
		left:2px;
		bottom:2px;		
		height:0px;
		width:60px;		
		border-bottom:20px solid  #483D8B;
		border-left:22px solid transparent;
		border-right:22px solid transparent;
		-moz-animation:bottom 20s linear 10s infinite;}		
		@-moz-keyframes bottom{
		0%{left:2px;opacity:1;}
		25%{left:400px;opacity:1;}
		26%{opacity:0;}
		50%{opacity:0;}
		100%{opacity:0;}
		}		
		#right{
		position:absolute;		
		bottom:2px;
		right:2px;		
		height:60px;
		width:0px;		
		border-right:22px solid #7B68EE;
		border-top:20px solid transparent;
		border-bottom:22px solid transparent;
		-moz-animation:right 20s linear 15s infinite;}		
		@-moz-keyframes right{
		0%{bottom:2px;opacity:1;}
		25%{bottom:400px;opacity:1;}
		26%{opacity:0;}
		50%{opacity:0;}
		100%{opacity:0;}
		}		
    </style>
<body translate="no" >
<div id="box">
<span id="top" class="box"></span>
<span id="left" class="box"></span> 
<span id="right" class="box"></span>
<span id="bottom" class="box"></span>
<h1 class="otto">
<p>
ANJING</p>
DACHSHUND
</h1>
</div>
<div class="ap" id="ap">
<div align="center">
<a href="https://Link Download-Mys2010s.css"title="Myscript2010s"><h2>
<span style="color:#dad; font-size: 10pt">DOWNLOAD FULL CODE</2></a>  
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/05/animated-frame.html" target="_blank" title="Full Page">
<h2>
<span style="color:green; font-size: 10pt">LET'S STUDY</2></a>  
</div>
</header>
Frame code by. Astronaut
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  &  paste you canDownload Here  Animated Frame  

Memasang Kode Youtube Ambilight with backgrounds
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>
body {);color:red;height:100%;overflow:hidden;}
body {
background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
}
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:   #000 ;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
img {
width: 720px;
  height: 480px;
  position: center;
    margin-top:129px;
}
#tubular-container {
  filter: blur(50px) brightness(0.5);
  -webkit-filter: blur(50px) brightness(0.5);
  z-index: 0;
}
.video {
  width: 560px;
  height: 315px;
  position: absolute;
  top:-51px;
  left: 50px;
  right: 50px;
  bottom: 0;
  margin: auto;
  z-index: 100;
}
 </style>
<body translate="no" >    
<div class='video'>
</div>  
<p align="center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh5HhoswRC9wL9ef14cmmVX2qadBG8yR5zqrxxoCLs1JtJpFzB3NWJCjlHhwT1rZuSeoHHYrQSNMG-wFoz3FHWDtmAxcbMANPErEfXSRu4OdUnGxBxiKfrx7U34XEesOBAryFt0UHWH3fJ/s1600-r/tele-mys2010.png" name="e902" border="0" width="716" height="540"></a> </center>
<div class="ap" id="ap">
<div align="center">
<a href="https://Link Download"title="Myscript2010s"> 
<h2>
<span style="color:#dad; font-size: 10pt">DOWNLOAD</2></a>  
</div>
<header>
<a href="http://demoshow-mys2010.blogspot.co.id/p/sebelum-dimodifikasi.html" target="_blank" title="Full Page">
<h2>
<span style="color:orange; font-size: 10pt">BEFORE MODIFICATION</2></a>  
</div>
</header>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> 
<script>
(function () {
    var ambilight;
    $(document).ready(function () {
        return ambilight.on('KSqttO3NtCg', '.video');
    });
    ambilight = {
        on: function (yt_id, container) {
            $(container).append('<iframe width="560" height="320" src="https://www.youtube.com/embed/Favl3kzWejA?list=RDcbV190MjKiU" frameborder="0" allowfullscreen></iframe>');
            return $('body').tubular({ videoId: yt_id });
        }
    };
}.call(this));
</script>
Youtube code by. Max
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  &  paste you canDownload Here  Youtube Ambilight  

Memasang Kode Exiting Hyperspace Circle
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:   1px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 30px;
left: 0;
height: 50px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
}
.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}
.byline span {
  animation: spin-letters 10s linear infinite;
}
.byline {
  animation: move-byline 10s linear infinite;
}
/* Keyframes */
@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes wars {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(0.5em);
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes spin-letters {
  0%, 10% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  30% {
    opacity: 1;
  }
  70%, 86% {
    transform: rotateY(0);
    opacity: 1;
  }
  95%, 100% {
    opacity: 0;
  }
}

@keyframes move-byline {
  0% {
    transform: translateZ(5em);
  }
  100% {
    transform: translateZ(0);
  }
}
/* Make the 3D work on the container */
.starwars-demo {
  perspective: 800px;
  transform-style: preserve3d;
}
/* General styles and layout */
.starwars-demo {
  height: 17em;
  left: 50%;
  position: absolute;
  top: 53%;
  transform: translate(-50%, -50%);
  width: 34em;
}
.byline span {
  display: inline-block;
}
img {
  width: 100%;
}

.star, .wars, .byline {
  position: absolute;
}

.star {
  top: -0.75em;
}

.wars {
  bottom: -0.5em;
}
.byline {
  color: #fff;
  font-family: "ITC Serif Gothic", Lato;
  font-size: 2.25em;
  left: -2em;
  letter-spacing: 0.4em;
  right: -2em;
  text-align: center;
  text-transform: uppercase;
  top: 29%;
}
/*** Media queries  ***/
@media only screen and (max-width: 600px) {
  .starwars-demo {
    font-size: 10px;
  }
}
@media only screen and (max-width: 480px) {
  .starwars-demo {
    font-size: 7px;
  }
}
.scene,
.space {
  animation: fadeIn 3s 1 linear;
}
input {
  color: yellow;
  outline: none;
  border: 0px solid white;
  border-radius: 0px;
  text-transform: uppercase;
  letter-spacing: 6px;
  width: 200px;
  height: 40px;
  margin: 7px 0 0 -100px;
  position: absolute;
  left: 50%;
  top: 8%;
  background: transparent;
  z-index: 9999;
  animation: reload-button 17s ease-out 1;
}
@keyframes reload-button {
  0% {
    opacity: 0;
    display: none;
  }
  95% {
    opacity: 0;
    display: auto;
  }
  100% {
    opacity: 1;
    display: auto;
  }
}
 
@keyframes bb-swivel {
  0% {
    background-position: 40% center;
  }
  3% {
    background-position: 40% center;
  }
  5% {
    background-position: 58% center;
  }
  8% {
    background-position: 58% center;
  }
  10% {
    background-position: 58% center;
  }
  12% {
    background-position: 40% center;
  }
  15% {
    background-position: 60% center;
  }
  25% {
    background-position: 60% center;
  }
  35% {
    background-position: 10% center;
  }
  39% {
    background-position: 10% center;
  }
  40% {
    background-position: 60% center;
  }
  52% {
    background-position: 37% center;
  }
  53% {
    background-position: 63% center;
  }
  54% {
    background-position: 39% center;
  }
  55% {
    background-position: 60% center;
  }
  56% {
    background-position: 36% center;
  }
  57% {
    background-position: 62% center;
  }
  66% {
    background-position: 62% center;
  }
  67% {
    background-position: 45% center;
  }
  70% {
    background-position: 45% center;
  }
  75% {
    background-position: 100% center;
  }
  100% {
    background-position: 100% center;
  }
}
.thruster-flicker {
  opacity: 0.55;
  width: 100%;
  height: 100%;
  animation: flicker 0.05s linear infinite;
}

@keyframes flicker {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.075);
  }
  30% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.015);
  }
  70% {
    transform: scale(0.92);
  }
  85% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.thruster {
  position: absolute;
  border-radius: 50%;
  height: 2.8vh;
  width: 2.8vh;
  max-height: 13px;
  max-width: 13px;
  background-color: white;
  box-shadow: 0 0 8px 3px red;
  animation: thrusters 16.5s ease-out 1;
}
.thruster.t1 {
  top: 42%;
  left: 35%;
}
.thruster.t2 {
  top: 41.5%;
  left: 64.5%;
}
.thruster.t3 {
  top: 80.5%;
  left: 63%;
}
.thruster.t4 {
  top: 81.5%;
  left: 36.5%;
}

@keyframes thrusters {
  0% {
    transform: scale(2.25);
  }
  15% {
    transform: scale(0.8);
  }
  30% {
    transform: scale(2.25);
  }
  44% {
    transform: scale(0.95);
  }
  52% {
    transform: scale(3);
  }
  54% {
    transform: scale(1.5);
  }
  62% {
    transform: scale(2.5);
  }
  100% {
    transform: scale(0.8);
  }
}
.x-wing {
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(0);
  z-index: 9999;
  height: 41vh;
  width: 80vh;
  max-height: 205px;
  max-width: 400px;
  background-size: cover;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0iNwug76uLpn4dNA8KG41Rgw_rRHqYD7lzGnD-_2kCG1ry57-aMRGvkTm8RFEhGqarzi3V98VNbzzNG7EKfAXpCoVFLynuxF6Kk0VsjfBiWLohVYaW2HCw1IVqie_caZNfeist2m-Hvw/s1600/Starwars-mys2010.png);
  animation: flightplan 16.5s ease-in-out 1;
}

@keyframes flightplan {
  0% {
    -webkit-filter: brightness(0.5) hue-rotate(-5deg);
    filter: brightness(0.5) hue-rotate(-5deg);
    transform: translate(-85%, 50%) rotate(8deg) scale(5);
  }
  15% {
    -webkit-filter: brightness(0.9) hue-rotate(-15deg);
    filter: brightness(0.9) hue-rotate(-15deg);
    transform: translate(25%, 30%) rotate(-30deg) scale(0.85);
  }
  30% {
    -webkit-filter: brightness(1.35) hue-rotate(-5deg);
    filter: brightness(1.35) hue-rotate(-5deg);
    transform: translate(-80%, 0%) rotate(15deg) scale(1.3);
  }
  44% {
    -webkit-filter: brightness(1.2) contrast(1) hue-rotate(-12deg);
    filter: brightness(1.2) contrast(1) hue-rotate(-12deg);
    transform: translate(-20%, -20%) rotate(-18deg) scale(0.75);
  }
  52% {
    -webkit-filter: brightness(1.45) contrast(1.15) hue-rotate(2deg);
    filter: brightness(1.45) contrast(1.15) hue-rotate(2deg);
    transform: translate(10%, 10%) rotate(-25deg) scale(1.65);
  }
  100% {
    -webkit-filter: brightness(0.55) contrast(0.85) hue-rotate(0deg);
    filter: brightness(0.55) contrast(0.85) hue-rotate(0deg);
    transform: translate(-30%, -30%) rotate(-47deg) scale(0);
  }
}
.subspace {
  z-index: 500;
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -150px;
  top: 50%;
  margin-left: -150px;
  left: 50%;
}
.hosnian-prime {
  position: absolute;
  top: 55%;
  left: 50%;
  left: 0;
  right: 0;
  margin: -22vh auto 0;
  z-index: 50;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO89UpztbCb-Fm8h5FKhV26Um2rH3qu9pTIrK6lKDrC2PSJpx04Uwz2s90OVTQjaIQoaTpbneGydofO75IpiwcKvFC674KuVyuRatIKwzRFNTFb-JnWqPbKPlI9mL4f69emifiaENAIbb6/s1600-r/black-logo-sule.png");
  width: 38vh;
  max-width: 268px;
  height: 38vh;
  max-height: 268px;
  box-shadow: inset 76px 0 80px 3px rgba(0, 0, 0, 0.69), inset -1px 0 50px 15px rgba(255, 255, 255, 0.49), inset -1px 0 15px 2px white, 0 0 55px 10px rgba(0, 0, 255, 0.45), 3px 0 10px 2px rgba(0, 0, 255, 0.75), -3px 0 10px 2px rgba(96, 96, 159, 0.75);
  background-size: 602px;
  border-radius: 50%;
  position: relative;
  transform: scale(1.1) translateY(0px);
  animation-name: rotate, planet-zoom;
  animation-duration: 60s, 16.5s;
  animation-iteration-count: infinite, 1;
  animation-timing-function: linear, ease-out;
}
@keyframes rotate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 602px;
  }
}
@keyframes planet-zoom {
  0% {
    transform: scale(0) translateY(-100px);
  }
  51% {
    transform: scale(0) translateY(-100px);
  }
  52% {
    transform: scale(0.01) translateY(-100px);
  }
  100% {
    transform: scale(1.1) translateY(0px);
  }
}
.space {
  width: 100%;
  transform: scale(1.75) translateX(-300px);
  animation: space-zoom 16.5s 1 ease-out;
}

@keyframes space-zoom {
  0% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  48% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  49% {
    transform: scale(0.45) translateX(-250px);
    opacity: 1;
  }
  100% {
    transform: scale(1.75) translateX(-300px);
    opacity: 1;
  }
}
.posisilingkaran {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.posisilingkaran .tengah {
 left:  40px;
margin-top:20px;
  width: 300px;
  height: 300px;
  position: absolute;
  border-radius: 100%;
  border: 10px solid #f00;
  overflow: hidden;
  z-index: 10;
}
#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: -6px;
}
canvas{
  position: absolute;
  min-width: 400px;
  min-height: 400px;
  width: 100%;
  height: 100%;

}</style>
<div class="ap" id="ap">
<h2>
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:orange;"> Edited by . <a href="https://Link Download" title="Download Full Code"><span style="font-family: arial ; font-size: 12px; color:#eee;">&nbsp; Myscript2010 </a>&nbsp; Download </a> 
</div>
<body translate="no" ><div align="center" style="margin-top:11px">
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/sepultura-Mys2010.mp3" controls="controls"></audio></div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:orange;"> Copyright <a href="http://sample-mys2010.blogspot.co.id/2016/05/exiting-hyperspace-circle.html" target="_blank" title="Mari Belajar"><span style="font-family: arial ; font-size: 12px; color:#eee;">&nbsp; 2010 - 2016 </a>&nbsp; Let's Study </a> 
</div>
</2></a>  
</div>
<header>
<h2>
<input type="button" value="replay" onClick="history.go(0)"></2></a>
</div>
</header>
<div class="posisilingkaran">
<div class="tengah">
<canvas id="field"></canvas>
<div class="subspace">
<div class="hosnian-prime">
</div>
<div class="x-wing">
<div class="bb-unit">
</div>
<div class="thruster-flicker">
<div class="thruster t1">
</div>
<div class="thruster t2">
</div>
<div class="thruster t3">
</div>
<div class="thruster t4">
</div>
</div>
</div>
</div>
<div class="hyperspace">
<div class="scene">
<div class="wrap">
<div class="wall wall-right">
</div>
<div class="wall wall-left">
</div>
<div class="wall wall-top">
</div>
<div class="wall wall-bottom">
</div>
<div class="wall wall-back">
</div>
</div>
<div class="wrap">
<div class="wall wall-right">
</div>
<div class="wall wall-left">
</div>
<div class="wall wall-top">
</div>
<div class="wall wall-bottom">
</div>
<div class="wall wall-back">
</div>
</div>
</div>
</div>
<div class="space">
<div id="stars">
</div>
<div id="stars2">
</div>
<div id="stars3">
</div>
</div>
</div>
<div class="starwars-demo">
<h1 class="byline" id="byline">
M-2010</h1>
</div>
</div>
</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 src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>
<script>var byline = document.getElementById('byline');
bylineText = byline.innerHTML;
bylineArr = bylineText.split('');
byline.innerHTML = '';
var span;
var letter;
for (i = 0; i < bylineArr.length; i++) {
    if (window.CP.shouldStopExecution(1)) {
        break;
    }
    span = document.createElement('span');
    letter = document.createTextNode(bylineArr[i]);
    if (bylineArr[i] == ' ') {
        byline.appendChild(letter);
    } else {
        span.appendChild(letter);
        byline.appendChild(span);
    }
}
window.CP.exitedLoop(1);
</script>
<music>               
<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>
      var totalObjects = 1500;
var maxVelocity = 2;
var starSize = 2;
var twinkleFreq = 50000;
var shootingStarFreq = 90;
var shootingStarVelocity = 100;
var shootingStarSize = 7;

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            setInterval(callback, 75);
          };
})();

var canvas = document.getElementById('field');
canvas.width = document.width || 1024;
canvas.height = document.height || 768;
var ctx = canvas.getContext("2d");



var stars = [];
var shootingStars = [];
this.init();

setInterval(update, 30);
requestAnimFrame(draw);

function init() {
  for(i=0;i<totalObjects;i++){
    stars.push(new Star());
  }
}

function draw() {
  requestAnimFrame(draw);
  ctx.clearRect(0,0,canvas.width,canvas.height);
   for(f=0;f<stars.length;f++)
   {
     stars[f].Update();
     stars[f].Draw();
   }
   for(f=0;f<shootingStars.length;f++)
   {
     shootingStars[f].Update();
     shootingStars[f].Draw();
   }
}

function update()
{
  if(Math.round((Math.random()*shootingStarFreq))==1){
    shootingStars.push(new ShootingStar());
  }
   for(f=0;f<shootingStars.length;f++)
   {
     if (shootingStars[f].X < -1000)
     {
       shootingStars.splice(f,1);
     }
   }
}


function Star(){
  this.X = Math.random()*canvas.width;
  this.Y = Math.random()*canvas.height;
  this.Velocity = (Math.random()*maxVelocity);
  this.Opacity = (((Math.random()*10)+1)*0.1);
  
  this.Update = function() {
    this.X -= this.Velocity;
    if(this.X<0){ ///reset
      this.X = canvas.width+1;
    }
  };
  
  this.Draw = function() {
    ctx.fillStyle = "rgba(255,255,255," + this.Opacity + ")";
    if(Math.round((Math.random()*twinkleFreq))==1){
      ctx.fillRect(this.X,this.Y,starSize+2,starSize+2);
    }
    else{
      ctx.fillRect(this.X,this.Y,starSize,starSize);
    }
  };
}

function ShootingStar() {
    this.X = 2000;
    this.Y = Math.random()*canvas.height;
    this.Length = 1000;
  
  this.Update = function(){
    this.X -= shootingStarVelocity;
  };
  
  this.Draw = function() {
    for (var i = 0; i < this.Length; i++){
      opacity = (0.8 - (0.001 * i));
      ctx.fillStyle = "rgba(255,255,255," + opacity + ")";
      ctx.fillRect(this.X+i,this.Y,shootingStarSize,shootingStarSize);
    }
  };
}   
  </script>
Hyperspace Code by. Matt Popovich
Night sky with Stars Code by. Web Sonick
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here  Hyperspace Circle 

Memasang Kode Frame with Audio
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  8px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  19px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: -4px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
} 
#original-link, #load-song, #credits, #tested {
    position: absolute;
    font-size: 11px;
    margin: 20px
}
#original-link, #load-song div {
    text-decoration: underline;
    cursor: pointer
}
#load-song, #credits {
    text-align: right;
    right: 0
}
 #tested, #credits {
    bottom: 0
}
body {
  text-align: center;
}
.item {
  list-style-type: none;
  position: relative;
  display: inline-block;
  background-color: black;
 margin-top:  16px;
  padding:  2rem;
  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
  box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
}
.inner {
  position: relative;
  padding:  2rem;
  background-color: white;
  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;
  box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;

}
@import url(http://fonts.googleapis.com/css?family=Raleway:100,300);
@keyframes calling {
  from {
    background: rgba(255, 255, 255, 0.1);
  }
  to {
    background: rgba(255, 255, 255, 0.9);
  }
}
@keyframes calling2 {
  to {
    border-color: red;
  }
}
@keyframes declined {
  to {
    -webkit-filter: grayscale(0.1) blur(1px) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.7));
    -moz-filter: grayscale(0.1) blur(1px) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.7));
    opacity: .5;
  }
}
@keyframes go {
  0% {
    opacity: .5;
  }
  95% {
    transform: scale(0.2);
  }
  100% {
    opacity: 0;
  }
}
* {
  box-sizing: border-box;
}

body {
  background: #B000DA;
  font-family: "Raleway", sans-serif;
}

.call {
  width: 300px;
  height: 330px;
  position: absolute;
  top: 0;
  left: 0px;
  right:   97px;
  bottom: 0;
  margin: auto;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.1);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: #9b00c1;
}
.call.is-declined {
  animation: declined .4s forwards, go .3s .8s forwards;
}
.call.is-declined .circle {
  background: rgba(255, 255, 255, 0.1);
}
.call.is-declined .user-photo__wrap, .call.is-declined .circle {
  animation-play-state: paused;
}
.call.is-accepted header > h1 {
  opacity: 0;
}
.call.is-accepted .circle {
  opacity: 0;
  animation-play-state: paused;
}
.call.is-accepted .user-photo__wrap {
  border: none;
  animation-play-state: paused;
}
.call.is-accepted .user-photo__wrap > img {
  transform: scale(1.2);
}


header > h1 {
  font-size: 1.2em;
  text-shadow: 0px 1px 1px #444;
  color: white;
  font-weight: 100;
}
header .header-close {
  position: absolute;
  right: 10px;
  top: 15px;
  opacity: .4;
  color: #72008e;
  font-weight: 400;
  font-size: 1.2em;
  text-decoration: none;
}
header .header-close:hover {
  opacity: 1;
}

main {
  height: 470px;
width: 400px;
  border: 31px solid #d528ff;
  background-image: linear-gradient(#da41ff, #9b00c1);
 margin-top: -100px;
}

.user {
  margin-top: 1px;
  width: 100%;
}

.user-photo {
  width: 200px;
  height: 200px;
  padding: 10px;
  margin: 0 auto;
  border-radius: 100%;
  background: #111;
  box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8), inset 1px 1px 1px rgba(0, 0, 0, 0.3), inset -1px -1px 1px rgba(0, 0, 0, 0.3), inset 2px 2px 1px rgba(0, 0, 0, 0.3), inset 1px 3px 1px rgba(0, 0, 0, 0.3);
}

.user-photo__wrap {
  background: #d10eff;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 9px solid #d10eff;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.6);
  animation: calling2 1.3s linear infinite;
}
.user-photo__wrap > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: transform .2s;
}

.user-name {
  margin: 15px 0;
  text-align: center;
  color: aqua;
  text-shadow: 0px 1px 1px #444;
}

.status {
  width: 100px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  color: white;
  text-align: center;
}
.status .circle {
  float: left;
  margin-right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.1);
  animation: calling 1s backwards infinite;
}
.status .circle:nth-child(1) {
  animation-delay: 0.2s;
}
.status .circle:nth-child(2) {
  animation-delay: 0.4s;
}
.status .circle:nth-child(3) {
  animation-delay: 0.6s;
}
.status .circle:nth-child(4) {
  animation-delay: 0.8s;
}
.status .circle:nth-child(5) {
  animation-delay: 1s;
}
.status .circle.last {
  margin-right: 0;
}

.buttons {
  width: 90%;
  margin: 40px auto;
}
.buttons .col {
  width: 50%;
  float: left;
}
.buttons .button {
  margin: 0 auto;
  width: 80%;
  display: block;
  padding:  1px 30px;
  text-align: center;
  border-radius: 34px;
  border-width: 1px;

  border-style: solid;
  color: white;
  text-decoration: none;
}
.buttons .button.-decline {
  border-color: #FF0C21;
  background: rgba(203, 0, 18, 0.14);
}
.buttons .button.-decline:hover {
  background: #ff1126;
}
.buttons .button.-accept {
  border-color: #69C915;
  background: rgba(169, 228, 114, 0.12);
}
.buttons .button.-accept:hover {
  background: #6bce15;
}
</style>
<figure class="item">
<div class="inner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXXTvx7hbtZnkxcwkaWbRmSoSMoLTFyujLDfco6AP3gUMSGn37Ld-PT7mKGFxbNNyng7BEaSCFGrEK5KxYxE95HJu-nTl9zc8lFutROBfbNctWT-fm-MJpJcxxcoRJ_lp_goMomKXXwM/s1600/Metall-mys2010.jpg" name="e902" border="0" width="250" height="370" /></a>
</div>
<figcaption class="title">
<span style="color: #F00; font-size: 11px;"><b>&#9827 &nbsp; ORIGINALLY &nbsp;  &#9827 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b>&#9827 &nbsp; STAY HERE &nbsp; &#9827</b></a>
</figure>
<div class='call'>
<header>
<h1></h1>
<a class='header-close js-decline' href='@'>
</a>
</header>
<main>
<div class='user'>
<div class='user-photo'>
<div class='user-photo__wrap'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1RGtYiJyxIMjgGbveeE1_jmMO8JcjmVxAr127wtxyPU0pJ5vRwwpTUQ__EfKXNAyFpMcLORCx_Cc6fslU6E2AQnauXBXQIke4OhddioKUGqhhOcLwlQ91cbwZBjMWn48aU9gcdYNE8_c/s1600/kotak-mys2010.jpg'>
</div>
</div>
<div class='user-name'>
<p>
<span style="color: #ddd; font-size: 14px;">MYS-2010</p>
<p>
CIBEBER CIMAHI</p>
</div>
</div>
<div class='status'>
<div class='circle'>
</div>
<div class='circle'>
</div>
<div class='circle'>
</div>
<div class='circle'>
</div>
<div class='circle last'>
</div>
</div>
<div class='buttons'>
<div class='col'>
<a class='button -decline js-decline' href='#'>
Decline
</a>
</div>
<div class='col'>
<a class='button -accept js-accept' href='#'>
Accept
</a>
</div>
</div>
</main>
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<h2>
<a href="http://Your Link" title="Tukar Gambar"><span style="color: #fff; font-size: 11px;"><b>EXCHANGE PICTURES</b></h2>
</a>
</div>
</header>
<div class="ap" id="ap">
<body translate="no" ><div align="center" style="margin-top: 17px">
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/Metallica-The-Day-That-Never-One-Whiskey-InTheJar-mys2010.mp3" controls="controls"></audio></a> 
</div>
<div id="tested">
<font size="3" color="#FF1000"face="agency fb"> &nbsp; &nbsp; &nbsp; &nbsp; EDITED BY. &nbsp;  <a href="http://Your Link" title="Download Full Code"> MYS-2010 &nbsp; </a> DOWNLOAD </a> 
</div>
<div id="credits">
<font size="3" color="#FF1000"face="agency fb"> &nbsp; &nbsp; &nbsp; &nbsp; METALLICA &nbsp; <a href="http://Your Link" title="Home Page"> THE DAY &nbsp; </a>AMBILIGHT &nbsp; &nbsp; &nbsp; &nbsp;</a> 
</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>
<script>(function () {
    $('.js-decline').on('click', function (e) {
        $('.call').toggleClass('is-declined');
        return e.preventDefault();
    });
    $('.js-accept').on('click', function (e) {
        $('.call').toggleClass('is-accepted');
        return e.preventDefault();
    });
}.call(this));
 
</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> 
Audio Code by. Jereme Causing
Photo Frame Code by. Sébastien Lombard
Incoming Call Code by. Davilious
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here Frame with Audio  

Memasang Kode Logo in the frame
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:  1px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  6px;
background: -moz-linear-gradient(top, #f6f5ee 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}

.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #f6f5ee;  
font-size:  11px;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, red 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #f6f5ee 50%, transparent 90%); 
}
body {
  background: #999;
}
figure {
 position: absolute;
 display: block;
 width: 520px;
  
  top: 23%;
  left:  42%;
  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,  #FFDEAD, #1E90FF  100%);
 background-image: -ms-radial-gradient(50% 50%, circle farthest-corner,  #FFDEAD, #1E90FF  100%);
 background-image: radial-gradient(50% 50%, circle farthest-corner,  #FFDEAD, #1E90FF  100%)
}
figure:after {
 content: "";
 position: absolute;
 display: block;
 width: 145%;
 height: 145%;
 top: -22.5%;
 left: -22.5%;
 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: #DA70D6;
 position: relative;
 display: block;
 width: 88%;
 height: auto;
 padding: 6%;
 box-shadow: inset 0px .3em .1em #000); 
</style>}
<figure>
<img src="https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png" /></figure>
<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:#111; font-size: 9pt">CIBEBER CIMAHI</2></a>  
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/05/logo-in-frame.html" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:blue; font-size: 8pt">LET'S STUDY</2></a>  
</div>
</header>
Photo frame Code by. Sébastien Lombard
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here Logo in the frame  

Memasang Kode Photos in the frame
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:#151515;height:100%;overflow:hidden;}
body {
  background: #151515;
}
 
body {
  text-align: center;
}
.item {
  list-style-type: none;
  position: relative;
  display: inline-block;
  background-color: black;
 margin-top:  -8px;
  padding: 2rem;
  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
  box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
}
.inner {
  position: relative;
  padding: 1rem;
  background-color: white;
  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;
  box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;

}

/*end*/
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
background-image: linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -o-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
} 
</style>
<figure class="item">
<div class="inner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQIJW7Wg9cTQZspSpLrBQvwbBwniGlnPL5PWYQNTkhs3lDURM3V3PDrqSCMPw1DEmzSY7WltpgL0LcMKfNcKdNAo6d9jYV_Evx7wYiRiocCelYkZ1GHowGvwWT1uzZYxRfvGpq8a8w-SY/s1600/kina-grannis-mys2010.jpg" name="e902" border="0" width="350" height="370" /></a>
</div>
<figcaption class="title">
<audio id="mys2010" src="https://sites.google.com/site/fileblogfor/code/Fix-You-Kinna-Mys2010.mp3" controls="controls"></audio>
<a href="https://sites.google.com/site/code6916/file/Photos-in-the-frame-Mys2010.css" target="_blank" title="Download Full Code"><b>DOWNLOAD</b></a>
</figure>
<ul class="mys2010-list"><link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   <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> <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
Photo frame Code by. Sébastien Lombard
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here Photos in the frame  
see also different appearance in the photo frameClick Here for a different view 

Memasang Kode Animated star trek
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:  4px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background: -moz-linear-gradient(top,  #151515 0%, #151515 100%);
  border-bottom: 3px solid #dad;  
}
/* GRADIEND */
.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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #444 50%, transparent 90%); 
}
.ball {
  z-index: 500;
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -50px;
  top: 50%;
  margin-left: -150px;
  left: 50%;
}
.Mys-2010 {
  position: absolute;
  top: 50%;
  left: 50%;
  left: 0;
  right: 0;
  margin: -22vh auto 0;
  z-index: 50;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO89UpztbCb-Fm8h5FKhV26Um2rH3qu9pTIrK6lKDrC2PSJpx04Uwz2s90OVTQjaIQoaTpbneGydofO75IpiwcKvFC674KuVyuRatIKwzRFNTFb-JnWqPbKPlI9mL4f69emifiaENAIbb6/s1600-r/black-logo-sule.png");
  width: 350vh;
  max-width: 300px;
  height: 350vh;
  max-height: 300px;
  box-shadow: inset 76px 0 80px 3px rgba(0, 0, 0, 0.69), inset -1px 0 50px 15px red, inset -1px 0 15px 2px white, 0 0 55px 10px #FF1000, 3px 0 10px 2px #FF1000, -3px 0 10px 2px rgba(96, 96, 159, 0.75);
  background-size: 602px;
  border-radius: 50%;
  position: relative;
  transform: scale(1.1) translateY(0px);
  animation-name: rotate, planet-zoom;
  animation-duration: 60s, 16.5s;
  animation-iteration-count: infinite, 1;
  animation-timing-function: linear, ease-out;
}
@keyframes rotate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 602px;
  }
}
@keyframes planet-zoom {
  0% {
    transform: scale(0) translateY(-100px);
  }
  51% {
    transform: scale(0) translateY(-100px);
  }
  52% {
    transform: scale(0.01) translateY(-100px);
  }
  100% {
    transform: scale(1.1) translateY(0px);
  }
}
.space {
  width: 100%;
  transform: scale(1.75) translateX(-300px);
  animation: space-zoom 16.5s 1 ease-out;
}

@keyframes space-zoom {
  0% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  48% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  49% {
    transform: scale(0.45) translateX(-250px);
    opacity: 1;
  }
  100% {
    transform: scale(1.75) translateX(-300px);
    opacity: 1;
  }
}
/*stars 2*/
canvas{
  position: absolute;
  min-width: 400px;
  min-height: 400px;
  width: 250%;
  height: 100%;

}
@keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-awan-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .hitam, .awan {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR7ro5RnI3ORQhUQzI-0OoQ5vm_BGnsKiwQEZr_Bb_xHDUclGozuFfeMswR-GSIYFG_tZkrqAHtcomJKEdTtgtIj28u-qHZ5m5vnfFZ2noGxLya1OfjcCphSJ-hzP96jYNU-nzq89b10I/s1600/stars-mys2010.png) repeat top center;
  z-index:0;
}

.hitam{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1uaGmJ_ROVn57ArVPv0uoqGJcR4bPHV4y0qR4gxnKiwudJxh0jiHnba6VnDnY1i-rZ5DiWWSgIFivpg1QrNgTqFA5X3CjwA-LQKdfxxOB-Hyj3IQwjSr_jadIMOSomMHk9RaU2W-tgS0/s1600/hitam-mys2010.png) repeat top center;
  z-index:1;

  -moz-animation:move-hitam-back 200s linear infinite;
  -ms-animation:move-hitam-back 200s linear infinite;
  -o-animation:move-hitam-back 200s linear infinite;
  -webkit-animation:move-hitam-back 200s linear infinite;
  animation:move-hitam-back 200s linear infinite;
}

.awan{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGFRpoZhieY2Gx_elVDKzm4KgYeG6g-3uT4g8rqZTURlRmdK2qGF6mpZIZ8Pfqio2uEJ2ZVhpvlzdygEFk_DTIq5DngtwOx_QSVdVq_yZfOfSHCZvkWCQ6GEpZgq_RGk8aU8-6Ht-ceg/s1600/clouds-mys2010.png) repeat top center;
    z-index:3;

  -moz-animation:move-awan-back 200s linear infinite;
  -ms-animation:move-awan-back 200s linear infinite;
  -o-animation:move-awan-back 200s linear infinite;
  -webkit-animation:move-awan-back 200s linear infinite;
  animation:move-awan-back 200s linear infinite;
}
body div#M-2010_holder {
 position: absolute;
 left: -30%;
 bottom: 60px;
 z-index: 6;

 -webkit-animation: launch_M-2010 240s linear infinite;
 -moz-animation: launch_M-2010 240s linear infinite;
 -ms-animation: launch_M-2010 240s linear infinite;
 -o-animation: launch_M-2010 240s linear infinite;
 animation: launch_M-2010 240s linear infinite;
}

@-moz-keyframes launch_M-2010 {
 25% {
   z-index: 6;
 }
 50% {
   left: 140%;
   bottom: 600px;
   z-index: 0;
 }
 55% {
   bottom: 680px;
 }
 75% {
   z-index: 0;
 }
 100% {
   left: -30%;
   z-index: 6;
   bottom: 100px;
 }}
.Flying-mys2010 {
 z-index: 600;
 cursor: pointer;
 -webkit-animation: Flying-mys2010 198s infinite linear;
 -moz-animation: Flying-mys2010 198s infinite linear;
 -ms-animation: Flying-mys2010 198s infinite linear;
 -o-animation: Flying-mys2010 198s infinite linear;
 animation: Flying-mys2010 188s infinite linear;
 bottom: 10%;
 left: 0%;
 position: absolute;
}
@keyframes Flying-mys2010 {
25% {
bottom: 105%;
left: 110%;
transform: rotateY(0deg);
}
26% {
transform: rotateY(180deg);
}
50% {
 bottom:60%;
 left: 0%;
 transform: rotateY(180deg);
}
51% {
 transform: rotateY(0deg);
}
75% {
 bottom:40%;
 left: 85%;
 transform: rotateY(0deg);}
76% {
 bottom:40%;
 left: 85%;
 transform: rotateY(180deg);
}
99% {
 transform: rotateY(180deg);}}

@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}</style>
<link href="https://sites.google.com/site/code6916/file/Logo-oval-Mys2010.css" rel="stylesheet" type="text/css">
<div class="stars">
<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiywzLPZE3EdhcAt6jASnA3peG7y6tOwQNLRRyUXMIQ_hhiQF50c8_Ru6CiP2UO8PCGjeSz9Mirj5iZ2AOoxoXz-t_TL4-CK18F0jBfxn97ZBl4gMCzCkwVB5W5O_jCg3MA09jpZDqk6AU/s1600/kapal-startrek-mys2010.png"name="e902" border="0" width="250" height="130" /></a>
<div id="M-2010_holder">
<div id="M-2010_back">
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic5voh00tj_10-coPCrqImHu94pDeV6OTOg8ON1NoaeYPs4dbpzx0NRtuEojY39AcBP9RoiDuMnY3ZnxFRZRVgIoaoXcwD71AM-B5ekjSQgOpZesrKnCR7iIzAUHEaPnwqhtzu5d6iNqs/s1600/animated-satellite-mys2010.gif" name="e902" border="0" width=" 45" height="45" /></a>
<div id="Logo-Mys2010">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEptwnKUzb7KgGv6ur4Ub8vN5Ea36BqiIutJkcqNYUl72FpsWFIaNpWIluJSanqp5W31tuADlBYKeji-tPWN0OS-MsoU93YK8Q03vDlvA0sbIJRf3Nb9WkUL4p5X-bsP0Qp1ErfkQuvhk/s1600/animasi-globe-mys2010.gif" name="e902" border="0" width=" 85" height="85" /></a>
</div>
</div>
<div id="Logo-Mys2010">
</div>
</div>
<div class="hitam">
</div>
<div class="awan">
</div>
<canvas id="stars-2"></canvas>
<div class="ball">
<div id="Logo-Mys2010">
 <div class="Mys-2010">
<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ahsfxesLCe0jniwKCgLDDQIIKWPzvfB_ri27rHcxxzW5a-gfK4XQeHBKKYDUSBkeFD-dINvb-2rAv_DbZ23k8KApPkov-stVDEe6BP7sUFW8ejYMUkJ-tNo4fbtWvpIgjHcxlCzBHTw/s1600/Eaglemoss-mys2010.png"name="e902" border="0" width="250" height="100" /></a>
</div>
</div>
</div>
</div>
<div class="ap" id="ap">
<div align="center">
<a href="https://Link Download"title="Myscript2010s"> 
<h2>
<span style="color: #000; font-size: 12px;">DOWNLOAD FULL CODE</2></a>
</div>
<header>
<h2>
<div align="center">
<div id="wrapper">
<audio id="mys2010" src="https://sites.google.com/site/code6916/lagu/startrek-mys2010.mp3" controls="controls"></audio></h2>
</div>
</header>
<ul class="mys2010-list"><link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>  <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> <script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</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> <stars - 2> <script>
      var totalObjects = 1500;
var maxVelocity = 2;
var starSize = 1;
var twinkleFreq = 50000;
var shootingStarFreq = 500;
var shootingStarVelocity = 100;
var shootingStarSize = 1;

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            setInterval(callback, 75);
          };
})();

var canvas = document.getElementById('stars-2');
canvas.width = document.width || 1024;
canvas.height = document.height || 768;
var ctx = canvas.getContext("2d");

var stars = [];
var shootingStars = [];
this.init();

setInterval(update, 30);
requestAnimFrame(draw);

function init() {
  for(i=0;i<totalObjects;i++){
    stars.push(new Star());
  }
}

function draw() {
  requestAnimFrame(draw);
  ctx.clearRect(0,0,canvas.width,canvas.height);
   for(f=0;f<stars.length;f++)
   {
     stars[f].Update();
     stars[f].Draw();
   }
   for(f=0;f<shootingStars.length;f++)
   {
     shootingStars[f].Update();
     shootingStars[f].Draw();
   }
}

function update()
{
  if(Math.round((Math.random()*shootingStarFreq))==1){
    shootingStars.push(new ShootingStar());
  }
   for(f=0;f<shootingStars.length;f++)
   {
     if (shootingStars[f].X < -1000)
     {
       shootingStars.splice(f,1);
     }
   }
}
function Star(){
  this.X = Math.random()*canvas.width;
  this.Y = Math.random()*canvas.height;
  this.Velocity = (Math.random()*maxVelocity);
  this.Opacity = (((Math.random()*10)+1)*0.1);
  
  this.Update = function() {
    this.X -= this.Velocity;
    if(this.X<0){ ///reset
      this.X = canvas.width+1;
    }
  };
  
  this.Draw = function() {
    ctx.fillStyle = "rgba(255,255,255," + this.Opacity + ")";
    if(Math.round((Math.random()*twinkleFreq))==1){
      ctx.fillRect(this.X,this.Y,starSize+2,starSize+2);
    }
    else{
      ctx.fillRect(this.X,this.Y,starSize,starSize);
    }
  };
}

function ShootingStar() {
    this.X = 2000;
    this.Y = Math.random()*canvas.height;
    this.Length = 1000;
  
  this.Update = function(){
    this.X -= shootingStarVelocity;
  };
  
  this.Draw = function() {
    for (var i = 0; i < this.Length; i++){
      opacity = (0.8 - (0.001 * i));
      ctx.fillStyle = "rgba(255,255,255," + opacity + ")";
      ctx.fillRect(this.X+i,this.Y,shootingStarSize,shootingStarSize);
    }
  };
}       
    </script>
Hyperspace Code by Matt Popovich
Night sky with Stars Code by. Web Sonick
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here  Animated star trek  

Memasang Kode Cat in the frame
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;
margin-top:-20px;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  6px;
background: -moz-linear-gradient(top, #000020 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}

/* GRADIEND */
.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 #f6f5ee;  
font-size:  11px;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, red 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #ccc 50%, transparent 90%); 
}
body {
 position: absolute;
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 background: #111;
}
#canvas {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 600px;
 height: 400px;
 margin-left: -300px;
 margin-top: -200px;
 background: rgba(200, 54, 54, 0.5); 
}
#frame {
 position: absolute;
 left: 48%;
 top: 50%;
 width: 700px;
 height: 450px;
 margin-left: -320px;
 margin-top: -225px;
 border-radius: 10px;
 box-shadow: 0px 0px 100px 0px #f00;
}
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:   rgba(200, 54, 54, 0.5);
 
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
.contenedor{
  position:relative;
  width:100px;
  height:100px;
 
  margin: 350px;
margin-top:-65px
}
.cat{
  position:absolute;
  margin:0 -1px
}
.cara{
  position:absolute;
    width: 172px;
  height: 162px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:gray;
  border:3px solid #777;
  margin:125px 231px;
  -webkit-animation:sube 3s alternate infinite;
          animation:sube 3s alternate infinite;
}
.ojos {
  position:absolute;
  width:50px;
  height:50px;
  border-radius:100%;
  background:black;
  margin:70px 21px;
  -webkit-animation:cerrar 3s alternate infinite;
          animation:cerrar 3s alternate infinite;
}
.ojos3 {
  position:absolute;
  width:50px;
  height:50px;
  border-radius:100%;
  background:black;
  margin:70px 102px;
  -webkit-animation:cerrar 3s alternate infinite;
          animation:cerrar 3s alternate infinite;
}
.iris{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:100%;
  background:yellow;
  margin:12px 12px;
  -webkit-animation:shake .09s alternate infinite;
          animation:shake .09s alternate infinite;
}
.iris3{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:100%;
  background:yellow;
  margin:12px 25px;
  -webkit-animation:shake .09s alternate infinite;
          animation:shake .09s alternate infinite;
}
.ceja{
  position:absolute;
  width:60px;
  height:35px;
  border-radius:100%;
  background:gray;
  margin:43px 7px;
  -webkit-transform:rotate(-33deg);
          transform:rotate(-33deg)
}
.ceja3{
  position:absolute;
  width:60px;
  height:35px;
  border-radius:100%;
background:gray;
  margin:43px 98px;
  -webkit-transform:rotate(33deg);
          transform:rotate(33deg)
}
.boca{
  position:absolute;
  width:30px;
  height:21px;
  border-radius:100%;
  background: #333;
  margin:121px 72px;
  -webkit-animation:baja 3s alternate infinite;
          animation:baja 3s alternate infinite;
}
.hocico{
  position:absolute;
   height: 0;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 21px solid #121212;
  border-radius: 100px / 50px;
  margin:112px 65px;
  -webkit-animation:sube 3s alternate infinite;
          animation:sube 3s alternate infinite;
}
.hocico3{
  position:absolute;
  width:35px;
  height:30px;
  border-radius:100%;
  border-right:3px solid black;
  background:#94948c;
  margin:123px 50px;
 -webkit-animation:sube 3s alternate infinite;
         animation:sube 3s alternate infinite;
}
.hocico3::before{
  content:"";
  position:absolute;
  width:35px;
  height:30px;
  border-radius:100%;
  border-left:3px solid black;
  background:#94948c;
  margin:0px 35px
}

.orejas{
  position:absolute;
  width:70px;
  height:90px;
  border-radius:500px 50px 500px 50px;
  background:#f00; 
  border:6px solid gray;
  margin:95px 201px;
  -webkit-transform:rotate(-45deg);
          transform:rotate(-45deg);
-webkit-animation:sube3 3s alternate infinite;
        animation:sube3 3s alternate infinite;
}

.orejas3{
  position:absolute;
  width:70px;
  height:90px;
  border-radius:50px 500px 50px 500px;
  background:#f00; 
  border:6px solid gray;
  margin:95px 350px;
 -webkit-transform:rotate(45deg);
         transform:rotate(45deg);
-webkit-animation:sube3 3s alternate infinite;
        animation:sube3 3s alternate infinite;  
}

.body{
  position:absolute;
   width: 162px;
  height: 212px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:gray;
  border:3px solid #888;
  margin:251px 231px;
}
.legs{
  position:absolute;
  width:35px;
  height:132px;
  border-radius:21px;
  background:gray;
  border:3px solid #777;
  margin:90px 7px;
  -webkit-transform:rotate(12deg);
          transform:rotate(12deg)
}
.legs::before{
  content:"";
  position:absolute;
  width:35px;
  height:132px;
  border-radius:21px;
  background:gray;
  border:3px solid #777;
  margin:-24px 102px;
  -webkit-transform:rotate(-24deg);
          transform:rotate(-24deg)
}
.legs3{
  position:absolute;
  width:90px;
  height:75px;
  border-radius:70px 70px 0 0;
  background:gray;
  border:3px solid #777;
  margin:360px 212px
}
.legs3::before{
  content:"";
  display:block;
  width:121px;
  height:30px;
  border-radius:30px;
  background:gray;
  border-left:3px solid #777;
  border-bottom:3px solid #777;
  margin:70px -21px
  
}
.legs7{
  position:absolute;
  width:90px;
  height:75px;
  border-radius:70px 70px 0 0;
  background:gray;
  border:3px solid #777;
  margin:360px 321px
}
.legs7::before{
  content:"";
  display:block;
  width:121px;
  height:30px;
  border-radius:30px;
  background:gray;
  border-right:3px solid #777;
  border-bottom:3px solid #777;
  margin:70px -21px
  
}
.legs9{
  position:absolute;
  width:40px;
  height:21px;
  border-radius:12px;
  background:gray;
  border:3px solid #777;
  margin:112px -5px;
-webkit-transform:rotate(-12deg);
        transform:rotate(-12deg)
}
.legs9::before{
  content:"";
  position:absolute;
  width:40px;
  height:21px;
  border-radius:12px;
  background:gray;
  border:3px solid #777;
  margin:0px 132px;
 
}
.bigotitos{
  position:absolute;
  width:90px;
  height:30px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:107px -12px;
  -webkit-animation:sube 3s alternate infinite;
          animation:sube 3s alternate infinite;
  
}
.bigotitos::before{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:13px 7px;
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg);
}
.bigotitos::after{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:18px 9px;
   -webkit-transform: rotate(-21deg);
           transform: rotate(-21deg);
}
.bigotitos3{
  position:absolute;
  width:90px;
  height:30px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:107px 90px;  
  -webkit-animation:sube 3s alternate infinite;  
          animation:sube 3s alternate infinite;  
  
}
.bigotitos3::before{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:12px 12px;
    -webkit-transform: rotate(12deg);
            transform: rotate(12deg);
}
.bigotitos3::after{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:16px 13px;
   -webkit-transform: rotate(25deg);
           transform: rotate(25deg);
}
.cola{
  position:absolute;
  width:172px;
  height:121px;
  border-radius:100%;
  border-bottom:35px solid gray;
  margin:300px 360px;
  -webkit-animation:go 3s alternate infinite;
          animation:go 3s alternate infinite;
}
@-webkit-keyframes shake{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}
  75%{-webkit-transform:scale(1);transform:scale(1)}
  
}
@keyframes shake{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}
  75%{-webkit-transform:scale(1);transform:scale(1)}  
}
@-webkit-keyframes sube {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(-7px);transform:translatey(-7px)}  
}
@keyframes sube {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(-7px);transform:translatey(-7px)}  
}
@-webkit-keyframes baja {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(9px);transform:translatey(9px)}  
}
@keyframes baja {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(9px);transform:translatey(9px)}  
}
@-webkit-keyframes go{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}  
}
@keyframes go{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}  
}
@-webkit-keyframes cerrar {
  0%,25%{opacity:1}
  35%{opacity: 0}
  50%{opacity:1;}
  100%{opacity:1}
}
@keyframes cerrar {
  0%,25%{opacity:1}
  35%{opacity: 0}
  50%{opacity:1;}
  100%{opacity:1}
}
@-webkit-keyframes sube3  {
  0%{margin-top:95px}
   100%{margin-top:85px ;}
  
}
@keyframes sube3  {
  0%{margin-top:95px}
   100%{margin-top:85px ;}  
</style>}
<canvas id="canvas"></canvas>
<div id="frame">
</div>
<div class="contenedor">
<div class="cat">
<div class="cola">
</div>
<div class="legs3">
</div>
<div class="legs7">
</div>
<div class="body">
<div class="legs">
<div class="legs9">
</div>
</div>
</div>
<div class="orejas">
</div>
<div class="orejas3">
</div>
<div class="cara">
<div class="ojos">
<div class="iris">
</div>
</div>
<div class="ojos3">
<div class="iris3">
</div>
</div>
<div class="ceja">
</div>
<div class="ceja3">
</div>
<div class="bigotitos">
</div>
<div class="bigotitos3">
</div>
<div class="boca">
</div>
<div class="hocico3">
</div>
<div class="hocico">
</div>
</div>
</div>
</div>
<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:#111; font-size: 9pt">CIBEBER CIMAHI</2></a>  
</div>
<header>
<a href="http://demoshow-mys2010.blogspot.co.id/2016/05/bingkai-kucing.html" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:blue; font-size: 8pt">LET'S STUDY</2></a>  
</div>
</header>
Sad kitty code by. Judith Neumann
Photos in the Frame Code by. Gerard Ferrandez
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here  Cat in the frame