Memasang Kode Exiting Hyperspace Pure CSS
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;
margin-top:-18px;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  3px;
background: -moz-linear-gradient(top, #111 0%, #222 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:  #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%, #777 50%, transparent 90%); 
}
/*KAPAL MYS-2010*/
.scene,
.space {
  animation: fadeIn 3s 1 linear;
}
input {
  color: #ff0;
  outline: none;
  border: 2px solid #000;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 6px;
  width: 100px;
  height: 40px;
  margin: 30px 0 0 -100px;
  position: absolute;
  left: 54%;
  top: 8%;
  background: transparent;
  z-index: 9999;
  animation: reload-button 17s ease-out 1;
}
input:hover {
  background-color: rgba(255, 255, 255, 0.6);
}
@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.45s ease-out 1;
}
.thruster.t1 {
  top: 61%;
  left: 34%;
}
.thruster.t2 {
  top: 57.5%;
  left: 62.5%;
}
.thruster.t3 {
  top: 58.5%;
  left: 69%;
}
.thruster.t4 {
  top: 60.5%;
  left: 25.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/AVvXsEhC0zeWInPNRvYNFex1vNFm6f9yZY2krrN8WGIXH_Airg-QH6JsFeKPZ_4ScAfnLMhpQEZp8Nh-fSEzTivdrQJ7QxTp-17bpYPI0j-0KTw2HexCfSLoz54drjtqj0bA__PTHOCqlYmrUfw/s1600/kapal-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: 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: 50vh;
  max-width: 268px;
  height: 50vh;
  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;
  }
}
/*awan bintang*/
@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/AVvXsEipOgJ8Jg-43YIt1desQrpXvLrPAlRjLOIp8MHoYDqqvf_K-_zjjio0HIF89OiamHJi1j4ph5YCJo5Cs4z-DmFGunXdAyecVlH_ETZsaNRUr501xELAnzkdJ0qlAhH9kISH16WrG8060Zs/s1600/bg1-plash-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/AVvXsEhORLv9vmAXNTaZLM1VRC7HqhF6AOWrIj1ydLQcQsD6OFxZMNFXgJ_JochOpC1WhJUlbw_u0Drj7YwnEZe3ZifYHL_UStym5_6YAkW5rNXIdtdE_Z1sjaZw66E9X3Riq7hgNMbAn0tRclI/s1600/awan-biru-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;
}
/*Satellite M-2010*/
body div#St_M-2010_holder {
 position: absolute;
 left: -30%;
 bottom: 60px;
 z-index: 6;
 -webkit-animation: St_M-2010 240s linear infinite;
 -moz-animation: St_M-2010 240s linear infinite;
 -ms-animation: St_M-2010 240s linear infinite;
 -o-animation: St_M-2010 240s linear infinite;
 animation: St_M-2010 240s linear infinite;
}
@-moz-keyframes St_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;
 }}
#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: 20px;
} 
</style>
<link href="https://sites.google.com/site/code6916/file/Logo-Mys2010.css?attredirects=0&d=1" rel="stylesheet" type="text/css">
<div class="stars">
<div id="St_M-2010_holder">
<div id="St_M-2010_back">
</div>
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYltMpAG1_PMEFXjNRshdnrmJEJJTEzrs1w_hc_jiuwEhtO3aINw13uJ0jF7lH_nX3xo1jyYxTtHJPpCHv79yrYE7TLUax3c-FkXR_zDIjYzhqL1oVpahfYwDeOjsnPzUmfmRGejWgyGA/s1600/satelit-mys2010.gif"name="e902" border="0" width="108" height="109" /></a>
<div id="St_M-2010_ball">
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguCTqQ2SIaZnvkSTULJAW67TUK5GSNq2m0SKB17zxcXtQbeZ3Uyebk58Nzn5FMnDmnIsoildEawjdLlt56qCxEqGnzVvfsOU4rrEL5qz1eonntoSherpyW8Q2Dfurn0MtV8FDNI4aET8I/s1600/Animasi-satellite-mys2010.gif"name="e902" border="0" width="108" height="109" /></a>
</div>
</div>
<div id="Logo-Mys2010">
</div>
</div>
<div class="hitam">
</div>
<div class="awan">
</div>
<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="outside lighting">
<div class="thruster t4">
</div>
<div class="thruster t3">
</div>
<div class="thruster t2">
</div>
<div class="thruster t1">
</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>
<input type="button" value="replay" onClick="history.go(0)">
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">

<div align="center" style="margin-top: 1px">
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/Metallica-mys2010.mp3" controls="controls"></audio></a>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/05/exiting-hyperspace-pure-css.html" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:#eee; font-size: 8pt">LET'S STUDY</2></a>  
</div>
</header>


<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> Edited by . <a href="Link Download" title="Download Full Code">&nbsp; Myscript2010 </a>&nbsp; Download </a> 
</div>

<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> Copyright <a href="http://demoshow-mys2010.blogspot.co.id/2016/05/exiting-hyperspace-pure-css.html" title="Exiting Hyperspace Pure CSS">&nbsp; 2010 - 2016 </a>&nbsp; Hyperspace </a> 
</div>
<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>  
<script>
      $(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mys2010-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
}  
</script>
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  Exiting Hyperspace