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 baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kodeblank template,  yang 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

DEMOSHOW

Kites Broke

Memasang kode Kites Broke
Untuk menerapkan kode tersebut Langkah awal 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 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

<style class="styles">

body {#);color:red;height:100%;overflow:hidden;}
/* HEADER*/
body{background:;font-family:Arial,Helvetica,sans-serif;color:#666666;height:100%;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-khtml-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.navigation{padding:20px;background-color:#999999;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#bfbfbf), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #bfbfbf 0%, #999999 100%);background-image:-moz-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-o-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-khtml-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-ms-linear-gradient(top, #bfbfbf 0%, #999999 100%);background-image:linear-gradient(top, #bfbfbf, #999999 100%);background-repeat:repeat-x;}.navigation .container{padding:8px;}
.navigation .nav_outer{background-color:#cccccc;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#808080), color-stop(100%, #cccccc));background-image:-webkit-linear-gradient(top, #808080 0%, #cccccc 100%);background-image:-moz-linear-gradient(top, #808080, #cccccc 100%);background-image:-o-linear-gradient(top, #808080, #cccccc 100%);background-image:-khtml-linear-gradient(top, #808080, #cccccc 100%);background-image:-ms-linear-gradient(top, #808080 0%, #cccccc 100%);background-image:linear-gradient(top, #808080, #cccccc 100%);background-repeat:repeat-x;padding:1px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;}
.navigation ul{background-color:#a6a6a6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#999999), color-stop(100%, #a6a6a6));background-image:-webkit-linear-gradient(top, #999999 0%, #a6a6a6 100%);background-image:-moz-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-o-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-khtml-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-ms-linear-gradient(top, #999999 0%, #a6a6a6 100%);background-image:linear-gradient(top, #999999, #a6a6a6 100%);background-repeat:repeat-x;padding:8px 0 8px 8px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;overflow:hidden;}
.navigation li{background-color:#fff;font-size:13px;line-height:16px;margin-right:8px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-khtml-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-o-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-khtml-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-ms-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);margin-bottom:8px;}
.navigation li:last-child{margin-bottom:0;}
.navigation a{text-decoration:none;display:block;text-align:center;padding:2px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-khtml-border-radius:3px;-ms-border-radius:3px;border-radius:3px;font-weight:bold;color:#555;text-shadow:1px 1px rgba(255, 255, 255, 0.4),-1px -1px rgba(0, 0, 0, 0.075);}
.navigation li:not(.active){position:relative;top:-2px;-webkit-transition:top 0.1s linear;-moz-transition:top 0.1s linear;-o-transition:top 0.1s linear;-khtml-transition:top 0.1s linear;-ms-transition:top 0.1s linear;transition:top 0.1s linear;}.navigation li:not(.active):hover{top:0;}
.navigation li:not(.active) a{-webkit-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-o-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-khtml-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-ms-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-webkit-transition:box-shadow 0.1s linear;-moz-transition:box-shadow 0.1s linear;-o-transition:box-shadow 0.1s linear;-khtml-transition:box-shadow 0.1s linear;-ms-transition:box-shadow 0.1s linear;transition:box-shadow 0.1s linear;color:#666666;}.navigation li:not(.active) a:hover{-webkit-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-moz-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-o-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-khtml-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-ms-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);color:#555;}
.navigation span{display:block;padding:5px 10px;background-color:#ffffff;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#dddddd), color-stop(100%, #ffffff));background-image:-webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);background-image:-moz-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-o-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-khtml-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);background-image:linear-gradient(top, #dddddd, #ffffff 100%);background-repeat:repeat-x;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;background-color:#fff;}
@media only screen and (min-width:420px){.main{padding-top:48px;} .navigation{position:absolute;top:0;left:0;width:100%;}.navigation li{margin-bottom:0;} .navigation ul{padding-right:8px;} .navigation li{display:inline-block;vertical-align:top;width:18%;margin-right:1.25%;} .navigation li:last-child{margin-right:0;}} 

.stormclouds {
    position: absolute;
    z-index: 1000;
    height: 100%;
    width: 100%;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUKfSglb6EgMuSAQr8UysHybEtdvAntSn_Dvh-r-8EUgHlrE3S_GHIjUOh6XoZQpcGQFwegMTu8dlFlqG4I3FYetOhur6rzFyptKImxcaBEh99TRrQ3iDa-QFCnWYOt-6gd1bwnGmTmXpj/s1600-r/awan-mys2010.jpg") repeat;
}
.kite {
    position: absolute;
    z-index: 5000;
    width: 184px;
    height: 132px;
}
/*! Spin the kite around */
.rotate {
    -webkit-animation: rotate 5s infinite linear;
    animation: rotate 5s infinite linear;
}
 @-webkit-keyframes rotate {
 100% {
 -webkit-transform: rotateY(360deg);
 transform: rotateY(360deg);
}
}
 @keyframes rotate {
 100% {
 -webkit-transform: rotateY(360deg);
 transform: rotateY(360deg);
}}
    </style>

<div class="stormclouds sepia">
</div>
<div id="kite" class="kite rotate">
<img  class="sepia" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIIZVoAO5Q-u0ql4J5ZheJ_4TABBcn-kNd62nMZxv3ba6n9xyWKTVRg4R54t06VS3-KDVJratBQ1ZUNNJCGxWKt48OjINHp0KN6NOC9uN5_FVfygzbjRSflM0oYfC21tHrUAjSzXug5DK/s1600-r/kite-mys2010.gif" alt="Click for Oz"/></a></div>
<center>
<div class="navigation">
<div class="nav_outer">
<ul>
<li class="active">
<h2>
<a href="http://codepen.io/Myscript2010/pen/YqNRWM"target="_blank" title="Mys2010 on Codepen"><span>CODEPEN</span></a></h2>
</li>
<li>
<h2>
<a href="https://gist.github.com/Myscript2010"target="_blank" title="Mys2010 on Github"><span>GITHUB</span></a></h2>
</li>
<li>
<h2>
<a href="https://jsfiddle.net/user/dashboard/"target="_blank" title="Mys2010 on Jsfidle"><span>JSFIDDLE</span></a></h2>
</li>
<li>
<h2>
<a href="https://dribbble.com/Myscript2010s"target="_blank" title="Let's Share"><span>DRIBBBLE</span></a></h2>
</li>
<li>
<h2>
<a href="http://codepen.io/WhizofaWiz/pen/xVZZeB" target="_blank" title="Sumber"><span>SOURCES</span></a></h2>
</li>
</ul>
</div>
</div>

<script src='//codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html>
</section>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>
       position=0;
var interval = setInterval(function () {
position -= 1;
$(".stormclouds").css({ "background-position":+ position +"px 0px" }) },50 );
// Float the kite around the screen
$(document).ready(function(){
    animateDiv();  
});
function makeNewPosition(){  
    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 132;
    var w = $(window).width() - 184;  
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    return [nh,nw];    
}
function animateDiv(){
    var newq = makeNewPosition();
    var oldq = $('.kite').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
  
    $('.kite').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv();      
    });  
};
function calcSpeed(prev, next) {  
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    var speedModifier = 0.1;
    var speed = Math.ceil(greatest/speedModifier);
    return speed;

}
// Set up our Tiny Torndado  Find it here https://github.com/vinceallenvince/tinytornado
//  I swear, you can find everything online if you look long enough.

 var base = new TinyTornado.Vortex.Base({
        perlinSpeed: 0.002
      });
      var debris = new TinyTornado.Vortex.DebrisBit();
      var spine = new TinyTornado.Vortex.Spine({
        density: 10
      });
      var shell = new TinyTornado.Vortex.ShellBit();

      var vortex = new TinyTornado.Vortex.RunnerBit(base, debris, spine, shell);
      vortex.init({
        el: document.getElementById('worldA')
      });

        /*Made some use of the Buzz Audio Library.
http://buzz.jaysalvat.com/documentation/sound/
MP3s are pretty safe to use when you are targeting HTML5 Audio.  Non supported browsers just don't hear the awesomeness of New Orleans.

Read the Buzz Docs.  Super easy to use.
*/
 /***************************
Setting Audio defaults and registering audio.
****************************/
buzz.defaults.formats = [ 'mp3' ];
buzz.defaults.preload = 'metadata';
var Overture = new buzz.sound("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/Overture", {
    formats: [ "mp3" ],
    preload: true,
    autoplay: false,
    volume: 30,
    loop: true
});
var notinkansas = new buzz.sound("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/notinkansas", {
    formats: [ "mp3" ],
    preload: true,
    autoplay: false,
    volume: 100,
    loop: false
});
var cyclone = new buzz.sound("https://sites.google.com/site/studiedingsongmp3/laguku/UB40-Here-I-Am-Mys2010.mp3", {
    formats: [ "mp3" ],
    preload: true,
    autoplay: false,
    volume: 15,
    loop: true
});

/***************************
Grouping the sounds so I can toggle them off and on all at once
****************************/  
var soundEffects = new buzz.group([
    Overture,
    cyclone
]);  

document.querySelector('.youtube-button').addEventListener('click', function (e) {
    this.classList.toggle('youtube-button--active');
});
$('.youtube-button').on('click', function() {
  
    soundEffects.togglePlay();
    });
    </script>

Edited by. Mys2010 on Jsfiddle
Buttons by. Mark Sottek on Codepen

DEMOSHOW

Social Net With Firework

Memasang kode
Social Net With Firework
Untuk menerapkan kode tersebut Langkah awal 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 kodeblank template,  yang 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

<style class="styles">

body {background-image: url(http://cdn.pcwallart.com/images/red-color-gradient-wallpaper-1.jpg);color:red;height:100%;overflow:hidden;}
body{background:;font-family:Arial,Helvetica,sans-serif;color:#666666;height:100%;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-khtml-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.navigation{padding:20px;background-color:#999999;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#bfbfbf), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #bfbfbf 0%, #999999 100%);background-image:-moz-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-o-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-khtml-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-ms-linear-gradient(top, #bfbfbf 0%, #999999 100%);background-image:linear-gradient(top, #bfbfbf, #999999 100%);background-repeat:repeat-x;}.navigation .container{padding:8px;}
.navigation .nav_outer{background-color:#cccccc;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#808080), color-stop(100%, #cccccc));background-image:-webkit-linear-gradient(top, #808080 0%, #cccccc 100%);background-image:-moz-linear-gradient(top, #808080, #cccccc 100%);background-image:-o-linear-gradient(top, #808080, #cccccc 100%);background-image:-khtml-linear-gradient(top, #808080, #cccccc 100%);background-image:-ms-linear-gradient(top, #808080 0%, #cccccc 100%);background-image:linear-gradient(top, #808080, #cccccc 100%);background-repeat:repeat-x;padding:1px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;}
.navigation ul{background-color:#a6a6a6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#999999), color-stop(100%, #a6a6a6));background-image:-webkit-linear-gradient(top, #999999 0%, #a6a6a6 100%);background-image:-moz-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-o-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-khtml-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-ms-linear-gradient(top, #999999 0%, #a6a6a6 100%);background-image:linear-gradient(top, #999999, #a6a6a6 100%);background-repeat:repeat-x;padding:8px 0 8px 8px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;overflow:hidden;}
.navigation li{background-color:#fff;font-size:13px;line-height:16px;margin-right:8px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-khtml-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-o-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-khtml-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-ms-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);margin-bottom:8px;}
.navigation li:last-child{margin-bottom:0;}
.navigation a{text-decoration:none;display:block;text-align:center;padding:2px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-khtml-border-radius:3px;-ms-border-radius:3px;border-radius:3px;font-weight:bold;color:#555;text-shadow:1px 1px rgba(255, 255, 255, 0.4),-1px -1px rgba(0, 0, 0, 0.075);}
.navigation li:not(.active){position:relative;top:-2px;-webkit-transition:top 0.1s linear;-moz-transition:top 0.1s linear;-o-transition:top 0.1s linear;-khtml-transition:top 0.1s linear;-ms-transition:top 0.1s linear;transition:top 0.1s linear;}.navigation li:not(.active):hover{top:0;}
.navigation li:not(.active) a{-webkit-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-o-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-khtml-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-ms-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-webkit-transition:box-shadow 0.1s linear;-moz-transition:box-shadow 0.1s linear;-o-transition:box-shadow 0.1s linear;-khtml-transition:box-shadow 0.1s linear;-ms-transition:box-shadow 0.1s linear;transition:box-shadow 0.1s linear;color:#666666;}.navigation li:not(.active) a:hover{-webkit-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-moz-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-o-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-khtml-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-ms-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);color:#555;}
.navigation span{display:block;padding:5px 10px;background-color:#ffffff;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#dddddd), color-stop(100%, #ffffff));background-image:-webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);background-image:-moz-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-o-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-khtml-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);background-image:linear-gradient(top, #dddddd, #ffffff 100%);background-repeat:repeat-x;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;background-color:#fff;}
@media only screen and (min-width:420px){.main{padding-top:48px;} .navigation{position:absolute;top:0;left:0;width:100%;}.navigation li{margin-bottom:0;} .navigation ul{padding-right:8px;} .navigation li{display:inline-block;vertical-align:top;width:18%;margin-right:1.25%;} .navigation li:last-child{margin-right:0;}}

#social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>

<center>
<div class="navigation">
<div class="nav_outer">
<ul>
<li class="active">
<h2>
<a href="http://codepen.io/kevadamson/pen/nqCgw"target="_blank" title="Sources Button on Codepen"><span>RESPONSIVE</span></a></h2>
</li>
<li>
<h2>
<a href="https://gist.github.com/Myscript2010/8e36ce09eddd038156d5"target="_blank" title="Sources social networking"><span>SOCIAL NET</span></a></h2>
</li>
<li>
<h2>
<a href="http://codepen.io/Myscript2010/pen/XdpomG"target="_blank" title="Full Code on Codepen"><span>FULL CODE</span></a></h2>
</li>
<li>
<h2>
<a href="https://dribbble.com/Myscript2010s"target="_blank" title="Let's Share"><span>DRIBBBLE</span></a></h2>
</li>
<li>
<h2>
<a href="http://codepen.io/chuongdang/pen/yzpDG"target="_blank" title="Sources Firework on Codepen"><span>FIREWORK</span></a></h2>
</li>
</ul>
</div>
</div>

<div id="social">
<a title="Facebook" href="https://www.facebook.com/learn.editing.myscript2010" target="_blank">  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhyphenhyphenucd0wZJNmneT62SGwxoRYPqs3bIvHm0TSvPX6tGuoGcpARro0TQpvNjNgAD021uRsTmkfU7BhkhW4inb_tSIw06_Q9atpEm2JBE4xTlbPtsPvDq6MmS1UGBbsPWoCbda3nUQWjg4AT/s1600-r/facebook-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a>   <a title="Gg Pluss" href="https://plus.google.com/u/0/101254379497511200564/posts" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhaVWu4HiTU7o7R9qFj-N-RXEugGByGk9urow1VJ4rg0eGVodZRv5izKowkoCFB2zfe4__k14WUrrV0K71BnqJ8zQjIo74kdp20evfBntTmplrIxjGu9SCFoKniAznl_wAaqeVqk9qmggo/s1600-r/google-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a>   <a title="Mys2010 on Codepen" href="http://codepen.io/hello" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIdsNNQDoOCwvCsIIDABeNTjTMvtmphLRxaeZ8sJv0rHyr-WOCRoDl_k7_ZcKQaDuQGhmLiSfSifaQtlZvbyW1IihLS3oUBQhJuuczalxQidrA0MX7gUncTjPd2wob2YJHBxkyTfgOMYhyphenhyphen/s1600-r/icon_codepen-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a> <a title="pinterest" href="https://www.pinterest.com/myscript2010" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC0V3qwzJz_FGW4NcklUEa5Xu46EhMsZS0mRQAEei6ySTnleG3GrO-rQ53rwBv7pUTw7chKQ45WQB3wvikj7FnXeCHnoib0qKy_E6StPIdhZaYGY9OtUke3Am9a5bntPddfWGgQT_d8-ak/s1600-r/pinterest-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a><a title="Twitter" href="https://twitter.com/myscript2010s" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwWnvi_VZaCKzOM-QEbVutfN5aguT7kpohIeS3y7C4K_XyM2yJhQyqgo9JK7fSDQkP2AHBn3gC_OZKx2g7gcaAlagAq0zi79MkLw9iOD5mTJE6Box_CHC5sMkS_kEWVvrGMV4_GcjM-baU/s1600-r/twitter-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a>  </div>
</center>

<center>
<a href="https://sites.google.com/site/fileblogfor/code/Social-Net-Mys2010.css"title="Download Full Code">
<img src="http://s14.postimg.org/hp6it0d2p/download_button.png" name="e902" border="0" width="100" height="60" /></a>
</center>

<script>
  window.console = window.console || function(t) {};
</script>
<!-- setup our canvas element -->
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>
<script>
      // when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
// not supported in all browsers though and sometimes needs a prefix, so we need a shim
window.requestAnimFrame = ( function() {
 return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function( callback ) {
     window.setTimeout( callback, 1000 / 60 );
    };
})();

// now we will setup our basic variables for the demo
var canvas = document.getElementById( 'canvas' ),
  ctx = canvas.getContext( '2d' ),
  // full screen dimensions
  cw = window.innerWidth,
  ch = window.innerHeight,
  // firework collection
  fireworks = [],
  // particle collection
  particles = [],
  // starting hue
  hue = 120,
  // when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
  limiterTotal = 5,
  limiterTick = 0,
  // this will time the auto launches of fireworks, one launch per 80 loop ticks
  timerTotal = 80,
  timerTick = 0,
  mousedown = false,
  // mouse x coordinate,
  mx,
  // mouse y coordinate
  my;
 
// set canvas dimensions
canvas.width = cw;
canvas.height = ch;

// now we are going to setup our function placeholders for the entire demo

// get a random number within a range
function random( min, max ) {
 return Math.random() * ( max - min ) + min;
}

// calculate the distance between two points
function calculateDistance( p1x, p1y, p2x, p2y ) {
 var xDistance = p1x - p2x,
   yDistance = p1y - p2y;
 return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}

// create firework
function Firework( sx, sy, tx, ty ) {
 // actual coordinates
 this.x = sx;
 this.y = sy;
 // starting coordinates
 this.sx = sx;
 this.sy = sy;
 // target coordinates
 this.tx = tx;
 this.ty = ty;
 // distance from starting point to target
 this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
 this.distanceTraveled = 0;
 // track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
 this.coordinates = [];
 this.coordinateCount = 3;
 // populate initial coordinate collection with the current coordinates
 while( this.coordinateCount-- ) {
  this.coordinates.push( [ this.x, this.y ] );
 }
 this.angle = Math.atan2( ty - sy, tx - sx );
 this.speed = 2;
 this.acceleration = 1.05;
 this.brightness = random( 50, 70 );
 // circle target indicator radius
 this.targetRadius = 1;
}

// update firework
Firework.prototype.update = function( index ) {
 // remove last item in coordinates array
 this.coordinates.pop();
 // add current coordinates to the start of the array
 this.coordinates.unshift( [ this.x, this.y ] );

 // cycle the circle target indicator radius
 if( this.targetRadius < 8 ) {
  this.targetRadius += 0.3;
 } else {
  this.targetRadius = 1;
 }

 // speed up the firework
 this.speed *= this.acceleration;

 // get the current velocities based on angle and speed
 var vx = Math.cos( this.angle ) * this.speed,
   vy = Math.sin( this.angle ) * this.speed;
 // how far will the firework have traveled with velocities applied?
 this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );

 // if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
 if( this.distanceTraveled >= this.distanceToTarget ) {
  createParticles( this.tx, this.ty );
  // remove the firework, use the index passed into the update function to determine which to remove
  fireworks.splice( index, 1 );
 } else {
  // target not reached, keep traveling
  this.x += vx;
  this.y += vy;
 }
}

// draw firework
Firework.prototype.draw = function() {
 ctx.beginPath();
 // move to the last tracked coordinate in the set, then draw a line to the current x and y
 ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
 ctx.lineTo( this.x, this.y );
 ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
 ctx.stroke();

 ctx.beginPath();
 // draw the target for this firework with a pulsing circle
 ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
 ctx.stroke();
}

// create particle
function Particle( x, y ) {
 this.x = x;
 this.y = y;
 // track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
 this.coordinates = [];
 this.coordinateCount = 5;
 while( this.coordinateCount-- ) {
  this.coordinates.push( [ this.x, this.y ] );
 }
 // set a random angle in all possible directions, in radians
 this.angle = random( 0, Math.PI * 2 );
 this.speed = random( 1, 10 );
 // friction will slow the particle down
 this.friction = 0.95;
 // gravity will be applied and pull the particle down
 this.gravity = 1;
 // set the hue to a random number +-50 of the overall hue variable
 this.hue = random( hue - 50, hue + 50 );
 this.brightness = random( 50, 80 );
 this.alpha = 1;
 // set how fast the particle fades out
 this.decay = random( 0.015, 0.03 );
}

// update particle
Particle.prototype.update = function( index ) {
 // remove last item in coordinates array
 this.coordinates.pop();
 // add current coordinates to the start of the array
 this.coordinates.unshift( [ this.x, this.y ] );
 // slow down the particle
 this.speed *= this.friction;
 // apply velocity
 this.x += Math.cos( this.angle ) * this.speed;
 this.y += Math.sin( this.angle ) * this.speed + this.gravity;
 // fade out the particle
 this.alpha -= this.decay;

 // remove the particle once the alpha is low enough, based on the passed in index
 if( this.alpha <= this.decay ) {
  particles.splice( index, 1 );
 }
}

// draw particle
Particle.prototype.draw = function() {
 ctx. beginPath();
 // move to the last tracked coordinates in the set, then draw a line to the current x and y
 ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
 ctx.lineTo( this.x, this.y );
 ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
 ctx.stroke();
}

// create particle group/explosion
function createParticles( x, y ) {
 // increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
 var particleCount = 30;
 while( particleCount-- ) {
  particles.push( new Particle( x, y ) );
 }
}

// main demo loop
function loop() {
 // this function will run endlessly with requestAnimationFrame
 requestAnimFrame( loop );

 // increase the hue to get different colored fireworks over time
 //hue += 0.5;
 
  // create random color
  hue= random(0, 360 );

 // normally, clearRect() would be used to clear the canvas
 // we want to create a trailing effect though
 // setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
 ctx.globalCompositeOperation = 'destination-out';
 // decrease the alpha property to create more prominent trails
 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 ctx.fillRect( 0, 0, cw, ch );
 // change the composite operation back to our main mode
 // lighter creates bright highlight points as the fireworks and particles overlap each other
 ctx.globalCompositeOperation = 'lighter';

 // loop over each firework, draw it, update it
 var i = fireworks.length;
 while( i-- ) {
  fireworks[ i ].draw();
  fireworks[ i ].update( i );
 }

 // loop over each particle, draw it, update it
 var i = particles.length;
 while( i-- ) {
  particles[ i ].draw();
  particles[ i ].update( i );
 }

 // launch fireworks automatically to random coordinates, when the mouse isn't down
 if( timerTick >= timerTotal ) {
  if( !mousedown ) {
   // start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
   fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
   timerTick = 0;
  }
 } else {
  timerTick++;
 }

 // limit the rate at which fireworks get launched when mouse is down
 if( limiterTick >= limiterTotal ) {
  if( mousedown ) {
   // start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
   fireworks.push( new Firework( cw / 2, ch, mx, my ) );
   limiterTick = 0;
  }
 } else {
  limiterTick++;
 }
}

// mouse event bindings
// update the mouse coordinates on mousemove
canvas.addEventListener( 'mousemove', function( e ) {
 mx = e.pageX - canvas.offsetLeft;
 my = e.pageY - canvas.offsetTop;
});

// toggle mousedown state and prevent canvas from being selected
canvas.addEventListener( 'mousedown', function( e ) {
 e.preventDefault();
 mousedown = true;
});

canvas.addEventListener( 'mouseup', function( e ) {
 e.preventDefault();
 mousedown = false;
});

// once the window loads, we are ready for some fireworks!
window.onload = loop;
  
    </script>

Penjelasan :
Ganti background gambar, teks dan link title sesuai keinginan

Edited by. Mys2010 on Codepen
Buttons by. Kevadamson on Codepen
Firework by. Chuong Dang on Codepen

DEMOSHOW

Css Card Animated Rotate

Memasang kode
Css Card Animated Rotate
Untuk menerapkan kode tersebut Langkah awal 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 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

<style class="mys2010-styles">

/*Background*/
body {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcXlEOZXHol04QYEwiqfh9U4f5R4u_yrq3E788_Vx1yMQWZwyhIANS5rlJz1B0UfhIxh8CeLUMxQEbVEsBJnLH7Wva_QH9mtnRjuQoRL7zILNdECYGNRiqcEBbrBEngnp9mtJ176Cn6E9/s1600-r/black-gradient-mys2010.png);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:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #333;
  border-bottom: 2px solid #A10048;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
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;
color: #fof;
background: #333;
border-top: 2px solid #A10048;
z-index: 9999;
}/* GRADIEND END */

/* CARD */
.card {
  margin: 0 auto;
  background-color: #444;
  width: 700px;
  height: 340px;
  border: 15px double #333;
}
.head_shot {
  margin-top:  30px;
}
.head_shot img {
  height: 125px;
  border: 2px solid #333;
  border-radius: 100%;
  display: block;
  margin: 0 auto;
}
h2 {
  font-family: 'Clicker Script', cursive;
  font-size: 30px;
  color: #2F2933;
  text-align: center;
  margin: 0;
}
.line {
  border-top: 1px solid #FF0000;
  max-width: 500px;
  margin: 0 auto;
  margin-top: 0px;
}
.card {
  opacity: 0;
    -webkit-animation: fade-in 3s ease-in 1;
    -moz-animation: fade-in 3s ease-in 1;
    -o-animation: fade-in 3s ease-in 1;
    animation: fade-in 3s ease-in 1;
}
@-webkit-keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.card {
  opacity: 1;
}
.fade {
  opacity:0.7;
  transition: opacity 2s ease;
}

.fade:hover {
  opacity:1;
}
.rotate {
  display: inline-block;
}

.rotate:hover {
  cursor: none;
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}
.text_scroll p {
  font-family: 'Gruppo', cursive;
  height: 20px;
  float: left;
  white-space: nowrap;
  position: relative;
  font-size: 55px;
  color: #2F2933;
  font-weight: bold;
  margin-top:  0px;
}
.text_scroll {
  max-height: 50px;
  max-width: 700px;
  margin: 0 auto;
  padding-left: 10px;
  float: left;
}
.scrolling_words {
  overflow: hidden;
  position: relative;
  height: 50px;
  padding-left: 10px;
  margin-top: 78px;
}
.scrolling_words  p {
  font-family: 'Gruppo', cursive;
  margin: 0 0 26px;
  color: #2F2933;
  position: relative;
  white-space: nowrap;
  -webkit-animation: move 8s 1s infinite;
  -moz-animation: move 8s 1s infinite;
  -o-animation: move 8s 1s infinite;
  animation: move 8s 1s infinite;
  font-size: 50px;
  letter-spacing: 2px;
}
@-webkit-keyframes move {
  0%  { top:  0px; }
  20% { top: -45px; }
  40% { top: -90px; }
  60% { top: -175px; }
  60% { top: -140px; }
  80% { top: -0px; }
  80% { top: -0px; }
}
.octocat {
  clear: both;
}
.octocat img {
  height: 50px;
}
.octocat {
  width: 50px;
  display: block;
  margin:  5px 0 0  5px;
  padding-top:0px;
}
.grow:hover {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  transition-duration: 1s;
}

/*rotate*/
#social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>

<div class="card">
<div class="head_shot">
<img src="http://1.bp.blogspot.com/-9iaLkuIma-I/Vug88ZGpdJI/AAAAAAAAY7w/rK2tpG6AU4MiZHIw1zGZkO-5IgtiOtoCw/s1600-r/Logo-mys2010.png"alt="Head Shot"/ class="fade"></div>
<div class="name">
<h2><a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Visit Mys2010">Myscript<div class="rotate">
2010</div>
</h2>
</div>
<div class="line">
</div>

<center>
<div id="social">
<a title="Facebook" href="https://www.facebook.com/learn.editing.myscript2010" target="_blank">  <img src="http://3.bp.blogspot.com/-8ITKvl307W8/Vqi0VWVfyuI/AAAAAAAAX0Y/5iC8VAlOY2o/s1600-r/facebook-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/><a title="JsFidle-Mys2010" href="https://jsfiddle.net/user/dashboard/"target="_blank"><img src="http://4.bp.blogspot.com/-r_OIWTWapEc/VulOJwqVEpI/AAAAAAAAY-g/pfsJj1z6xY8qWe5jwV6XzKxMhRh_GzN5A/s1600-r/Js-myscript2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a><a title="Mys2010 Github" href="https://gist.github.com/Myscript2010" target="_blank"> <img src="http://3.bp.blogspot.com/-jXuDkG-oca8/Vqi2odTTKPI/AAAAAAAAX2E/ojJ2ZQBueq8/s1600-r/github-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a> <a title="Mys2010 on Codepen" href="http://codepen.io/Myscript2010/pen/vGyMaW" target="_blank"> <img src="http://4.bp.blogspot.com/-gaxSIfw2m9U/Vuk04Ubv5rI/AAAAAAAAY9g/C0ZIFTttiuAGWuQoRhviJIzAEkN6wGN1A/s1600-r/icon_codepen-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a> <a title="Twitter" href="https://twitter.com/myscript2010s" target="_blank"> <img src="http://1.bp.blogspot.com/-k1_c-TEOOWE/Vqi0wCBSzLI/AAAAAAAAX1g/rdrWa0OVUAM/s1600-r/twitter-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a> </div>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="M 2010 Hover">
<font size="2" color="green"face="Agency FB"><b>EDITED BY. MYSCRIPT2010</b> </a>

<header>
<div class="Top Title Header">
<div align="center">
<a href="http://codepen.io/raveve/pen/gbgWGm" target="_blank" title="Raven Askew on Codepen"><font size="2" color="green"face="Agency FB"><b>SOURCES BY. RAVEN ASKEW</b></a>
</div>
</header>

<link rel="stylesheet" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Clicker+Script|Gruppo' rel='stylesheet' type='text/css'>

Penjelasan :
Ganti link title, teks serta link gambar sesuai keinginan

Edited by. Mys2010 on Codepen
Sources by. Raven Askew on Codepen

DEMOSHOW

Animated Cube Slider

Memasang kode Animated Cube Slider
Untuk menerapkan kode tersebut Langkah awal 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 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

*{    margin:0px;
 padding:0px;}
body
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhel8gRjfvpIYMEcACObTfwn1Oj9Rt5vO3HYRNeMmd0_RHsAaLkw9JPxBn9BunEYhqy-Og_VQrsS50InyBFXvmScVIellEC3DtJts8GrCSLN-QwiRCbmhavqDqWE9NQmKYwniah35owb14/s1600-r/Triplek-mys2010s.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;
 }

/* HEADER*/
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: green;
  border-bottom: 3px solid #dad;
}

/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 50px;
margin: auto;
font-agency fb: Arial, sans-serif;
font-size: 17px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fff;
background: #333;
border-top: 2px solid #f0f;
z-index: 9999;
}

.title {
  text-align: center;
  margin: 40px;
}

 .title h1, .title p {
   margin: 0;
 }

.slider {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 width: 200px;
 height: 200px;
  margin: auto;
 -webkit-perspective: 600px;
         perspective: 600px;
}

 .slider * {
  -webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
          transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
 }

 .container {
  width: inherit;
  height: inherit;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg) rotateX(0deg);
          transform: rotateY(0deg) rotateX(0deg);
 }

  .slide, .slide:after, .slide:before {
   display: block;
   width: inherit;
   height: inherit;
   background: url('#');
   position: absolute;
   -webkit-transform-style: preserve-3d;
           transform-style: preserve-3d;
   background-size: cover;
   background-position: center;
  }

  .slide.x {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }

   .slide.x:after {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTv3FJcLqB2X-M0cv5HijKiVioWfAq0IWFZwMtJGiN3TAmOOWj2ZT_tsJA4TInC64J6XVbR74-KoM8mHyuD8gC7dSaXi-vq_iB83rhTxFlWgWh_cyws955h91S3YpGBvQKFjQQA6JTBmw/s1600-r/yayang7.jpg');
    -webkit-transform: translateZ(100px) rotateZ(-90deg);
            transform: translateZ(100px) rotateZ(-90deg);
   }

   .slide.x:before {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMZbmlA-aG5FFLSA4h4WYBApHv_9ysYAwaz360n3HpFKyeTxEYjAjizvJsRZzPYkrXgVnz-u0Yw_-vxtGaFGbV9gOEEGynwe-3LJ1ZVSwldYEYRJ21Y6gTPR3Y5Kbrb118PvEg65c66vU/s1600-r/yayang6.jpg');
    -webkit-transform: translateZ(-100px) rotateZ(-90deg);
            transform: translateZ(-100px) rotateZ(-90deg);
   }

  .slide.y {
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }

   .slide.y:after {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP5_WJ_KzK5wjpa5lHo0QhJqqqOlP-N2_bRJUWTgeKYb5_W-kRbo6bJOiYF3fn0KbU8661ltYv_8Xpq9DrfZ0MCW-ZW3jdMdNgRqapde3GIciVi7HiW-4SxKpJtwxsz50uyAipBcZMCSY/s1600-r/yayang5.jpg');
    -webkit-transform: translateZ(100px) scale(-1);
            transform: translateZ(100px) scale(-1);
   }

   .slide.y:before {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Z-eoplWNyRVj7NGC2E1UTeSCg5c7n-qFiGmtttq4PRv7aC-XvJKTo0uhiiX0H1RNPWw1lPO-Zml-Dxa3I8uif4p6BXqJQEqc4th_RS49RvbxCgREcm-OMoX2hKQ5C81I-QSmkKGAN0c/s1600-r/yayang3.jpg');
    -webkit-transform: translateZ(-100px);
            transform: translateZ(-100px);
   }

  .slide.z {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }

   .slide.z:after {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Z-eoplWNyRVj7NGC2E1UTeSCg5c7n-qFiGmtttq4PRv7aC-XvJKTo0uhiiX0H1RNPWw1lPO-Zml-Dxa3I8uif4p6BXqJQEqc4th_RS49RvbxCgREcm-OMoX2hKQ5C81I-QSmkKGAN0c/s1600-r/yayang3.jpg');
    -webkit-transform: translateZ(100px);
            transform: translateZ(100px);
   }

   .slide.z:before {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD5a4VGOWPaV4lg0GDkh27ak73E5J0PyjqAw9ArbJoe8iN1UKLHi3HElm08ud2eZQoYNSUDhZyTrkVOBSJqxs5_aY6cN3sqMsl1ad_kowX32AdjMrfw_2pgx3ujqmPvQCRQZTcvLKiPss/s1600-r/yayang1.jpg');
    -webkit-transform: translateZ(-100px);
            transform: translateZ(-100px);
   }


  .container {
   -webkit-animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
   animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
  }

  @-webkit-keyframes rotate {
   0%, 10% {-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);}
   15%, 20% {-webkit-transform: rotateY(180deg) rotateX(0deg);transform: rotateY(180deg) rotateX(0deg);}
   25%, 35% {-webkit-transform: rotateY(180deg) rotateX(270deg);transform: rotateY(180deg) rotateX(270deg);}
   40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);transform: rotateY(180deg) rotateX(90deg);}
   55%, 65% {-webkit-transform: rotateY(-90deg) rotateX(90deg);transform: rotateY(-90deg) rotateX(90deg);}
   70%, 80% {-webkit-transform: rotateY(90deg) rotateX(90deg);transform: rotateY(90deg) rotateX(90deg);}
   90%, 95% {-webkit-transform: rotateY(0deg) rotateX(90deg);transform: rotateY(0deg) rotateX(90deg);}
  }

  @keyframes rotate {
   0%, 10% {-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);}
   15%, 20% {-webkit-transform: rotateY(180deg) rotateX(0deg);transform: rotateY(180deg) rotateX(0deg);}
   25%, 35% {-webkit-transform: rotateY(180deg) rotateX(270deg);transform: rotateY(180deg) rotateX(270deg);}
   40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);transform: rotateY(180deg) rotateX(90deg);}
   55%, 65% {-webkit-transform: rotateY(-90deg) rotateX(90deg);transform: rotateY(-90deg) rotateX(90deg);}
   70%, 80% {-webkit-transform: rotateY(90deg) rotateX(90deg);transform: rotateY(90deg) rotateX(90deg);}
   90%, 95% {-webkit-transform: rotateY(0deg) rotateX(90deg);transform: rotateY(0deg) rotateX(90deg);}
  }


.shadow {
 display: block;
 width: 200px;
 height: 200px;
 background: rgba(0,0,0,0.75);
 position: absolute;
 top: 60%;
 -webkit-transform: rotateX(90deg);
         transform: rotateX(90deg);
 z-index: -1;
 -webkit-filter: blur(20px);
 filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><fegaussianblur stdDeviation="20" /></filter></svg>#filter');
 -webkit-filter: blur(20px);
         filter: blur(20px);
 left: 0;
 right: 0;
 margin: auto;
 -webkit-animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
 animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
}

 @-webkit-keyframes rotateShadow {
  0%, 10% {-webkit-transform: rotateY(0deg) rotateX(90deg);}
  15%, 20% {-webkit-transform: rotateY(180deg) rotateX(90deg);;}
  20.1%, 20.9% {-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(5px);}
  25%, 35% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
  35.1%, 35.9% {-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(-5px);}
  40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
  55%, 65% {-webkit-transform: rotateY(0deg) rotateX(90deg);}
  70%, 80% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
  90%, 99% {-webkit-transform: rotateY(90deg) rotateX(90deg);}
  99.1%, 99.9% {-webkit-transform: rotateY(90deg) rotateX(90deg) translatez(-5px);}
 }

 /*@keyframes rotateShadow {
  0%, 10% {transform: rotateY(0deg) rotateX(90deg);}
  15%, 20% {transform: rotateY(180deg) rotateX(90deg); opacity: 1; filter: alpha(opacity=100);}
  20.1%, 20.9% {transform: rotateY(180deg) rotateX(90deg) translatez(10px); opacity: 0.95; filter: alpha(opacity=95);}
  25%, 35% {transform: rotateY(180deg) rotateX(90deg); opacity: 1; filter: alpha(opacity=100);}
  35.1%, 35.9% {transform: rotateY(180deg) rotateX(90deg) translatez(-10px); opacity: 0.95; filter: alpha(opacity=95);}
  40%, 50% {transform: rotateY(180deg) rotateX(90deg);}
  55%, 65% {transform: rotateY(0deg) rotateX(90deg);}
  70%, 80% {transform: rotateY(180deg) rotateX(90deg);}
  90%, 99% {transform: rotateY(0deg) rotateX(90deg);}
  99.1%, 99.9% {transform: rotateY(180deg) rotateX(90deg) translatez(5px); opacity: 0.95; filter: alpha(opacity=95);}
 }*/

/*
Credit */

 .credit {
  position: fixed;
  bottom: 22px;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  text-align: center;
 }
 .credit a {
  font-weight: 900;
  color: blue;
  text-decoration: none;
  -webkit-transition: all .15s linear;
          transition: all .15s linear;
  background: url(#)no-repeat right;
  background-size: 12px;
  padding-right: 20px !important;
  -filter: invert(1);
  -webkit-filter: invert(1);
  -moz--filter: invert(1);
 -o--filter: invert(1);
 }
 .credit a:hover {
  color: tomato;
 }

<div class="title">
<h1>
<a href="http://codepen.io/Myscript2010/full/qZqqxy/" target="_blank" title="Slider Mys2010 on Codepen">
Animated Cube Slider</h1>
</a>
<p>
CSS Only</p>
</div>
<div class="slider">
<div class="container">
<div class="slide x">
</div>
<div class="slide y">
</div>
<div class="slide z">
</div>
</div>
<div class="shadow">
</div>
</div>
<p class="credit">

<header>
<div class="Top Title Header">
<div align="center">
<font size="3" color="aqua"face="agency fb">Sources by. <a href="http://codepen.io/hrtzt/pen/JdYaEZ" target="_blank" title="Slider on Codepen"><font size="3" color="white"face="agency fb">Alberto Hartzet </a></font> on Codepen </a>
</div>
</header>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>Edited by <span><a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html"target="_blank" title="Hover Mys2010">Myscript2010s</a></span></p>

Penjelsan :
Ganti Link Gambar dan Link Title sesuai keinginan

Edited by. Mys2010 on Codepen
Sources by. Alberto Hartzet on Codepen

DEMOSHOW

Dark UI Elements

Memasang kode Dark UI Elements 
Untuk menerapkan kode tersebut Langkah awal 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 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

/*Dark Ui elements */

@import url("http://fonts.googleapis.com/css?family=Lobster");
@import url(http://fonts.googleapis.com/css?family=Lobster);
@font-face {
  font-family: 'ModernPictogramsNormal';
  src: url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.eot");
  src: url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.eot?#iefix") format("embedded-opentype"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.woff") format("woff"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.ttf") format("truetype"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.svg#ModernPictogramsNormal") format("svg");
  font-weight: normal;
  font-style: normal;
}
body {#);color:red;height:100%;overflow:hidden;}
body {
  margin: 0;
  padding: 0;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGBQiRS9V6581fHrVfGb-ApF9Lt6utiXjcaosk6_BpT7SdE-G46BYCDYiqiQhYRV8zHCjF9aXrkrVMq_EMtwSusCfmy8L0WzeTZy3dhJO8cpSnFgyTU8KaYtMW_ExGA0x3P_nmy_QLJvgR/s1600-r/bg-mys2010.jpg") repeat;
  padding: 10px;
}

a, input[type='radio'] + label {
  text-align: center;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

fieldset {
  border: 1px solid #2223;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  margin: 20px 0 0 0;
  min-height: 90px;
  line-height: 90px;
  position: relative;
  float: left;
  margin-right: 20px;
  padding: 20px;
}


input[type='radio'] {
  display: none;
}

/* -------------------
    Default State
-------------------- */
a.glowBtn, input[type='radio'] + label {
  z-index: 10;
  margin: 0 10px 10px 0;
  width: 115.5px;
  height: 37.29px;
  line-height: 36.3px;
  position: relative;
  font-size: 13.2px;
  letter-spacing: .1em;
  color: #0e0e0e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: bold;
  background-image: url('');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(100%, #000000));
  background-image: -moz-linear-gradient(#111111, #000000);
  background-image: -webkit-linear-gradient(#111111, #000000);
  background-image: linear-gradient(#111111, #000000);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
}

a.glowBtn:after, input[type='radio'] + label:after {
  z-index: -1;
  content: '';
  cursor: pointer;
  top: 1.98px;
  margin-left: 50%;
  left: -55px;
  width: 110px;
  height: 33px;
  display: block;
  position: absolute;
  background-image: url('');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #444444), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#444444, #373738);
  background-image: -webkit-linear-gradient(#444444, #373738);
  background-image: linear-gradient(#444444, #373738);
  -moz-box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

/* -------------------
    Hover States
-------------------- */
a.glowBtn:hover, a.hover, input[type='radio'] + label:hover {
  color: #AEAEAE;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

a.glowBtn:hover:after, a.hover:after, input[type='radio'] + label:hover:after {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM3MzczOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #545454), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#545454, #373738);
  background-image: -webkit-linear-gradient(#545454, #373738);
  background-image: linear-gradient(#545454, #373738);
}

/* -------------------
    Active States
-------------------- */
a.glowBtn:active, a.active, a.active:hover, input[type='radio']:checked + label {
  color: #00ccff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0px 30px rgba(0, 255, 255, 0.7);
  -moz-box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
  -webkit-box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
  box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
}

a.glowBtn:active, a.active, a.active:hover {
  text-shadow: 0 -1px 0 black, 0 0px 30px cyan, 0 0px 50px cyan;
}

a.glowBtn:active:after, a.active:after, a.active:hover:after, input[type='radio']:checked + label:after {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI2MjYyNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJkMmQyZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #262627), color-stop(100%, #2d2d2e));
  background-image: -moz-linear-gradient(#262627, #2d2d2e);
  background-image: -webkit-linear-gradient(#262627, #2d2d2e);
  background-image: linear-gradient(#262627, #2d2d2e);
  -moz-box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  -webkit-box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
}

/* -------------------
    Radio Specific Style
-------------------- */
input[type='radio'] + label {
  font-family: 'ModernPictogramsNormal', Arial, sans-serif;
  font-size: 36.66667px;
  line-height: 55px;
  letter-spacing: 0;
  width: 55px;
  height: 55px;
}

input[type='radio'] + label:after {
  top: 2.64px;
  left: -25px;
  width: 50px;
  height: 50px;
}

/* -------------------
    SuperBtn
-------------------- */
a.superBtn {
  color: #0e0e0e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: bold;
  letter-spacing: .08em;
  width: 242px;
  height: 39.6px;
  line-height: 39.6px;
  position: relative;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlMzUzNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQyNDc0OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2e3537), color-stop(100%, #424748));
  background-image: -moz-linear-gradient(#2e3537, #424748);
  background-image: -webkit-linear-gradient(#2e3537, #424748);
  background-image: linear-gradient(#2e3537, #424748);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
}

a.superBtn:after {
  width: 253px;
  height: 49.5px;
  top: -4.95px;
  margin-left: 50%;
  left: -126.5px;
  content: '';
  display: block;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhZjFmYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE3YjJlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2af1fc), color-stop(100%, #17b2e6));
  background-image: -moz-linear-gradient(#2af1fc, #17b2e6);
  background-image: -webkit-linear-gradient(#2af1fc, #17b2e6);
  background-image: linear-gradient(#2af1fc, #17b2e6);
  -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: -1;
}

/* -------------------
    SuperBtn Hover
-------------------- */
a.superBtn:hover {
  color: #AEAEAE;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM3MzczOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #545454), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#545454, #373738);
  background-image: -webkit-linear-gradient(#545454, #373738);
  background-image: linear-gradient(#545454, #373738);
}

a.superBtn:hover:after {
  -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
  -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
}

a.superBtn:active {
  color: #00ccff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0px 30px rgba(0, 255, 255, 0.7);
  background: #333;
  -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
}

/* HIDE */
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:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #444;
  border-bottom: 3px solid #dad;
}


/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 11px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fof;
background: #333;
border-top: 2px solid #A10048;
z-index: 9999;
}
/* GRADIEND END */

<fieldset>
<a class="glowBtn" href="http://Link Title" target="_blank" title="Mys2010"><span style="color: red; font-size: 10pt;">M-2010
</span></a><span style="color: red; font-size: 10pt;"><a class="glowBtn" href="http://Link Title/" target="_blank" title="M-Hover"><span style="color: red; font-size: 10pt;">M-HOVER</span></a>
<a class="glowBtn active" href="http://Link Demoshow " title="Dark UI Elements"><span style="color: magenta; font-size: 10pt;">SLIDE AUTO
</span></a><span style="color: magenta; font-size: 10pt;"><a class="glowBtn active" href="http://Link Download" title="Download Slide  "><span style="color: magenta; font-size: 10pt;">DOWNLOAD  </span></a>
<a class="glowBtn active" href="http://Link Demoshow" title="Slider UI Elements">SLIDE AUTO
</a><a class="glowBtn active" href="http://Link Download" title="Download Slide 2">DOWNLOAD</a>
<a class="glowBtn" href="http://Link Title" target="_blank" title="Mys2010">GITHUB
</a><a class="glowBtn" href="http://Link Title" target="_blank" title="M-Hover">CODEPEN</a>
</span></span></fieldset>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="http://Link Title" target="_blank" title="Animated Cube">
Your Title </a>

<header>
<div class="Top Title Header">
<div align="center">
<span style="color: green; font-family: Agency FB; font-size: x-small;"> <a href="http://Link Title" target="_blank" title="Dark UI Elements">Your Title </a>
</span></div>
</div>
</header></div>
</div>

Penjelasan : Edit Code yang diberi warna

Edited by. Mys2010 on Codepen
Sources by. Pfalzgraf Gyula on Codepen

DEMOSHOW Cube Slider

DEMOSHOW Dark UI Elements