Digital Clock

Memasang Kode Digital Clock
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
  top: -29px;
  width: 100%;
  height: 57px;
text-align: center;
font-size:8px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%,rgb(0,0,128) 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
} 

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:#24006B;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}

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

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

html,
body {
  height: 100%;
  background-color: #000;
}
.screen {
  width: 100%;
  height: 100%;
  display: table;
}
.time-display {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
@media only screen and (max-width:3839px) {
  .digit:not(:last-of-type) {
    margin-right: 31.5px;
  }
  .digit {
    width: 192px;
    height: 378px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 150px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 150px;
    height: 21px;
  }
  .digit .vertical {
    width: 21px;
    height: 157.5px;
  }
  .digit .a {
    top: 0;
    left: 21px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -11px;
    border-left: 11px solid #000;
    border-right: 11px solid transparent;
    border-bottom: 21px solid #000;
  }
  .digit .a:after {
    right: -11px;
    border-right: 11px solid #000;
    border-left: 11px solid transparent;
    border-bottom: 21px solid #000;
  }
  .digit .b {
    top: 21px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-left: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .b:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-left: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .c {
    top: 199.5px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-left: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .c:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-left: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 21px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -11px;
    border-left: 11px solid #000;
    border-right: 11px solid transparent;
    border-top: 21px solid #000;
  }
  .digit .d:after {
    right: -11px;
    border-right: 11px solid #000;
    border-left: 11px solid transparent;
    border-top: 21px solid #000;
  }
  .digit .e {
    top: 199.5px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-right: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .e:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-right: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .f {
    top: 21px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -11px;
    border-bottom: 11px solid transparent;
    border-right: 21px solid #000;
    border-top: 11px solid #000;
  }
  .digit .f:after {
    bottom: -11px;
    border-top: 11px solid transparent;
    border-right: 21px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .g {
    top: 178.5px;
    left: 21px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 11px solid transparent;
    border-top: 11px solid #000;
    border-bottom: 11px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 11px solid transparent;
    border-top: 11px solid #000;
    border-bottom: 11px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 21px;
    height: 378px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 42px;
  }
  .separator .dot {
    background: #071205;
    width: 21px;
    height: 21px;
    border-radius: 21px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:1519px) {
  .digit:not(:last-of-type) {
    margin-right: 27px;
  }
  .digit {
    width: 156px;
    height: 306px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 120px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 120px;
    height: 18px;
  }
  .digit .vertical {
    width: 18px;
    height: 126px;
  }
  .digit .a {
    top: 0;
    left: 18px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -9px;
    border-left: 9px solid #000;
    border-right: 9px solid transparent;
    border-bottom: 18px solid #000;
  }
  .digit .a:after {
    right: -9px;
    border-right: 9px solid #000;
    border-left: 9px solid transparent;
    border-bottom: 18px solid #000;
  }
  .digit .b {
    top: 18px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-left: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .b:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-left: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .c {
    top: 162px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-left: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .c:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-left: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 18px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -9px;
    border-left: 9px solid #000;
    border-right: 9px solid transparent;
    border-top: 18px solid #000;
  }
  .digit .d:after {
    right: -9px;
    border-right: 9px solid #000;
    border-left: 9px solid transparent;
    border-top: 18px solid #000;
  }
  .digit .e {
    top: 162px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-right: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .e:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-right: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .f {
    top: 18px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -9px;
    border-bottom: 9px solid transparent;
    border-right: 18px solid #000;
    border-top: 9px solid #000;
  }
  .digit .f:after {
    bottom: -9px;
    border-top: 9px solid transparent;
    border-right: 18px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .g {
    top: 144px;
    left: 18px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 9px solid transparent;
    border-top: 9px solid #000;
    border-bottom: 9px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 9px solid transparent;
    border-top: 9px solid #000;
    border-bottom: 9px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 18px;
    height: 306px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 36px;
  }
  .separator .dot {
    background: #071205;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:1259px) {
  .digit:not(:last-of-type) {
    margin-right: 22.5px;
  }
  .digit {
    width: 110px;
    height: 205px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 80px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 80px;
    height: 15px;
  }
  .digit .vertical {
    width: 15px;
    height: 80px;
  }
  .digit .a {
    top: 0;
    left: 15px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -8px;
    border-left: 8px solid #000;
    border-right: 8px solid transparent;
    border-bottom: 15px solid #000;
  }
  .digit .a:after {
    right: -8px;
    border-right: 8px solid #000;
    border-left: 8px solid transparent;
    border-bottom: 15px solid #000;
  }
  .digit .b {
    top: 15px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .b:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-left: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .c {
    top: 110px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .c:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-left: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 15px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -8px;
    border-left: 8px solid #000;
    border-right: 8px solid transparent;
    border-top: 15px solid #000;
  }
  .digit .d:after {
    right: -8px;
    border-right: 8px solid #000;
    border-left: 8px solid transparent;
    border-top: 15px solid #000;
  }
  .digit .e {
    top: 110px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-right: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .e:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-right: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .f {
    top: 15px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -8px;
    border-bottom: 8px solid transparent;
    border-right: 15px solid #000;
    border-top: 8px solid #000;
  }
  .digit .f:after {
    bottom: -8px;
    border-top: 8px solid transparent;
    border-right: 15px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .g {
    top: 95px;
    left: 15px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 8px solid transparent;
    border-top: 8px solid #000;
    border-bottom: 8px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid #000;
    border-bottom: 8px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
  }
  .separator {
    width: 15px;
    height: 205px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 30px;
  }
  .separator .dot {
    background: #071205;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width:929px) {
  .digit:not(:last-of-type) {
    margin-right: 12px;
  }
  .digit {
    width: 56px;
    height: 104px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 40px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 40px;
    height: 8px;
  }
  .digit .vertical {
    width: 8px;
    height: 40px;
  }
  .digit .a {
    top: 0;
    left: 8px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -4px;
    border-left: 4px solid #000;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #000;
  }
  .digit .a:after {
    right: -4px;
    border-right: 4px solid #000;
    border-left: 4px solid transparent;
    border-bottom: 8px solid #000;
  }
  .digit .b {
    top: 8px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .b:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-left: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .c {
    top: 56px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .c:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-left: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 8px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -4px;
    border-left: 4px solid #000;
    border-right: 4px solid transparent;
    border-top: 8px solid #000;
  }
  .digit .d:after {
    right: -4px;
    border-right: 4px solid #000;
    border-left: 4px solid transparent;
    border-top: 8px solid #000;
  }
  .digit .e {
    top: 56px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-right: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .e:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-right: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .f {
    top: 8px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -4px;
    border-bottom: 4px solid transparent;
    border-right: 8px solid #000;
    border-top: 4px solid #000;
  }
  .digit .f:after {
    bottom: -4px;
    border-top: 4px solid transparent;
    border-right: 8px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .g {
    top: 48px;
    left: 8px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 4px solid transparent;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
    white-space: nowrap;
  }
  .separator {
    width: 8px;
    height: 104px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 16px;
    white-space: nowrap;
  }
  .separator .dot {
    background: #071205;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
@media only screen and (max-width: 500px) {
  .digit:not(:last-of-type) {
    margin-right: 6px;
  }
  .digit {
    width: 24px;
    height: 44px;
    display: block;
    position: relative;
    float: left;
  }
  .digit .segment {
    background: #071205;
    border-radius: 16px;
    position: absolute;
    z-index: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .digit .on {
    background: #328420;
  }
  .digit .horizontal {
    width: 16px;
    height: 4px;
  }
  .digit .vertical {
    width: 4px;
    height: 16px;
  }
  .digit .a {
    top: 0;
    left: 4px;
  }
  .digit .a:before,
  .digit .a:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .a:before {
    left: -2px;
    border-left: 2px solid #000;
    border-right: 2px solid transparent;
    border-bottom: 4px solid #000;
  }
  .digit .a:after {
    right: -2px;
    border-right: 2px solid #000;
    border-left: 2px solid transparent;
    border-bottom: 4px solid #000;
  }
  .digit .b {
    top: 4px;
    right: 0;
  }
  .digit .b:before,
  .digit .b:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .b:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-left: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .b:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-left: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .c {
    top: 24px;
    right: 0;
  }
  .digit .c:before,
  .digit .c:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .c:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-left: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .c:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-left: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .d {
    bottom: 0;
    left: 4px;
  }
  .digit .d:before,
  .digit .d:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .d:before {
    left: -2px;
    border-left: 2px solid #000;
    border-right: 2px solid transparent;
    border-top: 4px solid #000;
  }
  .digit .d:after {
    right: -2px;
    border-right: 2px solid #000;
    border-left: 2px solid transparent;
    border-top: 4px solid #000;
  }
  .digit .e {
    top: 24px;
    left: 0;
  }
  .digit .e:before,
  .digit .e:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .e:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-right: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .e:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-right: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .f {
    top: 4px;
    left: 0;
  }
  .digit .f:before,
  .digit .f:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
  }
  .digit .f:before {
    top: -2px;
    border-bottom: 2px solid transparent;
    border-right: 4px solid #000;
    border-top: 2px solid #000;
  }
  .digit .f:after {
    bottom: -2px;
    border-top: 2px solid transparent;
    border-right: 4px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .g {
    top: 20px;
    left: 4px;
  }
  .digit .g:before,
  .digit .g:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
  }
  .digit .g:before {
    left: 0;
    border-right: 2px solid transparent;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .digit .g:after {
    right: 0;
    border-left: 2px solid transparent;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .hours,
  .minutes,
  .seconds {
    display: inline-block;
    overflow: auto;
    text-align: center;
    white-space: nowrap;
  }
  .separator {
    width: 4px;
    height: 44px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0 8px;
    white-space: nowrap;
  }
  .separator .dot {
    background: #071205;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
  }
  .separator .dot.on {
    background: #328420;
  }
  .separator .dot:first-of-type {
    top: 33%;
  }
  .separator .dot:last-of-type {
    top: 66%;
  }
}
/*Material Card*/
.m-card {
  position: relative;
  overflow: hidden;
  margin: 3em auto 1em auto;
  padding: 1em;
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  max-width: 450px;
  z-index: 1;
}
.m-card:hover {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.m-card h1 {
  border-bottom: 1px solid #311b92;
}
.m-card h1 #because {
  font-size: 0.35em;
  text-align: center;
  display: block;
  margin-bottom: 0.5em;
  font-weight: 300;
}
.m-card #logo {
  max-width: 300px;
  margin: 0 auto;
  display: block;
}
.m-card h5 {
  margin: 0.5em 0 0.7em;
}
.m-card #file-upload-container {
  cursor: pointer;
  border: 3px dashed #311b92;
  display: block;
  width: 100%;
  height: 200px;
  border-radius: 25px;
  text-align: center;
}
.m-card #file-upload-container input {
  display: none;
}
.m-card #file-upload-container #add-symbol {
  display: block;
  margin: 0 auto;
  height: 70%;
  fill: #616161;
  max-width: 40px;
}
.m-card #file-upload-container #add-symbol:hover {
  fill: #311b92;
}
.m-card #file-upload-container #file-name {
  display: block;
  margin: 0 auto;
  color: #616161;
  max-width: 90%;
  word-break: break-all;
}
.m-card #file-upload-container .file-added {
  color: #212121 !important;
}
.m-card #file-upload-container:hover #add-symbol {
  fill: #311b92;
}
.m-card button {
  width: 100%;
  padding-top: 1.3em;
}
.m-card button #upload-symbol {
  fill: #311b92;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  max-width: 36px;
  max-height: 36px;
  display: inline;
  vertical-align: middle;
  margin-top: -4px;
}
.m-card button span {
  display: inline-block;
}
.m-card button:hover #upload-symbol {
  fill: #fff;
}
.m-card button:hover #upload-symbol #arrow {
  top: -12px;
}
.m-card button.disabled {
  pointer-events: none;
  cursor: default;
  color: #616161;
  border-color: #616161;
  background: #eeeeee;
}
.m-card button.disabled #upload-symbol {
  fill: #616161;
}
.m-card .how-to {
  display: block;
  text-align: center;
  width: 100%;
  margin-top: 1em;
  padding: 0.75em 0;
  font-weight: 300;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.m-card .how-to:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.m-card #how-to {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0!important;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 3;
  padding: 1em;
  display: none;
}
.m-card #how-to h3 {
  border-bottom: 1px solid #212121;
  padding-bottom: 0.25em;
}
.m-card #how-to #close {
  position: absolute;
  top: 1em;
  right: 1em;
}
.m-card #how-to #close #close-symbol {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  max-width: 20px;
  max-height: 20px;
  fill: #616161;
}
.m-card #how-to #close:hover #close-symbol {
  fill: #311b92;
}
.m-card .step {
  float: left;
  width: 100%;
}
.m-card .step img {
  max-width: 120px;
  display: block;
  float: left;
  margin-right: 0.5em;
  border: 1px solid #212121;
}
.m-card .step h6 {
  margin-bottom: 0.5em;
}
.m-card #upload-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 4;
  padding: 1em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.m-card #upload-animation h3 {
  margin-bottom: 0px;
}
.m-card #upload-animation.show {
  opacity: 1;
}</style> 

<div class="screen" id="app">
            <div class="time-display">
                <div class="hours">
                    <div class="digit h1">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                    <div class="digit h2">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                </div>
                <div class="separator">
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="minutes">
                    <div class="digit m1">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                    <div class="digit m2">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                </div>
                <div class="separator">
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="seconds">
                    <div class="digit s1">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                    <div class="digit s2">
                        <div class="segment horizontal a"></div>
                        <div class="segment vertical b"></div>
                        <div class="segment vertical c"></div>
                        <div class="segment horizontal d"></div>
                        <div class="segment vertical e"></div>
                        <div class="segment vertical f"></div>
                        <div class="segment horizontal g"></div>
                    </div>
                </div>
            </div>
        </div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://codepen.io/hello/" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/Island-Def-Love-Jones-M2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/digital-clock.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a> </div>
</header>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-ddaa1eeb67d762ab8aad46508017908c.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>
      var currentDate,
    currentHours,
    currentMinutes,
    currentSeconds;

var a = [2,3,5,6,7,8,9,0],
    b = [1,2,3,4,7,8,9,0],
    c = [1,3,4,5,6,7,8,9,0],
    d = [2,3,5,6,8,0],
    e = [6,8,2,0],
    f = [4,5,6,8,9,0],
    g = [2,3,4,5,6,8,9];
var constants = [ [2,3,5,6,7,8,9,0],[1,2,3,4,7,8,9,0],[1,3,4,5,6,7,8,9,0],[2,3,5,6,8,0],[6,8,2,0],[4,5,6,8,9,0],[2,3,4,5,6,8,9] ];
var hours = [],
    minutes = [],
    seconds = [];
var map = ['a','b','c','d','e','f'];
function updateDate(){
    currentDate = new Date();
    currentHours = currentDate.getHours();
    if (currentHours < 10){
        currentHours = '0' + currentHours;
    }
    currentMinutes = currentDate.getMinutes();
    if (currentMinutes < 10){
        currentMinutes = '0' + currentMinutes;
    }
    currentSeconds = currentDate.getSeconds();
    if (currentSeconds < 10){
        currentSeconds = '0' + currentSeconds;
    }
}
function splitDigits(stringVal,array){
    var tempString = stringVal.toString();
    array.length = 0
    for (var i = 0; i < tempString.length; i++) {
        array.push(+tempString.charAt(i));
    }
}
function checkVal(val,array){
    for (var k = 0; k < array.length; k++){
        if (val == array[k]){
            return true;
        }
    }
    return false;
}
function printDigits(array, elem){
    for (var count = 0; count < array.length; count++) {
        for (var segmentCount = 0; segmentCount < 7; segmentCount++){
            if ( checkVal(array[count], constants[segmentCount] ) == true){
                turnOn(elem+(count+1)+' div:nth-of-type('+(segmentCount+1)+')');
            } else {
                turnOff(elem+(count+1)+' div:nth-of-type('+(segmentCount+1)+')');
            }
        }
    };
}
function turnOn(elem){
    $(elem).addClass('on');
}
function turnOff(elem){
    $(elem).removeClass('on');   
}
$( document ).ready(function() {
    setInterval(function(){
         $('.dot').toggleClass('on');
    },1000);
    console.log( checkVal(7,constants[4]) );
    setInterval(function(){
        updateDate();
        splitDigits(currentSeconds,seconds);
        printDigits(seconds,'.s');
        splitDigits(currentMinutes,minutes);
        printDigits(minutes,'.m');
        splitDigits(currentHours,hours);
        printDigits(hours,'.h');
    },1000);

});
    </script>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script> 

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

Digital Clock code by. Maneesh
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here  Digital Clock Audio 

Category: Digital Clock

Farallax Text Scroll

Memasang kode Farallax Text Scroll 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

Parallax Step 1 - Link 1

 <style class="Mys2010-styles">
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: -15px;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
}

#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
}

#Wrapper {
  width: 100%;
  position: relative;
  display: block;
  text-align: center;
  height: 300vh;
  background: #fff;
  z-index: 98;
}
#Title{
  color: #fff;
  font-family: audiowide;
  text-align: left;
  display: inline-block;
  z-index: 2;
  position:fixed;
  top: 20%;
  left: 23%;
}
#Title h1{
  font-size: 8vw;
  margin-bottom: 0;
  padding-bottom: 0;
  opacity: 0;
}
#Title h3 {
  font-family: lato;
  font-weight: 100px;
  font-size: 3vw;
  margin-top: -0.5em;
  padding-top: 0;
  margin-left: 2px;
  opacity: 0;
}
#Title h3 span {
  font-size: 40px;
  margin-left: 3px;
  opacity: 0.7;
}
#surfingVideo {
  width: 100vw;
  height: auto;
  min-height: 100vh;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.pagar-1 {
   -webkit-animation: parallax_bg linear -20s infinite both;
           animation: parallax_bg linear -20s infinite both;
  background: url(http://www.fellowshipbbc.org/wp-content/uploads/2013/05/Semitransparent-red-background-20-percent-opacity.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-370px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 935px; 
}
</style>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://demoshow-mys2010.blogspot.co.id/2016/07/pemutar-videoe-text-scroll.html"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; PLAY - Mp4 </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/studiedingsongmp3/laguku/Capoeira-Paranaue-Mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>

<div id="mainWrapper">
<div class="row" id="Wrapper">
<video id="surfingVideo" width="1280" height="720" autoplay loop muted>
<source src="https://sites.google.com/site/code6916/file/Cibeber-Cimahi-M2010s.mp4" type="video/mp4">
</video>
<div id="Title">

<div id="butterfly">
<div id="butter1" class="butter">
<div class="butterFly1 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYDu2_nwIs7Mf5uVt-5FXf8StHrcDhOjVftC5fXM-xyvUHGQKevo-Fce8cDRBwxJQ5n5Zc-aiOGAX3wlB0ElD6Izq6HNSaoYo4Mun1LWHndPtQnpCKZ4FtzSXV4YxzQYi3EOtvQ3mt-CE/s1600/kupu-3-mys2010.png" alt="" /></div>
</div>
<div id="butter2" class="butter">
<div class="butterFly2 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYcIHGLveuhclVgXgQ3oTtkaByfp7fe9hI9WBpE1oduK0Cfi7hFrGXBdNiPkS7MoYAdBfUwT7OM6DIY4z6NuJFcKsA7_byxnwlJlK3LYU3oXn2W32uBeHqQDCGzib7w39mxpZ_mBTZ1lU/s1600/kupu-2-mys2010.png" alt="" /></div>
</div>
<div id="butter3" class="butter">
<div class="butterFly3 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhwTjGg1wpc47Ozb9pbvbZwTrXVomtaVwIm7p0Brd4fLrScxBpkRWVDpcO_11NzA1SSbBOeHLcIj2xro7Up6nQIpS3eeaxHh1f2i9yqGAa4YEvkLaYBy_ALSkZGIxU04I9GDnINceX4I/s1600/kupu-1-mys2010.png" alt="" /></div>
</div>
</div>
<link href="https://sites.google.com/site/usesitesto/file-code/kupu-kupu-mys2010.css " rel="stylesheet" type="text/css">

<h1>
<span style="color:blue">Parallax</h1>
<h3>
<span style="color:green">Edited by . Myscript2010</p>
<span>Learn Editing Script Cibeber Cimahi</span></h3>
</div>


<div class="parallax pagar-1">
<div style="position: fixed; bottom: 29px; right: 10px;width:100px;height:100px;">
<a href="https://sites.google.com/site/code6916/file/Cibeber-Cimahi-M2010s.mp4"><img border="0" src="https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png" title="Download Mp4" width="90" height="20"></a>   
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/farallax-text-scroll.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
</div>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>
<script src='https://sites.google.com/site/code6916/file/jQuery-Parallax-M2010.css'>
</script> 

<script>resizeDebounced = true;
resizeDebounceTime = 100;
resizeDebounce = null;
$(function () {
    resize();
    window.onscroll = function () {
        var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if (window.pageYOffset > h * 3) {
            $('#Wrapper').addClass('done');
            $('#surfingVideo')[0].pause();
        } else {
            $('#surfingVideo')[0].play();
            $('#Wrapper').removeClass('done');
            $('#Title h1').css({ opacity: Math.min(Math.linearConvert(h * 3 * 0.05, h * 3 * 0.5, 0, 1, pageYOffset), 1) });
            $('#Title h3').css({ opacity: Math.min(Math.linearConvert(h * 3 * 0.35, h * 3 * 0.5, 0, 1, pageYOffset), 1) });
        }
        var chap2IntroTop = $('#chap2Intro').offset().top;
        var chap2IntroBottom = chap2IntroTop + $('#chap2Intro').height();
        if (pageYOffset >= chap2IntroBottom || pageYOffset + h < chap2IntroTop) {
            $('#chap2Intro').addClass('offscreen');
        } else {
            $('#chap2Intro').removeClass('offscreen');
            var imgpos = Math.linearConvert(chap2IntroTop - h, chap2IntroBottom, -(w * 0.1), -(w * 0.3), pageYOffset);
            $('#chap2Intro img').css({ 'transform': 'translate3d(' + imgpos + 'px,0,0)' });
        }
        $('.fader, .interstitial').each(function (idx) {
            if ($(this).onScreen()) {
                $(this).addClass('visible');
            } else {
                $(this).removeClass('visible');
            }
        });
    };
});
window.onresize = function () {
    if (resizeDebounced) {
        resize();
    }
};
function resize() {
    resizeDebounced = false;
    try {
        clearTimeout(resizeDebounce);
    } catch (e) {
    }
    if ($(window).width() / $(window).height() < 1.777777777) {
        $('#mainWrapper').removeClass('landscape').addClass('portrait');
    } else {
        $('#mainWrapper').removeClass('portrait').addClass('landscape');
    }
    resizeDebounce = setTimeout(function () {
        resizeDebounced = true;
    }, resizeDebounceTime);
}
Math.linearConvert = function (oldMin, oldMax, newMin, newMax, oldValue) {
    return (oldValue - oldMin) * (newMax - newMin) / (oldMax - oldMin) + newMin;
};
$.fn.onScreen = function () {
    var et = $(this).offset().top;
    var pb = window.pageYOffset + $(window).height();
    return pb > et + 50;
};

</script>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script> 

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

Lihat Step 1 pada link 1 
DISPLAYS

If you want to directly copy  and  paste you canDownload Here  Farallax Text Scroll 

Step 2 link 2 Pemutar Video 
SEE THE CODE

Source code by. All Sources
Design code is edited by. Mys2010 In Codepen

Category: Farallax Text Scroll

Walk Dragon

Memasang kode Walk Dragon 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

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;} 
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: -6px;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
} 
/*end*/ 
 html, body {
  margin-top: -80px;
  height: 98%
}
.animated {
  width: 100%;
  min-height: 700px;
  position: relative;
  top: 0;
  left: 0;
  background-color: #fff; 
}
.pagar-1 {
   -webkit-animation: parallax_bg linear 20s infinite both;
           animation: parallax_bg linear 20s infinite both;
  background: url(https://sites.google.com/site/code6916/file/transparent-M2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-99px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 835px; 
}
.bg-1 {
   -webkit-animation: parallax_bg linear -20s infinite both;
           animation: parallax_bg linear -20s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavBdAzF5Dy-BDs3DWQVDIGj6GHrZMyMYk4r7Kj-zykC3L6LzzkTMqUTIu1SFHAc1VLDgdzkO2IkkhoQIuxL3z4Mg8nBnT3PAjIk1Xh3J8c48dzOR4MGfF8bv4eMAjJP73mQ9CJqYBH-E/s1600/Cemara-3-Mys2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
   bottom:9px;
  left: 0;
  width: 100%;
  height: 90%;
  background-size: auto  150px; 
}
.bg-2 {
  -webkit-animation: parallax_bg linear -30s infinite both;
          animation: parallax_bg linear -30s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiVOpWMUoc0FFewRlX4_d9LzjJFq37pxD5KDv63Cjo9ssmklon4CY827gTI0_SigEUvO0NffZa96OagUeEjIEwQf45SXYUlTZFqK3pi4uuSgfpzLcEJrhPLLWgKtpP7_VwHaeErE13KE/s1600/palm-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-1px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 175px;
}
.bg-3 {
  -webkit-animation: parallax_bg linear -55s infinite both;
          animation: parallax_bg linear -55s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8PN9HQB0F7u32jAhwWmj2GqGdffq9rIpwtRdq3Nm_sWFc4tVuN808eLiXBCaq-bS4E2CtFvrtVUu5Uzh9gdzk7hEb5eCS1lLvyiybAl_6scjQWc7TepeOXzYck4E05WsVOn_benfw5l4/s1600/kembang-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:17px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 178px;
}
.bg-4 {
  -webkit-animation: parallax_bg linear -75s infinite both;
          animation: parallax_bg linear -75s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yQAF51IpJfYoHgIF5gS-jGTAZBy6xxNTRM3N9XQy8HRK4u2_x0Qr5nPkJiY0F7jTnw3yQ_yeCGmxLOBNPOfxgKO-2sDuEGtygRA6vw1NUM2_ya5Puzfw_ZNrF-hgzPq7I0QaJQ0HXhs/s1600/rumput-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
 bottom:-9px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 268px;
}
.bg-5 {
  -webkit-animation: parallax_bg linear -95s infinite both;
          animation: parallax_bg linear -95s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGc5zCHAAFFVbX0RxNO2HjrWeDM3OAPVFcceB6UoMJO0HLmB_rWqNnPw7w99WYMWywbFN8RefJmCDGeBUrMQroLDIFBwCi_KNBbmgidZUXAf6f1jtgsU_ngMccJbFeTUI_-sYzyxEGq8w/s1600/gedung-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
 bottom:-120px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 551px;
}
.bg-6 {
  -webkit-animation: parallax_bg linear -30s infinite both;
          animation: parallax_bg linear -30s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZSy69tR1AYlyChHKItKiKHE21evJTdzta0At77R4mgp9vmSyBiuyL-hJNGs4dYdvf2RSnE_3W_v8TsrZ0gyK5pPTHFSC2jzyyjOZUOZTpZvYYlh-b_ThqK9futv1pMRQ4g_kaQ3YaRc/s1600/pohon-tiang-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-1px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 345px;
}
.bg-7 {
  -webkit-animation: parallax_bg linear -75s infinite both;
          animation: parallax_bg linear -75s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMex3UWpx2vvWVsZhIW0nKPTaGhXDjfz_ezBJFuGAsDuY130_wmjPDdoh_hlYKXfgDMVW9M9LCdidhKF6FNDgm5M2hfN7PyYpr0VU_ppmSFe5x4Ht-m6WxrQIT5XS6ctb-QueFSJ5TKAE/s1600/rumput-laut-mys2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-1px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto  158px;
}
@-webkit-keyframes parallax_bg {
  0% {
    background-position: 2765px 100%;
  }
  100% {
    background-position: 550px 100%;
  }
}
@keyframes parallax_bg {
  0% {
    background-position: 2765px 100%;
  }
  100% {
    background-position: 550px 100%;
  }
}

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:430px;top:290px;
  animation-name: float;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;}
  .backwall {position:absolute;width:6%;height:60%;}
@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}
/*end*/
.kalong-1 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 300px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 75px;
}
.kalong-2 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 390px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 35px;
}
.kalong-2a {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgquBSwdVHNH2MF-xI9LmSpC1bp0hxovgxUC7bSwmDe7oiiXFHyhEn5CBN5PdWtAEJy6s3fJXpTZdV57En3mnrXRTl2MPcdUoEAEoDWzkFKIdgJK7_nM3zo-v1DmaI7N7Ksu0NXjotiDo0/s1600/dragon-M2010.gif) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 405px;
}
.kalong-1 {
  -webkit-animation: parallax_kalong linear 70s infinite both;
          animation: parallax_kalong linear 70s infinite both;
}
.kalong-2 {
  -webkit-animation: parallax_kalong linear 15s infinite both;
          animation: parallax_kalong linear 15s infinite both;
}
.kalong-2a {
  -webkit-animation: parallax_kalong linear 100s infinite both;
          animation: parallax_kalong linear 100s infinite both;
}
@-webkit-keyframes parallax_kalong {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}
@keyframes parallax_kalong {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}

@import url(http://fonts.googleapis.com/css?family=Oswald);
@keyframes clouds-loop-1 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-1 {
  background-image: url("http://s.cdpn.io/15514/clouds_2.png");
  animation: clouds-loop-1 20s infinite linear;
}
@keyframes clouds-loop-2 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-2 {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGFRpoZhieY2Gx_elVDKzm4KgYeG6g-3uT4g8rqZTURlRmdK2qGF6mpZIZ8Pfqio2uEJ2ZVhpvlzdygEFk_DTIq5DngtwOx_QSVdVq_yZfOfSHCZvkWCQ6GEpZgq_RGk8aU8-6Ht-ceg/s1600/clouds-mys2010.png");
  animation: clouds-loop-2 15s infinite linear;
}
@keyframes clouds-loop-3 {
  to {
    background-position: -1579px 0;
  }
}
.clouds-3 {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORLv9vmAXNTaZLM1VRC7HqhF6AOWrIj1ydLQcQsD6OFxZMNFXgJ_JochOpC1WhJUlbw_u0Drj7YwnEZe3ZifYHL_UStym5_6YAkW5rNXIdtdE_Z1sjaZw66E9X3Riq7hgNMbAn0tRclI/s1600/awan-biru-mys2010.png");
  animation: clouds-loop-3 17s infinite linear;
}
section.info {
  position: absolute;
  bottom: 0;
  right: 2ch;
  font-size: 60%;
}
section.info dl {
  display: -webkit-flex;
  display: flex;
}
section.info dl dt, section.info dl dd {
  margin: 0;
  padding: 0;
}
section.info dl dt {
  padding-right: 1ch;
}
section.info dl dd {
  padding-right: 4ch;
}
.clouds {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}
.clouds-1,
.clouds-2,
.clouds-3 {
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 500px;
}</style>

<div class="parallax kalong-1">
</div>
<div class="parallax kalong-2">
</div>
<div class="parallax kalong-2a">
</div>
<div class="animated">
<div class="parallax bg-6">
</div>
<div class="parallax bg-5">
</div>
<div class="parallax bg-3">
</div>
<div class="parallax bg-7">
</div>
<div class="parallax bg-2">
</div>
<div class="parallax bg-4">
</div>
<div class="parallax bg-1">
</div>
<div class="parallax pagar-1">
</div>
<canvas id="c">Dragon</canvas>
<div class='clouds'>
<div class='clouds-1'>
</div>
<div class='clouds-2'>
</div>
<div class='clouds-3'>
</div>
</div>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://codepen.io/hello/" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/studiedingsongmp3/laguku/Night-of-the-wolf-black-coach-ave-Sinitra-mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://#" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">Myscript2010</a>  </h2>
</a>  
</div>
</header>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>

<script>
      $(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mys2010-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
} 
</script> 

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script>

// full source for entry into js1k dragons: http://js1k.com/2014-dragons/demo/1837
// thanks to simon for grunt help and sean for inspiration help
// js1k shim
var a = document.getElementsByTagName('canvas')[0];
var b = document.body;
var d = function(e){ return function(){ e.parentNode.removeChild(e); }; }(a);
// unprefix some popular vendor prefixed things (but stick to their original name)
var AudioContext =
    window.AudioContext ||
    window.webkitAudioContext;
var requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(f){ setTimeout(f, 1000/30); };
// stretch canvas to screen size (once, wont onresize!)
a.style.width = (a.width = innerWidth - 0) + 'px';
a.style.height = (a.height = innerHeight - 0) + 'px';
var c = a.getContext('2d');
// end shim
var sw = a.width, 
sh = a.height, 
M = Math,
Mc = M.cos,
Ms = M.sin,
ran = M.random,
pfloat = 0, 
pi = M.PI, 
dragons = [], 
shape = [],
loop = function() {
  a.width = sw; // clear screen
  for ( j = 0; j < 7; j++) {
    if ( !dragons[j] ) dragons[j] = dragon(j); // create dragons initially
    dragons[j]();
  }
  pfloat++;
  requestAnimationFrame(loop);
},
dragon = function(index) {
  var scale = 0.1 + index * index / 49, 
    gx = ran() * sw / scale, 
    gy = sh / scale, 
    lim = 300, // this gets inlined, no good!
    speed = 3 + ran() * 5, 
    direction = pi, //0, //ran() * pi * 2, //ran(0,TAU), 
    direction1 = direction, 
    spine = [];
  return function() {
    // check if dragon flies off screen 
    if (gx < -lim || gx > sw / scale + lim || gy < -lim || gy > sh / scale + lim) {
      // flip them around
      var dx = sw / scale / 2 - gx,
        dy = sh / scale / 2 - gy;
      direction = direction1 = M.atan(dx/dy) + (dy < 0 ? pi : 0);
    } else {
       direction1 += ran() * .1 - .05;
       direction -= (direction - direction1) * .1;
    }
    // move the dragon forwards
    gx += Ms(direction) * speed;
    gy += Mc(direction) * speed;
    // calculate a spine - a chain of points
    // the first point in the array follows a floating position: gx,gy
    // the rest of the chain of points following each other in turn
    for (i=0; i < 70; i++) {
      if (i) {
        if (!pfloat) spine[i] = {x: gx, y: gy}
        var p = spine[i - 1],
          dx = spine[i].x - p.x,
          dy = spine[i].y - p.y,
          d = M.sqrt(dx * dx + dy * dy),
          perpendicular = M.atan(dy/dx) + pi / 2 + (dx < 0 ? pi : 0);
        // make each point chase the previous, but never get too close
        if (d > 4) {
          var mod = .5;
        } else if (d > 2){
          mod = (d - 2) / 4;
        } else {
          mod = 0;
        }
        spine[i].x -= dx * mod;
        spine[i].y -= dy * mod;
        // perpendicular is used to map the coordinates on to the spine
        spine[i].px = Mc(perpendicular);
        spine[i].py = Ms(perpendicular);
        if (i == 20) { // average point in the middle of the wings so the wings remain symmetrical
          var wingPerpendicular = perpendicular;
        }
      } else {
        // i is 0 - first point in spine
        spine[i] = {x: gx, y: gy, px: 0, py: 0}; 
      }
    }
    // map the dragon to the spine
    // the x co-ordinates of each point of the dragon shape are honoured
    // the y co-ordinates of each point of the dragon are mapped to the spine
    c.moveTo(spine[0].x,spine[0].y)
    for (i=0; i < 154; i+=2) { // shape.length * 2 - it's symmetrical, so draw up one side and back down the other
      if (i < 77 ) { // shape.length
        // draw the one half from nose to tail
        var index = i; // even index is x, odd (index + 1) is y of each coordinate
        var L = 1;
      } else {
        // draw the other half from tail back to nose
        index = 152 - i;  
        L = -1;
      }
      var x = shape[index];
      var spineNode = spine[shape[index+1]]; // get the equivalent spine position from the dragon shape
      if (index >= 56) {  // draw tail
        var wobbleIndex = 56 - index; // table wobbles more towards the end
        var wobble = Ms(wobbleIndex / 3 + pfloat * 0.1) * wobbleIndex * L;
        x = 20 - index / 4 + wobble;
        // override the node for the correct tail position
        spineNode = spine[ index * 2 - 83 ];
      } else if (index > 13) {  // draw "flappy wings"
        // 4 is hinge point
        x = 4 + (x-4) * (Ms(( -x / 2 + pfloat) / 25 * speed / 4) + 2) * 2; // feed x into sin to make wings "bend"
        // override the perpindicular lines for the wings
        spineNode.px = Mc(wingPerpendicular);
        spineNode.py = Ms(wingPerpendicular);
      }
      c.lineTo(
        (spineNode.x + x * L * spineNode.px) * scale, 
        (spineNode.y + x * L * spineNode.py) * scale
      );
    }
    c.fill();
  }
}
// the shape of the dragon, converted from a SVG image
'! ((&(&*$($,&.)/-.0,4%3"7$;(@/EAA<?:<9;;88573729/7,6(8&;'.split("").map(function(a,i) {
  shape[i] = a.charCodeAt(0) - 32;
});
loop(); 
</script>

Source Code by. All Sources
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Walk Dragon Audio Mp3

Category: Walk Dragon

Dark Forest with audio

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 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

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Dark Forest Audio Mp3

Category: Dark Forest with audio