edit background warna sesuai keinginan dan 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
<link href="http://www.mp3mixtape.us/iframes/css/mediaelementplayer.min.css" rel="stylesheet prefetch"></link>
body {background-image: url();color:red;height:100%;overflow:hidden;}
.animation-mys2010 {position:absolute;bottom:0;width:100 ; }
.window {position:absolute;left:30px;top:10px;}
.bugaloos { position:absolute;left:483px;top:220px;
animation-name: float;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;}
.backwall {position:absolute;width:6%;height:60%;}
@keyframes Flying-mys2010 {
25% {
bottom: 80%;
left: 85%;
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);
}
}
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: 0px 0;
position: fixed;
top: 0;
width: 100%;
background: #000;
border-bottom: 3px solid #dad;
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #000;
border-top: 2px solid #f0f;
z-index: 9999;
}
/* Start: Show/Hide Playlist*/
.mejs-controls .mejs-show-playlist button {
background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
background-position: -17px -17px;
}
.mejs-controls .mejs-hide-playlist button {
background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
background-position: -16px 0;
}
/* End: Show/Hide Playlist */
/* Start: Previous */
.mejs-controls .mejs-prevtrack button {
background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
background-position: 0 -16px;
}
/* End: Previous */
/* Start: Next */
.mejs-controls .mejs-nexttrack button {
background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
}
/* End: Next */
/* Start: Shuffle */
.mejs-controls .mejs-shuffle-on button {
background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
background-position: -32px 0;
}
.mejs-controls .mejs-shuffle-off button {
background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
background-position: -32px -16px;
}
/* End: Shuffle */
/*Start: Playlist*/
.mejs-playlist {
position: absolute;
height: auto !important;
overflow-y: auto;
}
.mejs-playlist ul {
padding-left: 15px;
}
.mejs-playlist li {
float: left;
color: #fcce0a;
font-weight: bold;
font-size: 14px;
height: 16px;
overflow: hidden;
cursor: pointer;
display: block;
padding: 1px 1px 1px 1px;
}
.mejs-playlist li:hover {
color: #b70000;
font-weight: bold;
}
.mejs-playlist li.current {
color: #0afc55;
font-weight: bold;
}
/*Code Music End*/
/*Background Forest*/
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7oKJljcRvDrdNrDfGGbJOjE0TpDOluzJAdpFx63AxhSSmHz-G0Q6LBfz909ffbe4JmYep90jgQTstwMkpXHq6R5vUKL6BHDqQZRiXZX3v-Nx94Sk38HL6gllmT4axEDqM4qyvOn1ziKfJ/s1600-r/Cibeber-Cimahi-mys2010.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body::before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
-webkit-animation: overlay infinite 12s;
animation: overlay infinite 12s;
content: '';
}
h1 {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
width: 50px;
height: 1.4em;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
color: rgba(255, 255, 255, 0.55);
font-family: agency fb, helvetica neue, sans serif;
font-size: 1.4em;
font-weight: 500;
line-height: 1.4em;
letter-spacing: .35em;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-webkit-animation: opacity infinite 12s;
animation: opacity infinite 12s;
}
h1 span {
display: block;
position: absolute;
top: 0;
}
h1 span:nth-child(1) {
right: 100%;
margin-right: -.4em;
}
h1 span:nth-child(2) {
left: 100%;
}
h1::before, h1::after {
display: block;
position: absolute;
top: 50%;
width: 2px;
height: 30px;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.55);
content: '';
}
h1::before {
left: 18px;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateZ(-50%) rotateX(-90deg);
transform: translateZ(-50%) rotateX(-90deg);
-webkit-animation: transform ease-out infinite 12s;
animation: transform ease-out infinite 12s;
}
h1::after {
right: 18px;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translateZ(-50%) rotateX(-90deg);
transform: translateZ(-50%) rotateX(-90deg);
-webkit-animation: transform ease-out infinite 12s;
animation: transform ease-out infinite 12s;
}
@-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>
<h1> <span><a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> Mys2010</a></span><span><a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Css Effect">Effects</a></span></h1> <div align="center"> <audio controls="" id="mejs" type="audio/mp3"> <source src="https://sites.google.com/site/studiedingsongmp3/laguku/Night-of-the-wolf-black-coach-ave-Sinitra-mys2010.mp3" title="01 - Nox Arcana - Night of the wolf "></source> <source src="https://sites.google.com/site/studiedingsongmp3/laguku/2-Pendulum-Resurrected-mys2010.mp3" title="02 - Nox Arcana - Pendulum - Resurrected"></source> <source src="https://sites.google.com/site/laguhiburan/mp3-1/ebonshire-mys2010.mp3" title="03 - Nox Arcana - Ebonshire Instrumental"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/4-Nox-Arcana-he-Rose-Of-Winter-mys2010.mp3" title="04 - Nox Arcana - he Rose Of Winter"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/5-Dream-Nox-Arcana-mys2010.mp3" title="05 - Nox Arcana - Dream a Dream "></source> <source src="https://sites.google.com/site/songlagustudy/mp3/6-Circus-Diabolique-Nox-Arcana-mys2010.mp3 " title="06 - Nox Arcana - Circus Diabolique"></source> /*batas*/ <source src="https://sites.google.com/site/songlagustudy/mp3/7-Blood-of-Angels-Nox-Arcana-mys2010.mp3" title=" 07 - Nox Arcana - Blood-of-Angels"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/8-Angels-Are-Weeping-Nox-Arcana-mys2010.mp3" title="08 - Nox Arcana - Angels-Are-Weeping"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/Blood-of-Angel-Esence-of-Evil--Nox-Arcana-mys2010.mp3" title="09 - Nox Arcana - Blood of Angel - Esence of-Evil"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/Kind-Red-Spirit-Lair-of-the-Vampire-Nox-Arcana-mys2010.mp3" title="10 - Nox Arcana - Kind Red Spirit - Lair of the Vampire"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/Sanctuary-Nox-Arcana-mys2010.mp3" title="11 - Nox Arcana - Sanctuary - Nox-Arcana"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/Scarbrough-Fire-Nox-Arcana-mys2010.mp3" title="12 - Nox Arcana - Scarbrough Fire - Nox Arcana"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/Werise-Above-Nox-Arcana-mys2010.mp3" title="13 - Werise-Above - Nox Arcana"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/Temple-of-the-Black-Pharaoh-Arcana-mys2010.mp3" title="14 - Nox Arcana - Temple of the Black Pharaoh"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/Werise-Above-Nox-Arcana-mys2010.mp3" title="15 - Nox Arcana - Werise Above Nox-Arcana"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/Nox-Arcana-Beyond-Midnight-Cyristal-Forest-mys2010.mp3" title="16 - Nox Arcana - Beyond Midnight - Cyristal Forest"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/Nox-Arcana-Ghosts-of-Christmas-Past-Living-Dolls-mys2010.mp3" title="17 - Nox-Arcana - Ghosts of Christmas Past - Living Dolls"></source> <source src="https://sites.google.com/site/songlagustudy/mp3/Nox-Arcana-Madness-mys2010.mp3" title="18 - Nox Arcana - Madness - Nox Arcana "></source> <source src="https://sites.google.com/site/songlagustudy/mp3/Nox-Arcana-Past-Time-with-Good-Company-Ligeia-mys2010.mp3" title=" 19 - Nox-Arcana - Past Time with Good Company - Ligeia"></source></audio>
</div> <div id="Mys2010-1"> </div> <div id="Mys2010-2"> </div> <canvas id="Cibeber Cimahi"></canvas> <div id="animation-mys2010"> <div class="insidewalls" id="animation-mys2010"> <img border="0" class="bugaloos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif" height="49" name="e902" width="48" />
<div class="ap" id="ap"> <div align="center"> <a href="#" target="_blank"title="Mari Belajar"> <img class="expando" border="0" src="https://sites.google.com/site/usesitesto/file-code/silver-logo-M2010.png"name="e902" border="0" width="60" height="40" /><font size="2" color="yellow"face="agency fb"> <p> EDITED BY. MYSCRIPT - 2010</P></a> </div> </div>
<header> <a href="#" title="Myscript2010"><center> <font size="3" color="aqua"face="Agency FB">DARK FOREST WITH NOX ARCANA</a> </header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script> <script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"> </script>
<script src="http://www.mp3mixtape.us/iframes/js/jquery.reverseorder.js"> </script> <script src="http://www.mp3mixtape.us/iframes/js/mediaelement-and-player-fs.js"> </script> <script src="http://www.mp3mixtape.us/iframes/js/mep-feature-playlist.js"> </script> <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'> </script>
<script>$(function () {
$('video,audio').mediaelementplayer({
loop: true,
shuffle: true,
playlist: true,
playlistposition: 'bottom',
audioHeight: 30,
features: [
'playlistfeature',
'prevtrack',
'playpause',
'nexttrack',
'loop',
'shuffle',
'playlist',
'current',
'progress',
'duration',
'volume'
],
keyActions: []
});
});
</script>
Dark Forest by. Michiel Bijl
Audio code by. Cartoonist Arif
Design code is edited by. Mys2010 In Codepen
Audio code by. Cartoonist Arif
Design code is edited by. Mys2010 In Codepen
If you want to directly copy and paste you canDownload Here Dark Forest Audio Mp3
