HomeAll Tutorials

background changes automatically

Memasang Kode background changes automatically
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:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #00BFFF 50%, transparent 90%); 
}

/*background*/
#myscript2010 {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  background: #243763;
  -webkit-animation: bgColorRotate 60s linear infinite alternate 5s;
          animation: bgColorRotate 60s linear infinite alternate 5s;
}
#myscript2010:before {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  background: -webkit-radial-gradient(50% 30% circle, rgba(0, 0, 0, 0) 20%, #000000);
  background: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0) 20%, #000000);
  pointer-events: none;
  opacity: .8;
}

@-webkit-keyframes bgColorRotate {
  0% {
    background: #243763;
  }
  20% {
    background: #222000;
  }
  40% {
    background: #46344C;
  }
  60% {
    background: #4E513E;
  }
  80% {
    background: #EF8B00;
  }
  100% {
    background: #007F76;
  }
}

@keyframes bgColorRotate {
  0% {
    background: #243763;
  }
  20% {
    background: #283F3D;
  }
  40% {
    background: #46344C;
  }
  60% {
    background: #4E513E;
  }
  80% {
    background: #EF8B00;
  }
  100% {
    background: #007F76;
  }
}
</style>

<div id="myscript2010">
</div>

<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> 
<h2>
CIBEBER CIMAHI</2></a>  
</div>

<header> 
<div class="Top Title Header">
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id" target="_blank" title="Myscript2010"><b>LET'S STUDY</b>
</div>
</header>
Cat Animated code by. Judith Neumann
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy & paste you canDownload Here Background Full Code

Category:

Memasang Audio Mp3 with 7 Dragons

Memasang Kode Audio Mp3 with 7 Dragons
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;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  17px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #000;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #444 50%, transparent 90%); 
}

body{
  font-family:verdana, arial;
}    
.mys2010-list li:hover {
        background: #ffa;
        cursor: pointer;
    }
    .mys2010-list li.current {
        background: #cddfff;
    }
.mys2010-container{
  margin-left:auto;
  margin-right:auto;
}
#wrapper{
  width:490px;
  margin-left:auto;
  margin-right:auto;
  margin-top: -20px;
  padding:-15px;
  -webkit-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
}

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);
  }
}

.Flying-mys2010 {
	z-index: 600;
	cursor: pointer;
	-webkit-animation: Flying-mys2010 38s infinite linear;
	-moz-animation: Flying-mys2010 38s infinite linear;
	-ms-animation: Flying-mys2010 38s infinite linear;
	-o-animation: Flying-mys2010 38s infinite linear;
	animation: Flying-mys2010 38s infinite linear;
	bottom: 10%;
	left: 0%;
	position: absolute;}
@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);
  }
}

@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("http://s.cdpn.io/15514/clouds_1.png");
  animation: clouds-loop-2 15s infinite linear;
}
@keyframes clouds-loop-3 {
  to {
    background-position: -1579px 0;
  }
}
.clouds-3 {
  background-image: url("http://s.cdpn.io/15514/clouds_3.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;
}

body {  
  text-align: center;
  font-size: 20px;
}
div {
  margin: -9px;
}
.btn {
  overflow: hidden;
  position: relative;
  display: inline-block;
  height: 2em;
  line-height: 2em;
  padding: 0 1em;
  text-decoration: none;
  box-shadow: 0 5px 15px #000;
  -moz-transition: color 400ms;
  -o-transition: color 400ms;
  -webkit-transition: color 400ms;
  transition: color 400ms;
}
.btn:before {
  content: '';
  position: absolute;
  z-index: -1;
  height: 0%;
  width: 100%;
  bottom: 0;
  left: 0;
  -moz-transition: height 100ms;
  -o-transition: height 100ms;
  -webkit-transition: height 100ms;
  transition: height 100ms;
}
.btn:hover {
  color: white;
  border-color: white;
}
.btn:hover:before {
  height: 100%;
}
.build {
  color: salmon;
  border: 2px solid salmon;
}
.build:before {
  background-color: salmon;
}
.build:hover {
  color: white;
  border-color: white;
}
.me-up {
  color: skyblue;
  border: 2px solid skyblue;
}
.me-up:before {
  background-color: skyblue;
}
.me-up:hover {
  color: white;
  border-color: white;
}
.rounded {
  border-radius: 2em;
}
.butter {
  color: GoldenRod;
  border: 2px solid GoldenRod;
  border-radius: 2em;
}
.butter:before {
  background-color: GoldenRod;
}
.butter:hover {
  color: white;
  border-color: white;
}

 body { margin: -1; padding: -1 }
h4.quote {
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  text-align: right;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  position: absolute;
  top: 15%;
  left: 50%;
  font-size: 1.2em;
  line-height: 1.5em;
  margin: 0;
  text-shadow: 0 -1px 0  #ffffff, 0 2px 3px #000000;
}
h4.quote span {
  display: block;
}</style>

<h4 class='quote'>
<div class='first'>
<font size="3" color="green"face="arial">
<a class='btn build' href='https://sites.google.com/site/code6916/file/audio-mp3-Before-7Dragons-mys2010.css'>BEFORE 7 DRAGONS </a> <a class='btn me-up' href='https://sites.google.com/site/code6916/file/audio-mp3-After-7Dragons-mys2010.css'>AFTER 7 DRAGONS</font></a>
</h4></div>

<canvas id="c"></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 id="Flying-mys2010" class="slow">
<div id="Flying-mys2010" class="slow">
<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif"name="e902" border="0" width="60" height="90" /></a>
<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">
<a href="http://sample-mys2010.blogspot.co.id" target="_blank" title="Myscript2010">
<h2>
<font size="2" color="orange"face="arial">CIBEBER CIMAHI</font></2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<div id="wrapper">
<audio id="mys2010" src="https://sites.google.com/site/pelajaranku1/mp3ku/Cranberries-Dream-Mys2010.mp3" controls="controls"></audio>
</div>
</header>

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

<ul class="mys2010-list">
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> 
<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><script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.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){ // get the .current song
            var current_item = $('.mys2010-list li.current:first'); // :first is added if we have few .current classes
            var audio_src = $(current_item).next().text();
            $(current_item).next().addClass('current').siblings().removeClass('current');
            console.log('if '+audio_src);
        }else{ // if there is no .current class
            var current_item = $('.mys2010-list li:first'); // get :first if we don't have .current class
            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') ) { // if it is last - stop playing
            $(current_item).removeClass('current');
        }else{
            currentPlayer.setSrc(audio_src);
            currentPlayer.play();
        }
    }
</script>
Source Dragons Code by. Rauri
Source Audio Mp3 Code by. Jereme Causing
Design code is edited by. Mys2010 on Codepen
DEMOSHOW
If you want to directly copy & paste you canDownload Here Audio Mp3 Modification

Category:

Memasang Audio Mp3 Before After

Memasang Kode Audio Mp3 Sebelum & sesudah di Modif
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 ini : 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;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  8px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}

/* GRADIEND */
.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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #444 50%, transparent 90%); 
}

body {  
  text-align: center;
  font-size: 20px;
}
div {
  margin: 1px;
}
.btn {
  overflow: hidden;
  position: relative;
  display: inline-block;
  height: 2em;
  line-height: 2em;
  padding: 0 1em;
  text-decoration: none;
  box-shadow: 0 5px 15px #000;
  -moz-transition: color 400ms;
  -o-transition: color 400ms;
  -webkit-transition: color 400ms;
  transition: color 400ms;
}
.btn:before {
  content: '';
  position: absolute;
  z-index: -1;
  height: 0%;
  width: 100%;
  bottom: 0;
  left: 0;
  -moz-transition: height 100ms;
  -o-transition: height 100ms;
  -webkit-transition: height 100ms;
  transition: height 100ms;
}
.btn:hover {
  color: white;
  border-color: white;
}
.btn:hover:before {
  height: 100%;
}
.build {
  color: salmon;
  border: 2px solid salmon;
}
.build:before {
  background-color: salmon;
}
.build:hover {
  color: white;
  border-color: white;
}
.me-up {
  color: skyblue;
  border: 2px solid skyblue;
}
.me-up:before {
  background-color: skyblue;
}
.me-up:hover {
  color: white;
  border-color: white;
}
.rounded {
  border-radius: 2em;
}
.butter {
  color: GoldenRod;
  border: 2px solid GoldenRod;
  border-radius: 2em;
}
.butter:before {
  background-color: GoldenRod;
}
.butter:hover {
  color: white;
  border-color: white;
}

body{
  font-family:verdana, arial;
}    
.mys2010-list li:hover {
        background: #ffa;
        cursor: pointer;
    }
    .mys2010-list li.current {
        background: #cddfff;
    }
.mys2010-container{
  margin-left:auto;
  margin-right:auto;
}
#wrapper{
  width:490px;
  margin-left:auto;
  margin-right:auto;
  margin-top: -15px;
  padding:-15px;
  -webkit-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
}</style>

<!-- GRADIEND -->
<div class="ap" id="ap">
<a href="http://myscript2010s.blogspot.co.id"target="_blank" title="Myscript2010">
<h2>
CIBEBER CIMAHI</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div class='first'>
<div align="center">
<a class='btn build' href='https://sites.google.com/site/code6916/file/audio-mp3-mys2010.css'>BEFORE</a> <a class='btn me-up' href='https://sites.google.com/site/code6916/file/audio-mp3-After-mys2010.css'>AFTER.</a>
</div>
</div>
</header>

<div align="center">
<div id="wrapper">
<audio id="mys2010" src="https://sites.google.com/site/pelajaranku1/mp3ku/Cranberries-Dream-Mys2010.mp3" controls="controls"></audio>

<ul class="mys2010-list">
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> 
<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>
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.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){ // get the .current song
            var current_item = $('.mys2010-list li.current:first'); // :first is added if we have few .current classes
            var audio_src = $(current_item).next().text();
            $(current_item).next().addClass('current').siblings().removeClass('current');
            console.log('if '+audio_src);
        }else{ // if there is no .current class
            var current_item = $('.mys2010-list li:first'); // get :first if we don't have .current class
            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') ) { // if it is last - stop playing
            $(current_item).removeClass('current');
        }else{
            currentPlayer.setSrc(audio_src);
            currentPlayer.play();
        }
    }
</script>
Audio Code by. Jereme Causing
Design code is edited by. Mys2010 on Codepen
DEMOSHOW
If you want to directly copy & paste you canDownload Here Audio Mp3 Modification

Category:

Lyrics mp3 titanic with Marquee

Memasang Kode Lyrics mp3 titanic with Marquee
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 ini : 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 type="text/css">  
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaI7RCuhocCLPlcnXGOKBmVB1ykPV-2rv1NV8tgJLUh_ugfW1vMnozyRHMiXoGiFEBItcyZgUbZ1hvDmH8TDZHNKgEMOZFmtSmHnoOXChAcMywmotVc0IOK7ioZkym0zXbwia-USwgXlfc/s1600-r/Titanic-mys2010.jpg");
  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;
  }
}

header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding: 0 px 0;
  position: fixed;
  top: 0 ;
  width: 100%;
  background: #111;
  border-bottom: 3px solid #dad;
}

/* GRADIEND */
.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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, blue 50%, transparent 90%); 
}

.animation-mys2010 {position:absolute;bottom:0;width:100   ; }
.window {position:absolute;left:30px;top:10px;}
.bugaloos { position:absolute;left:150px;top:210px;
  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);
  }
}

.Flying-mys2010 {
 z-index: 600;
 cursor: pointer;
 -webkit-animation: Flying-mys2010 38s infinite linear;
 -moz-animation: Flying-mys2010 38s infinite linear;
 -ms-animation: Flying-mys2010 38s infinite linear;
 -o-animation: Flying-mys2010 38s infinite linear;
 animation: Flying-mys2010 38s infinite linear;
 bottom: 10%;
 left: 0%;
 position: absolute;
}
@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);
  }
}
/* End Flying-mys2010 */ /* Requires font-awesome */
.player {
    
    width: 210px;
    height: 5px; 
    border-radius: 10px;
    padding: 0px;
    font-size: 16px;
    color: #fff;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    float: left;
    position: relative;
    cursor: pointer;
    color: #dad;}
.player .volume-ctrl-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 0px;
    height: 50px;
    width: 118px;
    float: right;
}
.player .fa-pause {
    position: absolute;
    top: 7px;
    left: 18px;
}
.player .fa-play {
    position: absolute;
    top: 7px;
    left: 20px;
}
.player .time-info {
    clear: both;
    position: relative;
    top: 8px;
    text-align: center;
    font-size: 13px;
}
.player .time-current {
    color: #ff0;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #666;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #fff;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}

 
#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 300px; /*marquee height */
overflow: hidden;
padding: 2px;
padding-right: 1114px;
} </style>

<div id="animation-mys2010">
<div class="insidewalls" id="animation-mys2010">
<img border="0" class="bugaloos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTQu9HQRPdpqVJu0MxoCGEafw6e1fB2FsCSj4JGbAwQFrO1qNHeGBpOY1Dgl4ySCTtJxK4oMk78G2bODlOlEogpVp6ITCrziaM0txIP7LfhESSS-bWSSz59eQOe-O2u0Px26yDl2p3bngl/s1600-r/burung-mys2010.gif" height="29" name="e902" width="28" />
<div id="Flying-mys2010" class="slow">
<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif"name="e902" border="0" width="30" height="40" /></a>

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<font size="4" color="aqua"face="script mt bold">
<p align="right">
Title : My Heart Will Go On 
Singer : Celine Dion</font>

<font size="4" color="aqua"face="agency fb">
<p align="right">
Every night in my dreams
I see you, I feel you,
That is how I know you go on</p>
<p>
Far across the distance
And spaces between us
You have come to show you go on</p>
<p>
Near, far, wherever you are
I believe that the heart does go on
Once more you open the door
And you're here in my heart
And my heart will go on and on</p>
<p>
Love can touch us one time
And last for a lifetime
And never let go 'til we're gone</p>
<p>
Love was when I loved you
One true time I hold to
In my life we'll always go on</p>
<p>
Near, far, wherever you are
I believe that the heart does go on
Once more you open the door
And you're here in my heart
And my heart will go on and on</p>
<p>
You're here, there's nothing I fear,
And I know that my heart will go on
We'll stay forever this way
You are safe in my heart
And my heart will go on and on </p>
</font></a>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/code6916/file/Lyrics-mp3-titanic-with-Marquee-Mys2010.css"title="Myscript2010s"> 
<h2>
<font size="1" color="GREEN"face="arial"> DOWNLOAD CODE</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<audio id="player">
<source src="https://sites.google.com/site/code6916/lagu/Titanic-violin-Mys2010.mp3" type="audio/mpeg">
</audio>
</div>
</header>

<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>
<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>

<script>
var Player = function(audio_element, options) {

    this.audio_obj = document.id(audio_element);
    this.options = options;

    this.init = function() {
        this.status = 'pause';
        //this.duration = this.audio_obj.duration;
        this.time = '00';
        this.render();
        this.addEvents();
    };

    this.render = function() {

        // source controller
        this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
        this.source_ctrl_button = new Element('div.source-ctrl-container')
            .adopt(this.source_ctrl_el);

        // time info
        this.time_current_el = new Element('span.time-current');
        this.time_duration_el = new Element('span.time-duration');
        var time_info = new Element('div.time-info')
            .adopt(
                this.time_current_el,
                new Element('span.time-current-duration-separator').set('text', ' / '),
                this.time_duration_el
            );

        // volume ctrl
        this.volume_slider = new Element('div.volume-slider');
        this.volume_ctrl = new Element('div.volume-ctrl')
            .adopt(
                new Element('span.fa.fa-2x.fa-volume-off'),
                this.volume_slider.adopt( new Element('div.volume-knob')),
                new Element('span.fa.fa-2x.fa-volume-up')
            );

        var container = new Element('div.player')
            .adopt(
                this.source_ctrl_button,
                new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
                time_info
            )
            .inject(this.audio_obj, 'after');
    };

    this.addEvents = function() {
        this.audio_obj.load();
        this.audio_obj.addEventListener('loadeddata', function() { 
            this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this));
        this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));

        new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
            range: [0, 100],
            initialStep: this.audio_obj.volume * 100,
            onChange: function(value){
                this.audio_obj.volume = value/100;
            }.bind(this)
        });
    };

    this.sourceCtrlAction = function() {
        if(this.status == 'pause') {
            this.play();
        }
        else {
            this.pause();
        }
    };

    this.toHHMMSS = function(s) {
        var sec_num = parseInt(s, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if(hours   < 10) { hours   = "0" + hours; }
        if(minutes < 10) { minutes = "0" + minutes; }
        if(seconds < 10) { seconds = "0" + seconds; }

        var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;

        return time;
    }

    this.play = function() {
        this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        this.time_ti = setInterval(function() {
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this), 1000);
        this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
        this.audio_obj.play();
        this.status = 'play';
    };

    this.pause = function() {
        clearInterval(this.time_ti);
        this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
        this.audio_obj.pause();
        this.status = 'pause';
    };

}

var player = new Player('player');
player.init();
</script>

<script>
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",50)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
Source Marquee Code by. Dynamicdrive
Design code is edited by. Mys2010 on Codepen
DEMOSHOW
If you want to directly copy and paste you canDownload Here Lyrics Mp3 Marquee

Category:

Kode Warna CSS

Memasang Kode warna CSS
Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini : 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 {
   background: #9370DB;
}

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: #222;
  border-bottom: 3px solid #dad;
}

/* GRADIEND */
.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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, pink 50%, transparent 90%); 
}
  body {
  text-align: center;
}
h1 {
  color: rgba(0,0,0,.3);
  text-shadow: none !important;
}
input {
  text-align: center;
  display: inline-block;
  width: auto !important;
  margin-right: 1em;
  padding: 0 !important;
  color: black;
  line-height: 3;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow:
    inset rgba(0,0,0,.075) 0 -3px 10px,
    inset rgba(255,255,255,.3) 0 1px 1px,
    rgba(0,0,0,.075) 0 1px .5px,
    rgba(0,0,0,.05) 1px 3px 5px;
  cursor: pointer;
}
</style> 

<table border="" px="" solid=""><tbody>
<tr><td>
<input value="#F0F8FF" />
<input value="#FAEBD7" />
<input value="#00FFFF" />
<input value="#7FFFD4" />
</td><td>
<input value="#F0FFFF" />
<input value="#F5F5DC" />
<input value="#FFE4C4" />
<input style="color: rgba(255,255,255,.7);" value="#000000" />
</td><td>
<input value="#FFEBCD" />
<input value="#0000FF" />
<input value="#8A2BE2" />
<input style="color: rgba(255,255,255,.7);" value="#A52A2A" />
</td><td>
<input value="#DEB887" />
<input value="#5F9EAD" />
<input value="#7FFF00" />
<input value="#D2691E" />
</td><td>
<input value="#FF7F50" />
<input value="#649501" />
<input value="#249501" />
<input value="#DC143A" />
</td><td>
<input value="#00FFFF" />
<input style="color: rgba(255,255,255,.7);" value="#00008B" />
<input value="#008B8B" />
<input value="#B8860B" />
</td><td>
<input value="#A9A9A9" />
<input style="color: rgba(255,255,255,.7);" value="#006400" />
<input value="#A9A9A9" />
<input value="#BDB76B" />
</td><td>
<input style="color: rgba(255,255,255,.7);" value="#8B008B" />
<input value="#556B2F" />
<input value="#FF8C00" />
<input value="#9932CC" />
</td></tr>
</tbody></table>
<table border="" px="" solid=""><tbody>
<tr><td>
<input style="color: rgba(255,255,255,.7);" value="#8B0000" />
<input value="#E9967A" />
<input value="#8FBC8B" />
<input style="color: rgba(255,255,255,.7);" value="#483D8B" />
</td><td>
<input style="color: rgba(255,255,255,.7);" value="#2F4F4F" />
<input value="#00CED1" />
<input value="#9400D3" />
<input value="#FF1493" />
</td><td>
<input value="#00BFFF" />
<input value="#FF0000" />
<input value="#696969" />
<input value="#1E90FF" />
</td><td>
<input value="#B22222" />
<input value="#FFFAF0" />
<input value="#228B22" />
<input value="#FF00FF" />
</td><td>
<input value="#DCDCDC" />
<input value="#F8F8FF" />
<input value="#FFD700" />
<input value="#DAA520" />
</td><td>
<input value="#808080" />
<input value="#008000" />
<input value="#ADFF2F" />
<input value="#808080" />
</td><td>
<input value="#F0FFF0" />
<input value="#FF69B4" />
<input value="#CD5C5C" />
<input style="color: rgba(255,255,255,.7);" value="#4B0082" />
</td><td>
<input value="#FFFFF0" />
<input value="#F0E68C" />
<input value="#E6E6FA" />
<input value="#FFF0F5" />
</td></tr>
</tbody></table>
<table border="" px="" solid=""><tbody>
<tr><td>
<input value="#7CFC00" />
<input value="#FFFACD" />
<input value="#ADE8E6" />
<input value="#F08080" />
</td><td>
<input value="#E0FFFF" />
<input value="#FAFAD2" />
<input value="#D3D3D3" />
<input value="#90EE90" />
</td><td>
<input value="#D3D3D3" />
<input value="#FFB6C1" />
<input value="#FFA072" />
<input value="#20B2AA" />
</td><td>
<input value="#87CEFA" />
<input value="#778899" />
<input value="#666666" />
<input value="#B0C4DE" />
</td><td>
<input value="#FFFFE0" />
<input value="#00FF00" />
<input value="#32CD32" />
<input value="#FAF0E6" />
</td><td>
<input value="#FF00FF" />
<input style="color: rgba(255,255,255,.7);" value="#800000" />
<input value="#66CDAA" />
<input style="color: rgba(255,255,255,.7);" value="#0000CD" />
</td><td>
<input value="#BA55D3" />
<input value="#9370DB" />
<input value="#3CB371" />
<input value="#7B68EE" />
</td><td>
<input value="#00FA9A" />
<input value="#48D1CC" />
<input value="#C71585" />
<input style="color: rgba(255,255,255,.7);" value="#191970" />
</td></tr>
</tbody></table>
<table border="" px="" solid=""><tbody>
<tr><td>
<input value="#F5FFFA" />
<input value="#FFE4E1" />
<input value="#FFDEAD" />
<input style="color: rgba(255,255,255,.7);" value="navy" />
</td><td>
<input value="#FDF5E6" />
<input value="#808000" />
<input value="#6B8E23" />
<input value="#FFA500" />
</td><td>
<input value="#FF1000" />
<input value="#DA70D6" />
<input value="#EEE8AA" />
<input value="#98FB98" />
</td><td>
<input value="#AFEEEE" />
<input value="#DB7093" />
<input value="#FFEFD5" />
<input value="#FFDAB9" />
</td><td>
<input value="#CD853F" />
<input value="#FFC0CB" />
<input value="#DDA0DD" />
<input value="#B0E0E6" />
</td><td>
<input style="color: rgba(255,255,255,.7);" value="#800080" />
<input value="#FF0000" />
<input value="#BC8F8F" />
<input value="#4169E1" />
</td><td>
<input style="color: rgba(255,255,255,.7);" value="#8B4513" />
<input value="#FA8072" />
<input value="#F4A460" />
<input value="#2E8B57" />
</td><td>
<input value="#FFF5EE" />
<input value="#A0522D" />
<input value="#C0C0C0" />
<input value="#87CEEB" />
</td></tr>
</tbody></table>
<table border="" px="" solid=""><tbody>
<tr><td>
<input value="#7B68EE" />
<input value="#708090" />
<input value="#00ffcc" />
<input value="#FFFAFA" />
</td><td>
<input value="#00FF7F" />
<input value="#4682B4" />
<input value="#D2B48C" />
<input value="#008080" />
</td><td>
<input value="#D8BFD8" />
<input value="#FF6347" />
<input value="#40E0D0" />
<input value="#EE82EE" />
</td><td>
<input value="#F5DEB3" />
<input value="#FFFFFF" />
<input value="#F5F5F5" />
<input value="#FFFF00" />
</td><td>
<input value="#FF3300" />
<input value="#CC33CC" />
<input value="#9966FF" />
<input value="#FFFccc" />
</td><td>
<input value="#660000" />
<input value="#003300" />
<input value="#0066CC" />
<input value="#00FFCC" />
</td><td>
<input value="#FF3333" />
<input value="#CC3344" />
<input value="#996655" />
<input value="#FFFF66" />
</td><td>
<input value="#660077" />
<input value="#003388" />
<input value="#006699" />
<input value="#00FF11" />
</td></tr>
</tbody></table>
<table border="" px="" solid=""><tbody>
<tr><td>
<input value="rgb(255,0,0)" />
<input value="rgb(104,0,0)" />
<input value="RGB(128,128,128)" />
<input value="rgb(248,0,0)" />
</td><td>
<input value="rgb(48,0,0)" />
<input value="rgb(255,255,255)" />
<input value="rgb(192,192,192)" />
<input value="rgb(255,0,255)" />
</td><td>
<input value="rgb(0,255,255)" />
<input value="rgb(255,255,0)" />
<input value="rgb(0,255,0)" />
<input value="rgb(255,0,0)" />
</td><td>
<input value="rgb(255,0,0)" />
<input value="rgb(208,0,0)" />
<input value="rgb(64,64,64)" />
<input value="rgb(224,224,224)" />
</td><td>
<input value="rgb(51,51,51)" />
<input value="rgb(153,246,20)" />
<input value="rgb(0,128,128)" />
<input value="rgb(52,52,52)" />
</td><td>
<input value="rgb(0,122,122)" />
<input value="rgb(0,322,322)" />
<input value="rgb(0,722,022)" />
<input value="rgb(07,57,07)" />
</td><td>
<input value="rgb(0,0,255,1)" />
<input value="rgb(8,511,5)" />
<input value="rgba(255,0,0,0.3)" />
<input value="rgba(0,0,255,0.6)" />
</td><td>
<input value="rgb(599,9,9)" />
<input value="rgb(150,0,0)" />
<input value="rgb(122,0,2)" />
<input value="rgb(255,0,0)" />
</td></tr>
</tbody></table>

<div class="ap" id="ap">
<div align="center">
<h2>
<a href="https://sites.google.com/site/code6916/file/kode-warna-mys2010.css" title="Myscript2010s">DOWNLOAD CODE</a></h2>
</div>
</div>
</center>

<header> 
<div class="Top Title Header">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id/2015/11/kode-warna.html" title="Myscript2010s"><b>KODE WARNA CSS</b></a></div>
</div>
</header>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1">
</script>
<script src="//elementqueries.com/EQCSS-polyfills.js">
</script>
<script src="//elementqueries.com/EQCSS.js">
</script>

<script>var el = document.getElementsByTagName('input');
for (i = 0; i < el.length; i++) {
    if (window.CP.shouldStopExecution(1)) {
        break;
    }
    el[i].style.background = el[i].value;
    el[i].addEventListener('click', function () {
        document.body.style.background = document.documentElement.style.background = this.value;
        document.querySelector('h1').style.color = this.style.color ? 'rgba(255,255,255,.7)' : 'rgba(0,0,0,.7)';
    });
}
window.CP.exitedLoop(1); 
</script>
Source Code by. Codepen
Design code is edited by. Mys2010 on Codepen
DEMOSHOW
If you want to directly copy and paste you canDownload Here Kode Warna CSS

Category:

Animated Sea with Audio

Memasang Kode Animated Sea with Audio
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 ini :
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">
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding: 0 px 0;
  position: fixed;
  top: 0 ;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
.ap {
position: fixed;
right: 0;
bottom:-15px;
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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, pink 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:25px;
}

html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8V8XUHlxQBkVPJr30PVwXKJ8NPfXORMfaphP1s5CXA258JVu5wjNNsaiQsGCShOeKxx3ghKZBWIWxX0RaOou5row-H5bJ9vgHQlkT0jslbDCrMDNFJliAQng2NBB3ZFyoIpweeQcR1Dt/s1600-r/Laut-Animasi-Mys2010.gif");
  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: 10%;
  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: 2.4em;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: .45em;
  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;
  }
}

.animation-mys2010 {position:absolute;bottom:0;width:100   ; }
.window {position:absolute;left:30px;top:10px;}
.bugaloos { position:absolute;left:430px;top:190px;
  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);
  }
}

.Flying-mys2010 {
 z-index: 600;
 cursor: pointer;
 -webkit-animation: Flying-mys2010 38s infinite linear;
 -moz-animation: Flying-mys2010 38s infinite linear;
 -ms-animation: Flying-mys2010 38s infinite linear;
 -o-animation: Flying-mys2010 38s infinite linear;
 animation: Flying-mys2010 38s infinite linear;
 bottom: 10%;
 left: 0%;
 position: absolute;
}
@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);
  }
}

.player {
    
    width: 210px;
    height: 5px; 
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    float: left;
    position: relative;
    cursor: pointer;
    color: #dad;}
.player .volume-ctrl-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 0px;
    height: 50px;
    width: 118px;
    float: right;
}
.player .fa-pause {
    position: absolute;
    top: 7px;
    left: 18px;
}
.player .fa-play {
    position: absolute;
    top: 7px;
    left: 20px;
}
.player .time-info {
    clear: both;
    position: relative;
    top: 8px;
    text-align: center;
    font-size: 13px;
}
.player .time-current {
    color: #ff0;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #666;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #fff;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}   
 </style>

<div id="animation-mys2010">
<div class="insidewalls" id="animation-mys2010">
<img border="0" class="bugaloos" src="http://khezo.com/wp-content/uploads/2013/06/Animasi-kelelawar-vampire.gif" height="29" name="e902" width="28" />
<div id="Flying-mys2010" class="slow">
<div id="Flying-mys2010" class="slow">
<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif"name="e902" border="0" width="60" height="90" /></a>

<div class="ap" id="ap">
<div align="center">
<h2>
<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/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div> 
<a href="#"title="Myscript2010s">  
CIBEBER CIMAHI</h2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<audio id="player">
<source src="https://sites.google.com/site/code6916/lagu/Now-and-forever-Mys2010s.mp3" type="audio/mpeg">
</audio>
</div>
</header>

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

<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'>
</script>

<script>
"use strict";
/**
 * Requires mootools core and mootools more Slider
 */
var Player = function(audio_element, options) {
    this.audio_obj = document.id(audio_element);
    this.options = options;
    this.init = function() {
        this.status = 'pause';
        //this.duration = this.audio_obj.duration;
        this.time = '00';
        this.render();
        this.addEvents();
    };
    this.render = function() {
        // source controller
        this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
        this.source_ctrl_button = new Element('div.source-ctrl-container')
            .adopt(this.source_ctrl_el);
        // time info
        this.time_current_el = new Element('span.time-current');
        this.time_duration_el = new Element('span.time-duration');
        var time_info = new Element('div.time-info')
            .adopt(
                this.time_current_el,
                new Element('span.time-current-duration-separator').set('text', ' / '),
                this.time_duration_el
            );
        // volume ctrl
        this.volume_slider = new Element('div.volume-slider');
        this.volume_ctrl = new Element('div.volume-ctrl')
            .adopt(
                new Element('span.fa.fa-2x.fa-volume-off'),
                this.volume_slider.adopt( new Element('div.volume-knob')),
                new Element('span.fa.fa-2x.fa-volume-up')
            );
        var container = new Element('div.player')
            .adopt(
                this.source_ctrl_button,
                new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
                time_info
            )
            .inject(this.audio_obj, 'after');
    };
    this.addEvents = function() {
        this.audio_obj.load();
        this.audio_obj.addEventListener('loadeddata', function() { 
            this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this));
        this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));
        new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
            range: [0, 100],
            initialStep: this.audio_obj.volume * 100,
            onChange: function(value){
                this.audio_obj.volume = value/100;
            }.bind(this)
        });
    };
    this.sourceCtrlAction = function() {
        if(this.status == 'pause') {
            this.play();
        }
        else {
            this.pause();
        }
    };
    this.toHHMMSS = function(s) {
        var sec_num = parseInt(s, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);
        if(hours   < 10) { hours   = "0" + hours; }
        if(minutes < 10) { minutes = "0" + minutes; }
        if(seconds < 10) { seconds = "0" + seconds; }
        var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;
        return time;
    }
    this.play = function() {
        this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        this.time_ti = setInterval(function() {
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this), 1000);
        this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
        this.audio_obj.play();
        this.status = 'play';
    };
    this.pause = function() {
        clearInterval(this.time_ti);
        this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
        this.audio_obj.pause();
        this.status = 'pause';
    };
}
var player = new Player('player');
player.init();
</script>

Audio Code by. Cartoonist ARiF 
Design code is edited by. Mys2010 on Codepen 

DEMOSHOW
If you want to directly copy and paste you canDownload Here Animated Sea Audio

Category:

Post Komentar

0 Comment

Category:
Subscribe to: Posts (Atom)