Memasang kode Egrets Animation with Audio Player
Code ini menggunakan CSS dan HTML. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan 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-image: url
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXINuiF6oTJaOFNQwFduzE2MncUktjr20BScBsLO-NuqNJjv_HwvGM8Rjb8u_VpbmOeXw8V1VyStIG_qUBL2zZGSvo68lIWQBbE7DlIC5ghTKcF9L6DUdoxJsD2lm5ZjvOZ1L3OAah0SY/s1600-r/rumput-mys2010.jpg)
;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: 0;
  width: 100%;
  background: #228B22;
  border-bottom: 3px solid #dad;
} 
.contenedor{
  position:relative;
  width:700px;
  height:700px;
  border-radius:100%;   
  margin: -120px auto;
}
.cigu{
  position:absolute;
  margin: 0  0px;
}
.cabeza{
  position:absolute;
  width:95px;
  height:85px;
  
  margin:123px 295px;
  -webkit-animation:rotar 3s alternate infinite;
          animation:rotar 3s alternate infinite;
}
.head{
  position:absolute;
  width:95px;
  height:85px;
  background:white;
  border-radius:100%;
   margin:0px 0px;
  
}
.ojo{
  position:absolute;
  width:21px;
  height:21px;
  border-radius:100%;
  border:2px solid black;
  margin:21px 50px;
  -webkit-animation:cerrar 3s alternate infinite;
          animation:cerrar 3s alternate infinite;
 
}
.iris{
  position:absolute;
  width:19px;
  height:19px;
  border-radius:100%;
  background:black;
  margin:0px 0px;
   -webkit-animation:bajar 3s alternate infinite;
           animation:bajar 3s alternate infinite;
}

.iris::before{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:100%;
  background:white;
  margin:0px 7px
    
}
.boca{
  position:absolute;
  width: 0;
  height: 0;
   width: 0;
  height: 0;
  border-top: 21px solid #FC5800;
  border-right: 172px solid transparent;
  margin:30px 50px;
 
}
.boca3{
  
  position:absolute;
  width: 0;
  height: 0;
   width: 0;
  height: 0;
  border-top: 12px solid  #DD5C00;
  border-right: 172px solid transparent;
  margin:43px 50px;
    -webkit-transform:rotate(-5deg);
            transform:rotate(-5deg);
  -webkit-animation:rotar3 3s alternate infinite;
          animation:rotar3 3s alternate infinite;
}
.cuello{
  position:absolute;
   width: 212px;
  height: 150px;
  border-top: 30px solid white;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
    border-radius: 192px / 100px;
  -webkit-transform:rotate(95deg);
          transform:rotate(95deg);
  margin:182px 121px;
   
}
.body{
  position:absolute;
  width:212px;
  height:112px;
  border-radius:0 0 172px 172px;
  background:white;
  
  margin:330px 112px
}
.ala{
  position:absolute;
  width:192px;
  height:152px;
  border-radius:300px 3000px 300px 3000px;
  background:#212121;
  margin:-60px -12px;
  -webkit-transform:rotate(-40deg);
          transform:rotate(-40deg);
  -webkit-animation:rotar7 3s alternate infinite;
          animation:rotar7 3s alternate infinite;
}
.ala::before{
  content:"";
  position:absolute;
  width:132px;
  height:152px;
  border-radius:300px 3000px 300px 3000px;
  background:white;
  margin:0px 60px;
  
}
.legs{
  position:absolute;
  width:12px;
  height:192px;
  background:#FC5800;
  margin:400px 231px
}
.legs3{
  
  position:absolute;
 width:12px;
  height:172px;
  
   background:#FC5800;
  margin:421px 185px;
   -webkit-transform:rotate(12deg);
           transform:rotate(12deg);
  
}
.legs7{
  
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  
border-top: 12px groove #FC5800;
 
  margin:180px 0px
}
.legs7::before{
  content:"";
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  border-top: 12px groove #FC5800;
   margin:-3px 0px;
  -webkit-transform:rotate(12deg);
          transform:rotate(12deg)
}
.legs7::after{
  content:"";
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  border-top: 12px groove #FC5800;
   margin:0px -5px;
  -webkit-transform:rotate(21deg);
          transform:rotate(21deg)
}

.legs9{
  
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  
border-top: 12px groove #FC5800;
 
  margin:155px 0px
}
.legs9::before{
  content:"";
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  border-top: 12px groove #FC5800;
   margin:-3px 0px;
  -webkit-transform:rotate(9deg);
          transform:rotate(9deg)
}
.legs9::after{
  content:"";
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  border-top: 12px groove #FC5800;
   margin:0px -3px;
  -webkit-transform:rotate(12deg);
          transform:rotate(12deg)
}
.bag, .bag3{
  position:absolute;
  display:block;
  width: 70px;
  height: 102px;
  border-radius: 50%  50%  50%  50%  / 50%   50%   50%  50%;
  
 
}

.bag{
  background:lightblue;
  margin:500px 330px;
}

 
.bag3{
   background:pink;
  margin:500px 421px
}


@-webkit-keyframes rotar{
  0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  100%{-webkit-transform:rotate(40deg);transform:rotate(40deg)}
}
@keyframes rotar{
  0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  100%{-webkit-transform:rotate(40deg);transform:rotate(40deg)}
}
@-webkit-keyframes rotar3 {
  0%{margin-top:43px}
  100%{margin-top:40px;-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
}
@keyframes rotar3 {
  0%{margin-top:43px}
  100%{margin-top:40px;-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
}
@-webkit-keyframes rotar7{
  0%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}
  100%{-webkit-transform:rotate(-50deg);transform:rotate(-50deg)}
}
@keyframes rotar7{
  0%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}
  100%{-webkit-transform:rotate(-50deg);transform:rotate(-50deg)}
}
@-webkit-keyframes cerrar{
 0%,25%{opacity:1}
  35%{opacity: 0}
  50%{opacity:1;}
  100%{opacity:1}
}
@keyframes cerrar{
 0%,25%{opacity:1}
  35%{opacity: 0}
  50%{opacity:1;}
  100%{opacity:1}
}
@-webkit-keyframes bajar{
 0%,25%{margin:0 0 }
  35%{margin: 0 0px}
  50%{margin:3px 3px;}
  75%{margin:3px 4px;}
  100%{margin:3px 3px}
}
@keyframes bajar{
 0%,25%{margin:0 0 }
  35%{margin: 0 0px}
  50%{margin:3px 3px;}
  75%{margin:3px 4px;}
  100%{margin:3px 3px}
}
   
/*audio*/
.buttons{
  width:500px;
  margin:0 auto;
  text-align:center;
  font-family: 'Bernard MT Condensed', sans-serif;
  font-size:18px;
  color: #EE82EE
}
.buttons a:hover {
  background-color:#0033CC;}
.buttons a:active, a:focus {
background-color:  #FF6347;
 box-shadow:0 0px 0 rgba(0,0,0,0.4) inset;  
  transition:all 0.1s}
audio{
  display:none
}
<div class="contenedor">
<div class="cigu">
<div class="cuello">
</div>
<div class="cabeza">
<div class="boca">
</div>
<div class="boca3">
</div>
<div class="head">
<div class="ojo">
<div class="iris">
</div>
</div>
</div>
</div>
<div class="legs">
<div class="legs7">
</div>
</div>
<div class="legs3">
<div class="legs9">
</div>
</div>
<div class="body">
<div class="ala">
</div>
</div>
<div class="bag">
</div>
<div class="bag3">
</div>
</div>
</div>
<header> 
<div class="Top Title Header">
<div class="buttons">
<a href="#" data-fx="epic.swf_1"> <font size="3" color="orange"face="arial"><b>♫ PLAY ♫</b></a>
</div>
</header>
<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>$('.buttons a').on('click', function (e) {
    e.preventDefault();
    $('audio').remove();
    var fx = $(this).attr('data-fx');
    $('<audio controls="controls" autobuffer="autobuffer" autoplay="autoplay"> <source src="https://sites.google.com/site/studiedingsongmp3/arcana/egrets-Mys2010s.mp3"  type="audio/mpeg"> </audio>').appendTo('.buttons');
});
 
</script>
Edited by. Myscript2010
bird Code by. Judith Neumann
Code Soundboard Mp3 by. Nodws
If you want to directly copy and paste you canDownload Here Egrets with Audio

Memasang kode Cloud Animation Runs with Rain & Audio Player
Code ini menggunakan CSS dan HTML. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan 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
<link rel='stylesheet prefetch' href='
//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<script src='//codepen.io/assets/libs/prefixfree.min.js'></script>
<style class="cp-pen-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: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 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;
}
   
 /* AWAN */
/* What do you have to be scared of?
 *
 * Lorin Tackett, July 2013
 * Myscript2010 Maret 2016 
 */
@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;
}
html, body {
  font-family: sans-serif;
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #000000));
  background: -moz-linear-gradient(#333333, #000000);
  background: -webkit-linear-gradient(#333333, #000000);
  background: linear-gradient(#333333, #000000);
}
body, body a {
  color: #444;
}
h1.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: 50%;
  left: 50%;
  font-size: 1.5em;
  line-height: 1.5em;
  margin: 0;
  text-shadow: 0 -1px 0  #ffffff, 0 2px 3px #000000;
}
h1.quote span {
  display: block;
}
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;
}
/* Requires Music */
.player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 210px;
    height: 100px;
    background: ##000;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    height: 50px;
    width: 50px;
    background: #fff;
    border-radius: 50%;
    float: left;
    position: relative;
    cursor: pointer;
    color: #dad;  
}
.player .volume-ctrl-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 10px;
    height: 50px;
    width: 118px;
    float: right;
}
.player .fa-pause {
    position: absolute;
    top: 18px;
    left: 18px;
}
.player .fa-play {
    position: absolute;
    top: 18px;
    left: 20px;
}
.player .time-info {
    clear: both;
    position: relative;
    top: 8px;
    text-align: center;
    font-size: 13px;
}
.player .time-current {
    color: #ffff00;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #f0f;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #dad;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}
/*hujan*/
a {
  line-height: normal;
  font-family: Varela Round, sans-serif;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
  color: #A7AAAE;
  position: absolute;
  left: 20px;
  bottom: 20px;  }
/*hujan End*/
</style>
<center>
<audio id="player">
<source src="http://radio.freeshoutcast.com:18714/;stream.ogg" type="audio/ogg">
<source src="https://sites.google.com/site/fileblogfor/code/Fix-You-Kinna-Mys2010.mp3" type="audio/mpeg">
</audio>
<center>
<audio id="player">
<source src="http://radio.freeshoutcast.com:18714/;stream.ogg" type="audio/ogg">
<source src="https://sites.google.com/site/fileblogfor/code/Fix-You-Kinna-Mys2010.mp3" type="audio/mpeg">
</audio>
<canvas height='1' id='display' width='1'></canvas>
</center>
<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>
<h1 class='Awan'>
<h1 class='quote'>

<span>If our heart is in the dark
who will give light to illuminate our hearts
by. Myscript2010</span>
<span>Song title : Fix You
Singer by. Kina Grannis</span>

<a href="http://demoshow-mys2010.blogspot.co.id/2016/03/cloud-animation-runs.html" title="Tukar Gambar"> The exchange Models</a></h1>
<div class='clouds'>
<div class='clouds-1'>
</div>
<div class='clouds-2'>
</div>
<div class='clouds-3'>
</div>
</div>
<!-- GRADIEND -->
<div class="ap" id="ap">
<center>
<p>
Cibeber Cimahi</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9mZwE1hxxBIz-tWksu-19Ci_bDAev9Twjk2s3_RJ3Y3DqPeaPkqWJ3nwDgTJ40UNr7AfkjNcUrMrZyk7sjM5SW9zZawfYM2izL8G7E0tKNBQtsGXomZXySgY_AFT2HEx818p1SNdjUrLt/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a>
<header>  
<div class="Top Title Header">
<center>
<font size="1" color="aqua"face="arial"><b>RAIN WITH AUDIO PLAYER</b></a>
</div>
</header>
<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>(function () {
}.call(this)); 
</script>

<script>
"use strict";

/**
 * Requires JS Music
 */

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>
<hujan>
<script>
      var DAMPING = 1.002,
    GRAVITY = 0.2,
    MAXAGE = 200,
    RAINCOLOR = "rgba(255,255,255,0.4)";

function Rain(x, y) {
  this.x = this.oldX = x;
  this.y = this.oldY = y;
  this.age = 0; //added age
}

Rain.prototype.integrate = function() {
  var velocity = this.getVelocity();
  this.oldX = this.x;
  this.oldY = this.y;
  this.x += velocity.x * DAMPING;
  this.y += velocity.y * DAMPING;
};

Rain.prototype.getVelocity = function() {
  return {
    x: this.x - this.oldX,
    y: this.y - this.oldY
  };
};

Rain.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  this.age++;
};

Rain.prototype.bounce = function() {
  if (this.y > height) {
    var velocity = this.getVelocity();
    this.oldY = height;
    this.y = this.oldY - velocity.y * Math.random()*0.2;
  }
};

//remove items if age is greater than MAXAGE threshold
Rain.prototype.remove = function(arr) {
  if (this.age > MAXAGE) {
    arr.splice(arr.indexOf(this), 1);
  }
};

Rain.prototype.draw = function() {
  ctx.strokeStyle = RAINCOLOR;
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(this.oldX, this.oldY);
  ctx.lineTo(this.x, this.y);
  ctx.stroke();
};

var display = document.getElementById('display');
var ctx = display.getContext('2d');
var drops = [];
var width = display.width = window.innerWidth;
var height = display.height = window.innerHeight;

ctx.globalCompositeOperation = 'overlay';
requestAnimationFrame(frame);

function frame() {
  requestAnimationFrame(frame);
  ctx.clearRect(0, 0, width, height);
  for (var j = 0; j < 5; j++) {
    var drop = new Rain(width * 0.5, 0);
    drop.move(Math.random() * 8 - 4, -10);
    drops.push(drop);
  }
  for (var i = 0; i < drops.length; i++) {
    drops[i].integrate();
    drops[i].move(0, GRAVITY);
    drops[i].bounce();
    drops[i].draw();
    drops[i].remove(drops);//killing old Rains
  }
}
      
    </script>
Penjelasan : Terapkan kode sesuai kelompok Ganti Link Lagu Audio Player Mp3 Sesuai keinginan
Edited by. Myscript2010
Sources by. Lorin Tackett
Code Soundboard Mp3 by. Nodws
If you want to directly copy and paste you canDownload Here Cloud & Rain Audio Mp3

Memasang kode Photo in the Frame
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan 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">
body {background-image: url(http://#.jpg);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: 0;
  width: 100%;
  background: #333;
  border-bottom: 3px solid #dad;
} 
.explanation {
 text-align: center;
 color: #888;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.7);} 
body{
    color:#000;
    font:normal 14px Arial;
    padding: 0px;
    margin:0 auto;
    background:#ccc;   
}   
.stamp {
 width: 346px;
 height: 456px;
 display: inline-block;
 
 /*The stamp cutout will be created using crisp radial gradients*/
 background: radial-gradient(
  transparent 0px, 
  transparent 4px, 
  #A9A9A9 4px,
  #333
 );
 /*reducing the gradient size*/
 background-size: 40px 190px; 
 background-position: -210px - 1px;}
</style>
<header> 
<div class="Top Title Header">
<div align="center">
<font size="3" color="green"face="Agency FB"><b>PHOTO IN THE FRAME</b></a>
</div>
</header>
<h3 class="explanation">
ESQ Emotional Spiritual Intelligence</h3>
<h4 class="explanation">
<!-- Lets create a CSS3 stamp -->
<div class="stamp">
<img class="expando" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquCtLj1VvLCbfkICLXdHnm0l8nrA8ReN6CKOdfKpWiYMaynyvJe3OkXK7m9K2QgM64fsGu44D4tisyTqRwxC4giID2sZTHwvlQAhyRZi4pkX5X_RCLp2u3yGdkZsJkBsTTGW9Br4VRGU/s1600-r/Sharing-Mys2010.gif" width="340" height="420"title="Song Mp3 Instrumental"></div>
<!-- prefixfree to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
<!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="http://scmplayer.net/script.js"  
data-config="{'skin':'skins/black/skin.css','volume':50,'autoplay':false,'shuffle':false,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[{'title':'ESQ Mys2010 Mys2010','url':'https://sites.google.com/site/laguhiburan/mp3/ESQ-Mys2010s.mp3'}]}" ></script> 
<!-- SCM Music Player script end -->
Penjelasan :
Ganti Link Gambar, Teks dan Link Title Sesuai Keinginan
Sources by. All Sources
Edited by. Mys2010 on Codepen

Memasang kode Text Shadow dan Tooltip
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan 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
body {background-image: url(http://orig05.deviantart.net/e28f/f/2012/057/7/b/dark_wood_texture_by_drsela-d4r0ger.jpg);color:red;height:100%;overflow:hidden;}
#tooltip-image {width:410px;float:left;border-radius:50%}
.container {
  width:110px;height:110px;margin:0 0 30px 10px;
  position:relative;border-radius:60px; 
  background:rgba(255,255,255,.2);
  box-shadow:3px 3px 5px rgba(0,0,0,.2); 
  transition:all .5s; overflow:hidden}

.photo {
  width:90px;height:90px;margin:8px;
  border-radius:50%;position:absolute;left:0px;
  overflow:hidden;top:0;border:2px solid white}

.pic{max-width:100%}
.buttonLogo:hover {border:3px solid #5ca321}}
.buttonLogo { 
  width:60px;height:60px;position:absolute;
  right:20px;top:25px;border-radius:50%;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWFzFsPjPC4nesKOSPCUWZJPVVr1NJqzf-rHuH6Ev13x0LQXDoALj_nQbAzR9BBNaeJ4YVpei8Xb99wPFvU50FGaliJOmCgn0N8jun3vwqxRXc3IO1YK-M4UnBZu5CK_rsJB_eiAKD1k/s1600-r/Mari-belajar-mys2010.png) no-repeat center center;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 0 5px rgba(255,255,255,.3),0 0 0 6px rgba(0,0,0,.3);
  transition:all .5s;cursor:pointer}

.name{
  height:60%;width:180px;position:absolute;
  right:80px;padding:20px;font:25px arial;
  color:white;  opacity:0;
  transition:all .5s .5s;top:0;
  text-shadow:1px 2px 3px #111}

.small {font-size:14px; display:block; margin-top:10px; }
.comment {
  width:370px;position:relative;padding:15px;
  font-size:16px;color:rgba(0,0,0,.7);
  border-radius:10px;background:rgba(255,255,255,.4);
  box-shadow:3px 3px 5px rgba(0,0,0,.2);
  opacity:0;transition:all 1s;border-bottom:2px solid #080}

.container:hover{width:400px}
.container:hover .name,.container:hover + .comment{opacity:1}
.comment:before {
  content:'';width:0;height:0;position:absolute;
  bottom:100%;left:2%;
  border-bottom:15px solid rgba(255,255,255,.4);
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:15px solid transparent}
/*shadow*/
p {
  margin: 55px auto 0 auto;
  font-size:150px;
  font-weight:bold;
  font-family: Serif;
  text-align:center;
  color:rgba(0,0,255,0.1);
  text-shadow: 0 1px 0 #000,
               0 2px 0 #111,
               0 3px 0 #222,
               0 4px 0 #333,
               0 5px 0 #444,
               0 6px 1px rgba(0,0,0,1),
               0 12px 2px rgba(0,0,0,1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15),
               0 3px 8px rgba(255,255,255,.2);

}

.illuminated
{
    color: rgba(100,100,255,0.3);
    text-shadow: 0 1px 0 #000,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15),
               0 0px 6px rgba(255,255,255,.3),
               0 8px 8px rgba(255,255,255,.6),
               0 16px 16px rgba(255,255,255,.3),
               0 0 150px rgba(255,255,255,.4),
               0 0 500px rgba(255,255,255,.2);
}
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: #444;
  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: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: Aqua;
background: #222;
border-top: 2px solid #f0f;
z-index: 9999;
} /* GRADIEND end */
<p class="illuminated" id="lbl">
Myscript2010</p>
<div id="tooltip-image">
<div id="tooltip-image">
<div class="container">
<a class="buttonLogo" 
expr:href="data:blog.homepageUrl"></a>
<div class="name">
Myscript2010
<span class="small">Cibeber Cimahi</span> 
</div>
<div class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHLd904FR7TGg2PjSfTLxV-lG75Ijksy73gOgv4AZQiewbIua8_HEjr_ru1VmALqyqHZqgCvY9i7sp8kCkidIGQQXApUJDWN5bx7hGaXT__iV3if5riTOdo2bm6HHeRQ2eS3A6TKaRSm4/s1600-r/Mys2010.jpg" alt="Sule" class="pic">
</div>
<div class="photo">
<img src="https://sites.google.com/site/zudantaufiq/logo-bng-glass.png" alt="Mys2010" class="pic">
</div>
</div>
<p class="comment">
<font size="3" color="green"face="vivaldi"> 
Mari Belajar</font>
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="https://sites.google.com/site/fileblogfor/code/Logo-Hover-Mys2010.css"title="Myscript2010s"><b><font size="2" color="aqua"face="arial">GET IN THE CODE</a></b>
</div>
</header>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>
Cibeber Cimahi</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9mZwE1hxxBIz-tWksu-19Ci_bDAev9Twjk2s3_RJ3Y3DqPeaPkqWJ3nwDgTJ40UNr7AfkjNcUrMrZyk7sjM5SW9zZawfYM2izL8G7E0tKNBQtsGXomZXySgY_AFT2HEx818p1SNdjUrLt/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a>
<script>
function flicker()
{
  $("#lbl").removeClass("illuminated");
  setTimeout(function()
  {
    $("#lbl").addClass("illuminated");
  },50);
}

function triggerFlicker()
{
  //var times = Math.floor(Math.random()*4);
  //for(var i=0; i<times; i++)
  //{
    setTimeout(flicker,/*i**/100);
  //}
  setTimeout(triggerFlicker,Math.floor(Math.random()*2000)/*+(times*100)+(250)*/);
</script>
Penjelasan :
Ganti Link Gambar, Teks dan Link Title Sesuai Keinginan
Sources by. All Sources
Edited by. Mys2010 on Codepen

Memasang Slide Show auto CSS3 A 3 menggunakan animation linear infinite yang menampilkan gambar di webblog secara otomatis tampil bergantian. Berikut cara penerapannya Login ke akun blog klik edit HTML temukan kode ]]></b:skin> gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin> 
dan klik simpan selesai
.my-slideshow, .my-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .my-slideshow:after { content: ''; background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left; } .my-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .my-slideshow li div { z-index: 1000; position: absolute; bottom: 10px; left: 0px; width: 100%; text-align: right; opacity: 0; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s; } .my-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 160px; padding: 0 30px; line-height: 120px; color: rgba(169,3,41, 0.8); } .my-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBN7t_90gNwTiPdyd70-UCTaBbjUK2Up8qmDFlBFL2agw_8UD9JZZAzobAajO15r-blV1PKyuzSAFJjkf03qyNo7kxXCWz5AGGdLtBVdrcgeuzgvFJiDuset3vtEDbLYUMmWmnDOdM7-7/s1600/Sunset+Wallpapers.jpg) } .my-slideshow li:nth-child(2) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRDZe72L80fiagNKl__VXX7MAa6Fsm5tRibOTu8_iRF1U8zi6L4PoPCWlFGylKbcCONiOL6Pzc2zwbDee8dMcCp_FSDvQigpSjXOHC1yeuG-fdi1IEVeLaClI93UvBOaEk9PUC4iRIrtD/s1600/Sunset+Wallpapers+%25286%2529.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlUAU2yt3PYtgEd7fJbQpbGM1h_AW7gvwLIUaGXmFknSY2aBfutRmYbplFT-BCnB5seVlEDEpn_zImhmYFPPQK_mjJLPfQVwPgdaX8L42KE6X3Z8ck9NjzZex8VX73nTsQ_QYioiHPN5-l/s1600-r/Mys2010b.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzrvXaRTDlyZMJeG5E_8DEfaxeHXhdoVx2ZohzhMnmUH0E0ExDQi8J6qynN_xZ_c70cXklhrMLebojvZX5uzjQLq3-0-H2ZqzsHu7oLDlLCcK6-2rl_o18IzGh4kimG3CC74OO9EvMYlU/s1600-r/Landscapes-3-Mys2010.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPc4FY2rhLuSL4DSdULcyqcUA8Mw1PQdRgJlJm9KZbATNeAnimC8UQ5uFkYsCRFYpQrbZbCJ4m5GT-F41DLI8COwoKOidatH64QKhYH5yrx6q-QcvRXe9XOUhzcLU-4bdZwkZ2GnbMlOO/s1600-r/Mys2010a.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVfGnPjavOHHryXplUNKlOKD5SeMpeF1jZNs0VJudZVOLWNPgh4kCFLgILGOy30Kt9Ye-VQRhHBbjSmD9iAllFVVPfLYIhysHYDfaKiE_rmTz-5FFuAFlLh3p-IgtZIX8GLBlBDubABLQ/s1600-r/Landscapes-5-Mys2010.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .my-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-transform: scale(1.05); -webkit-animation-timing-function: ease-out; } 17% { opacity: 1; -webkit-transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; -webkit-transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-transform: scale(1.05); -moz-animation-timing-function: ease-out; } 17% { opacity: 1; -moz-transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; -moz-transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-transform: scale(1.05); -o-animation-timing-function: ease-out; } 17% { opacity: 1; -o-transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; -o-transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-transform: scale(1.05); -ms-animation-timing-function: ease-out; } 17% { opacity: 1; -ms-transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; -ms-transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-out; } 17% { opacity: 1; transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 } } @-webkit-keyframes titleAnimation { 0% { opacity: 0; -webkit-transform: translateX(200px); } 8% { opacity: 1; -webkit-transform: translateX(0px); } 17% { opacity: 1; -webkit-transform: translateX(0px); } 19% { opacity: 0; -webkit-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0; -moz-transform: translateX(200px); } 8% { opacity: 1; -moz-transform: translateX(0px); } 17% { opacity: 1; -moz-transform: translateX(0px); } 19% { opacity: 0; -moz-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0; -o-transform: translateX(200px); } 8% { opacity: 1; -o-transform: translateX(0px); } 17% { opacity: 1; -o-transform: translateX(0px); } 19% { opacity: 0; -o-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0; -ms-transform: translateX(200px); } 8% { opacity: 1; -ms-transform: translateX(0px); } 17% { opacity: 1; -ms-transform: translateX(0px); } 19% { opacity: 0; -ms-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation {  0% {      opacity: 0;      -ms-transform: translateX(200px);  }  8% {      opacity: 1;      -ms-transform: translateX(0px);  }  17% {      opacity: 1;      -ms-transform: translateX(0px);  }  19% {      opacity: 0;      -ms-transform: translateX(-400px);  }  25% { opacity: 0 }  100% { opacity: 0 } } @keyframes titleAnimation {  0% {      opacity: 0;      transform: translateX(200px);  }  8% {      opacity: 1;      transform: translateX(0px);  }  17% {      opacity: 1;      transform: translateX(0px);  }  19% {      opacity: 0;      transform: translateX(-400px);  }  25% { opacity: 0 }  100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .my-Slide  li span{  opacity: 1; } @media screen and (max-width: 1140px) { .my-Slide  li div h3 { font-size: 60px } } @media screen and (max-width: 600px) { .my-Slide  li div h3 { font-size: 50px } }
Kemudian klik entri halaman baru HTML copy kode berikut pastekan kedalam halaman baru tersebut
<ul class="my-slideshow"> <li><span>Gambar 01</span><div> <h3>Myscript2010 </h3> </div> </li> <li><span>Gambar 02</span><div> <h3>Belajar Webblog </h3> </div> </li> <li><span>Gambar 03</span><div> <h3>Full Screen </h3> </div> </li> <li><span>Gambar 04</span><div> <h3>Desainer </h3> </div> </li> <li><span>Gambar 05</span><div> <h3>Copyright:2015 </h3> </div> </li> <li><span>Gambar 06</span><div> <h3>Cibeber Cimahi </h3> </div> </li> </ul>
Penjelasan : Ganti Link gambar dan teks yang berwarna orange sesuai keinginan untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template
Sumber by. Tympanus
Edited   by. Myscript2010

Memasang Slide Show Auto CSS 3 A 2
dengan efek zoom teks yang menampilkan gambar di webblog
secara otomatis tampil bergantian dengan efek zoom teks. Berikut cara penerapannya :
Login ke akun blog klik edit HTML temukan kode  ]]></b:skin>  gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin>  dan klik simpan selesai
.my-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .my-slideshow:after { content: ''; background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left; } .my-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .my-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s; } .my-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; color: rgba(169,3,41, 0.8); } .my-slideshow li:nth-child(1) span { background-image: url(https://wallpaperscraft.com/image/randis_albion_art_girl_sword_feathers_bird_94348_1920x1080.jpg) } .my-slideshow li:nth-child(2) span { background-image: url(https://wallpaperscraft.com/image/dragon_fantasy_art_feathers_98978_1920x1080.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) span { background-image: url(https://wallpaperscraft.com/image/dragon_cave_light_art_94937_1920x1080.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) span { background-image: url(https://wallpaperscraft.com/image/art_nick_deligaris_dragon_rider_mountain_castle_tower_94138_1920x1080.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) span { background-image: url(https://wallpaperscraft.com/image/unicorn_wood_stars_autumn_bird_4771_1920x1200.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) span { background-image: url(https://wallpaperscraft.com/image/unicorn_fight_battle_dragon_3312_1920x1200.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .my-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-transform: scale(1.05); -webkit-animation-timing-function: ease-out; } 17% { opacity: 1; -webkit-transform: scale(1.1); } 25% { opacity: 0; -webkit-transform: scale(1.1); } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-transform: scale(1.05); -moz-animation-timing-function: ease-out; } 17% { opacity: 1; -moz-transform: scale(1.1); } 25% { opacity: 0; -moz-transform: scale(1.1); } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-transform: scale(1.05); -o-animation-timing-function: ease-out; } 17% { opacity: 1; -o-transform: scale(1.1); } 25% { opacity: 0; -o-transform: scale(1.1); } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-transform: scale(1.05); -ms-animation-timing-function: ease-out; } 17% { opacity: 1; -ms-transform: scale(1.1); } 25% { opacity: 0; -ms-transform: scale(1.1); } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-out; } 17% { opacity: 1; transform: scale(1.1); } 25% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0 } } /* Animation for the title */ @-webkit-keyframes titleAnimation { 0% { opacity: 0; -webkit-transform: translateY(200px); } 8% { opacity: 1; -webkit-transform: translateY(0px); } 17% { opacity: 1; -webkit-transform: scale(1); } 19% { opacity: 0 } 25% { opacity: 0; -webkit-transform: scale(10); } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0; -moz-transform: translateY(200px); } 8% { opacity: 1; -moz-transform: translateY(0px); } 17% { opacity: 1; -moz-transform: scale(1); } 19% { opacity: 0 } 25% { opacity: 0; -moz-transform: scale(10); } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0; -o-transform: translateY(200px); } 8% { opacity: 1; -o-transform: translateY(0px); } 17% { opacity: 1; -o-transform: scale(1); } 19% { opacity: 0 } 25% { opacity: 0; -o-transform: scale(10); } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0; -ms-transform: translateY(200px); } 8% { opacity: 1; -ms-transform: translateY(0px); } 17% { opacity: 1; -ms-transform: scale(1); } 19% { opacity: 0 } 25% { opacity: 0; -webkit-transform: scale(10); } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0; transform: translateY(200px); } 8% { opacity: 1; transform: translateY(0px); } 17% { opacity: 1; transform: scale(1); } 19% { opacity: 0 } 25% { opacity: 0; transform: scale(10); } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .my-slideshow li span{ opacity: 1; } @media screen and (max-width: 1140px) { .my-slideshow li div h3 { font-size: 100px } } @media screen and (max-width: 600px) { .my-slideshow li div h3 { font-size: 50px } }
Kemudian klik entri halaman baru HTML
copy kode berikut pastekan kedalam halaman baru tersebut
<ul class="my-slideshow"> <li><span>Gambar 01</span><div> <h3>Myscript2010 </h3> </div> </li> <li><span>Gambar 02</span><div> <h3>Belajar Webblog </h3> </div> </li> <li><span>Gambar 03</span><div> <h3>Full Screen </h3> </div> </li> <li><span>Gambar 04</span><div> <h3>Desainer </h3> </div> </li> <li><span>Gambar 05</span><div> <h3>Copyright:2015 </h3> </div> </li> <li><span>Gambar 06</span><div> <h3>Cibeber Cimahi </h3> </div> </li> </ul>
Penjelasan : Ganti Link gambar dan teks yang berwarna orange sesuai keinginan untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template
Sumber by. Tympanus
Edited   by. Myscript2010

Memasang Slide Show auto CSS 3 A 1 menggunakan kode CSS dan HTML yang menampilkan gambar di webblog secara otomatis tampil bergantian. Berikut cara penerapannya : . Login ke akun blog klik edit HTML  temukan kode ]]></b:skin> gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin>   dan klik simpan selesai
.my-slideshow, .my-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .my-slideshow:after { content: ''; background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left; } .my-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .my-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; color: #fff; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s; } .my-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; } .my-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuo0b_MA0K37HZUHNhH4OA8g9bpzzxJeiEFcptmlFSWbQpB00f7nVE53fFJnIkDUSHzMU4rjZrIQooVNftqkw2hPS-4kkyp2pPuMzrYwYdvnyejT-9NrmXm0KwJ8gjvGTGnBEVP5h2lIcX/s1600-r/spMys2010a1.jpg) } .my-slideshow li:nth-child(2) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKVncapa1cTzVzVP4KeqV2tf_8nW2EYSrA8rJxaEImhNhJHWEK9MzoNIDMlzzXzRJbk0TDfclaI1I3M57NALGF_zVvG-cc7ab1DhJQwUWQwNoFP1fqO1mrZSP1XICcPyBsNmcOxwuJZ3I/s1600-r/spMys2010s3.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9KTHiFAozIQehEIEY0UFC-EJ1ik_i2IsIqDPcxYHhf_ZFqpLqBCN2Y4wkPR6ir-WYlHfjZKs3DDpy9KcpCaX0fXGSPaOMI04MpZOcTXv1HWfLl7oxR7G5n1vd9xoDtAWzozWplpMd2ej0/s1600-r/spMys2010s2.jpg ); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQ6RFG8jWGzAwk8TL3I3NFPozwl3mNow_NtBeGZkYyL2akTx0aNoqmOChUifWs2F8yxrSkq-ib9FMd5y5wUa62yp9ZAeiIYRys6tDhyIJ5hyRzyvtyC2B-6IWzDiCPcXCoxvH6g3qS9uM/s1600-r/01mys2010.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhBZzIHczVoeiCqeIUuGsk08EWUU8UHAmlA5wqEkkwtCCp_Ly_KFo8JlCL_p9WYRncfsFS5OwoVbHU9Q-2xRQRB9i0Y0qCgPs9lHV7bxQ0o3aLGeNQP2o3YUYVDoRJVnjcPj7lXyU38fG/s1600-r/03mys2010.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPuJ8q7CnqVUULvruU1k-ty6ncCLUKTR0lB5Yx5nj4oIbinmOoiu7SYLTX2hm8lie19Ma8dO2g9b2Q1Q6WzLZLU9isB-qFVX_nPqR4XRV_4ficCnNMxg7gN1sLPh3xJ72egoOpoafTr0U/s1600-r/sp.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .my-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } /* Animation for the title */ @-webkit-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .my-slideshow li span{ opacity: 1; } @media screen and (max-width: 1140px) { .my-slideshow li div h3 { font-size: 140px } } @media screen and (max-width: 600px) { .my-slideshow li div h3 { font-size: 80px } }
Kemudian klik entri halaman baru HTML copy kode berikut pastekan kedalam halaman baru tersebut
<ul class="my-slideshow"> <li><span>Gambar 01</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 02</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 03</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 04</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 05</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 06</span><div> <h4>  </h4> </div> </li> </ul>
Penjelasan : Ganti Link gambar dan teks yang berwarna orange sesuai keinginan untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template
Sumber by. Tympanus
Edited   by. Myscript2010

Memasang kode Audio Player With Playlist
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan 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
<link rel='stylesheet prefetch' href='http://www.mp3mixtape.us/iframes/css/mediaelementplayer.min.css'>
<style type="text/css">
/* Backgroud*/
body {
  
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxDPyCFpHp6JXaDxqWb-kUz48bkbwNDR10Qea-93QCQbhf2Tj63CWLA46UVNupp0sfNqqVD4l_ae9R7zi8z0fTLffISK1ZYuKJOqEpfLpt20TCXU_uNoKqT0lKhrz0Td7PxInteVMQ-M8G/s1600-r/Home-Theater-speaker-guide-mys2010.jpg);background-size:cover;background-repeat:no-repeat;margin:auto;}

      /* 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: -16px -16px;
}
.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: 15px;
   overflow: hidden;
   
 cursor: pointer;
 
 display: block;
 padding: 2px 2px 2px 2px;
  
}
.mejs-playlist li:hover {
  color: #b70000;
  font-weight: bold;
}
.mejs-playlist li.current {
  color: #0afc55;
  font-weight: bold;
}
 </style>
<p align="center">
<audio id="mejs" type="audio/mp3" controls>
<source src="https://sites.google.com/site/fileblogfor/code/Exel-glory-night-mys2010s.mp3" title="01 - Exel - Glory Night - Temple of the King "></Source>
<source src="https://sites.google.com/site/fileblogfor/code/Metallica-Fuel-Memory-Nothing-mys2010s.mp3" title="02 - Metallica-Fuel-Memory-Nothing"></Source>
<source src="https://sites.google.com/site/fileblogfor/code/Scorpion-When-the-smoke-always-stiil-love-mys2010s.mp3" title="03 - Scorpion-When-the-smoke-always-stiil-love">
</Source>
</audio>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</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>
 $(function(){
        $('video,audio').mediaelementplayer({
                loop: true,
          shuffle: true,
          playlist: true,
   playlistposition: 'bottom',
   audioHeight: 30,
          features: ['playlistfeature', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'playlist', 'current', 'progress', 'duration', 'volume'],
            keyActions: []
        });
    });
</script>
Penjelasan :
Tambahkan code Top Title Header jika diperlukan, copy code berikut :
/*Top Title Header*/
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #000;
  border-bottom: 3px solid #dad;
}
Pastekan dibawah code :
<style type="text/css">
Kemudian copy code berikut :
<header>
<a href="https://sites.google.com/site/fileblogfor/code/Audio-Player-Mp3-with-Playlist-mys2010s.css" title="Myscript2010"><font size="2" color="aqua"face="arial"> GET IN THE CODE AUDIO PLAYER</a>
</header>
Pastekan dibawah code :
</audio>
Selanjutnya
ganti link gambar seta link mp3 sesuai keinginan,
klik pratinjau untuk melihat hasil dan klik perbarui selesai

Memasang kode Wallpaper Light Gallery
Code ini menampilkan gambar Slide yang dapat di Zoom. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan 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-color: #152836;
  color: #eee;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.small {
  font-size: 11px;
  color: #999;
  display: block;
  margin-top: -10px
}
.cont {
  text-align: center;
}
.page-head {
  padding: 0px 0;
  text-align: center;
}
.page-head .lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 50px;
  margin-top: 0;
}
.btn {
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 0px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}
.btn-lg {
  border-radius: 2px;
  font-size: 18px;
  line-height: 1.33333;
  padding: 0px 0px;
}
.btn-primary:hover {
  background-color: #fff;
  color: #152836;
}
.btn-primary {
  background-color: #152836;
  border-color: #0e1a24;
  color: #ffffff;
}
.btn-primary {
  border-color: #eeeeee;
  color: #eeeeee;
  transition: color 0.1s ease 0s, background-color 0.15s ease 0s;
}
.page-head h1 {
  font-size: 42px;
  margin: 0 0 20px;
  color: #FFF;
  position: relative;
  display: inline-block;
}
.page-head h1 .version {
  bottom: 0;
  color: #ddd;
  font-size: 11px;
  font-style: italic;
  position: absolute;
  width: 58px;
  right: -58px;
}
.mys2010-gallery > ul {
  margin-bottom: 0;
  padding-left: 15px;
}
.mys2010-gallery > ul > li {
  margin-bottom: 15px;
  width: 180px;
  display: inline-block;
  margin-right: 15px;
  list-style: outside none none;
}
.mys2010-gallery > ul > li a {
  border: 3px solid #FFF;
  border-radius: 3px;
  display: block;
  overflow: hidden;
  position: relative;
  float: left;
}
.mys2010-gallery > ul > li a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}
.mys2010-gallery > ul > li a:hover > img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}
.mys2010-gallery > ul > li a:hover .mys2010-gallery-poster > img {
  opacity: 1;
}
.mys2010-gallery > ul > li a .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}
.mys2010-gallery > ul > li a .mys2010-gallery-poster > img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}
.mys2010-gallery > ul > li a:hover .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}
.mys2010-gallery .justified-gallery > a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}
.mys2010-gallery .justified-gallery > a:hover > img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}
.mys2010-gallery .justified-gallery > a:hover .mys2010-gallery-poster > img {
  opacity: 1;
}
.mys2010-gallery .justified-gallery > a .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}
.mys2010-gallery .justified-gallery > a .mys2010-gallery-poster > img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}
.mys2010-gallery .justified-gallery > a:hover .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}
.mys2010-gallery .video .mys2010-gallery-poster img {
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  opacity: 0.8;
  width: 48px;
}
.mys2010-gallery.dark > ul > li a {
  border: 3px solid #04070a;
}
</style>
<div class="cont">
<div class="page-head">
<h1>
<font =" color="blue"face="arial"> 
JQUERY LIGHT GALLERY
<span class="version">V1.2.0</span></h1>
<p class="lead">
A lightweight, customizable, modular, responsive, lightbox gallery plugin for jQuery.</p>
<a href="http://codepen.io/Myscript2010/" target="_blank" title="VIEW">CODEPEN</a></div>

<div class="mys2010-gallery">
<ul id="lightgallery">
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vwXQU_JHcrx9q7bdkKUC7KxPy43V8wM3AxAy-OOgo7eNqiLx04dbymR3BsI9XheXMxkvrrruWD5rNZfHLfVP7Ivg-haBe3Zxnuz9wWKXHs6ou-WYTvYsQpSGxtdAcCsQbyekFd5eZqCL/s1600-r/sule.png  480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vwXQU_JHcrx9q7bdkKUC7KxPy43V8wM3AxAy-OOgo7eNqiLx04dbymR3BsI9XheXMxkvrrruWD5rNZfHLfVP7Ivg-haBe3Zxnuz9wWKXHs6ou-WYTvYsQpSGxtdAcCsQbyekFd5eZqCL/s1600-r/sule.png  800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vwXQU_JHcrx9q7bdkKUC7KxPy43V8wM3AxAy-OOgo7eNqiLx04dbymR3BsI9XheXMxkvrrruWD5rNZfHLfVP7Ivg-haBe3Zxnuz9wWKXHs6ou-WYTvYsQpSGxtdAcCsQbyekFd5eZqCL/s1600-r/sule.png  480"
      data-sub-html="<h4>MY LOGO</h4>
<p>
Myscript2010s Learn Editing Script Cibeber Cimahi.</p>
">
<a href="">
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFktHIUfGt3iKiZAYP5FpeKuy0Oo-r2ZqN3JPJAUQV4I4fkOfiP6BahEZdFizemUeoos8IetcGjZLG98_iYZ5TlLPwlzRvUh9ocr8hTUUKbmG5omclrxoURh0qoWYj_80ZNHpVv37UV3Jb/s1600-r/sule1.png">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg 375, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg 480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg 800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg"
      data-sub-html="<h4>BEAUTIFUL</h4>
<p>
A beautiful Girl could it be mine</p>
">
<a href=""> 
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixh-Qe4kk8kaDywwHKSBf7YR4pMSQEsEQiQPDewPq-Swcu3CVSzab3T9bHMpWe8ZmuFVPe3gjjk_Gm-gE3rz7N3cB1OLHRpUkIpeFabyA1BLNNKxh9suk5n0h5zs8IqKPYLa1AcUt1e4n/s1600-r/wanita1-mys2010s.jpg">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQq7oyzokHEnSo8gjLrMjqNqAyLIN6fnXTpf1ZNsFE20ebxU8RpWdfvuVYzVAfzoweGtuZJRQuajVVPTLYQB7somp_MqUG4sL91556cRhPzpGwSsIU2Fv7jVgN5EO250LhO0dZGqtm56S9/s1600-r/Mellisa-Clarke-1920x1200-mys2010.jpg 480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQq7oyzokHEnSo8gjLrMjqNqAyLIN6fnXTpf1ZNsFE20ebxU8RpWdfvuVYzVAfzoweGtuZJRQuajVVPTLYQB7somp_MqUG4sL91556cRhPzpGwSsIU2Fv7jVgN5EO250LhO0dZGqtm56S9/s1600-r/Mellisa-Clarke-1920x1200-mys2010.jpg 800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQq7oyzokHEnSo8gjLrMjqNqAyLIN6fnXTpf1ZNsFE20ebxU8RpWdfvuVYzVAfzoweGtuZJRQuajVVPTLYQB7somp_MqUG4sL91556cRhPzpGwSsIU2Fv7jVgN5EO250LhO0dZGqtm56S9/s1600-r/Mellisa-Clarke-1920x1200-mys2010.jpg"
      data-sub-html="<h4>MELLISA</h4>
<p>
This girl looks pretty but he is not mine.</p>
">
<a href="">
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgikPN1Jos-Mh6OphzsxD16NY6ikmOBfKjCro437H9L0GSedAMniv9CaIGK4WRJp1M3RNKVZvo4aeMiGk2LlBmil6_UeQK51w1WrQ-U5PKvRhxI_AhZxMyKy1bv7AaJodeDE1ljLadNd5ms/s1600-r/yayang1-mys2010.png">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKZAihiQSl5dh7yp1iEmUU81k-TL_O8QQZjDtCLNTg-uFVBWDaqt5CVNrfy6cP5w5fIra8dYd0FcJqKNFfYx7TdoZbW_5JHOE3Ua9dojYBvBd6ESC9k1KxmglyHifG5q2OXWArSvW41nz/s1600-r/marta-misiak-2560x1600-mys2010.jpg 480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKZAihiQSl5dh7yp1iEmUU81k-TL_O8QQZjDtCLNTg-uFVBWDaqt5CVNrfy6cP5w5fIra8dYd0FcJqKNFfYx7TdoZbW_5JHOE3Ua9dojYBvBd6ESC9k1KxmglyHifG5q2OXWArSvW41nz/s1600-r/marta-misiak-2560x1600-mys2010.jpg 800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKZAihiQSl5dh7yp1iEmUU81k-TL_O8QQZjDtCLNTg-uFVBWDaqt5CVNrfy6cP5w5fIra8dYd0FcJqKNFfYx7TdoZbW_5JHOE3Ua9dojYBvBd6ESC9k1KxmglyHifG5q2OXWArSvW41nz/s1600-r/marta-misiak-2560x1600-mys2010.jpg"
      data-sub-html="<h4>MARTA MISIAK</h4>
<p>
Pretty girl dreams</p>
">
<a href="">
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4iZG0QlOQRhrT7SytQIRDU0p7mRJzc3YF7fMEvzGO6s-6X412xLgNMPSNoBqP6tSiPGW2Yl3Im3yJjovpFsl8BegfDOpqqsSXl6Eiw7eQlOsdNlXOjU6FlSnmldQM5YYIfUNstmmyHx0Q/s1600-r/marta-misiak-2560x1600-mys2010.jpg">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
</ul>
<span class="small">Click on any of the images to see lightGallery</span>
</div>
</div>
<link rel='stylesheet prefetch' href='http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.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='https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lightgallery.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-fullscreen.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-autoplay.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-zoom.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-hash.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-pager.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/external/jquery.mousewheel.min.js'></script>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>
<script>
      $(document).ready(function () {
    $('#lightgallery').lightGallery({ pager: true });
});      
    </script>
Penjelasan :
Tambahkan code Top Title Header jika diperlukan. Copy code brikut :
/*Top Title Header*/
html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
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: #f0f;
  border-bottom: 3px solid #dad;
} 
Pastekan dibawah code :
<style class="Mys2010-styles">
Kemudian copy code berikut :
<header> 
<div class="Top Title Header">
<p align="center">
<a href="http:// Link Title" title="Myscript2010"><font size="3" color="#dad"face="arial">MUSIC</a> 
</header>
Pastekan diatas Code :
<link rel='stylesheet prefetch' href='http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css'>
Selanjutnya Ganti Link gambar, link title
dan edit code warna sesuai keinginan, klik pratinjau untuk melihat hasil klik perbarui selesai