Menu


Menu Tab

Pages

Dark Forest With Audio Mp3

Memasang kode
Dark Forest With Audio Mp3
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kodeblank templateyang tersedia pada sumber berikut :
Get Blank Template  edit background warna sesuai keinginan Kemudian 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>
<style class="Mys2010-styles">
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/AVvXsEhqoB3foG-tF_vQBnul3AgwB8EjTort8EpNKoWdV632z91cyApz9vdgwgdvtRXBq9gDO71PsNE4WDi7WiVRbhZrgZPeby_8udErIs1oNXyV3v7dEOtxEsrsvE06YoY4NVxOhWLdgrOTGJGA/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 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/AVvXsEhAqBMPom3TPBbvL57L76uE76bGe1WURRXPxpd3jSyhibhJA_NJ86x7I1XemDHph1euibIQdGm4jr_Q5RbLz9WFB59wb0DS9_jp0RTPje9BDSxsXS92weGFybKAisqeeS44ZrriKyGDhmxJ/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>
Penjelasan :
Ganti background gambar, Link Mp3 dan link title sesuai keinginan
Dark Forest by. Michiel Bijl on Codepen
Audio Mp3 by. Cartoonist ARiF on Codepen
Design Code is Edited by. Myscript2010 on Codepen

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi