Mys2010 on Codepen

Memasang Kode Animated Merry Christmas dan Little UI For new project
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: #111;
}
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: #111;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px blue;  
font-size:  11px;
background:  #222;
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%, #555 50%, transparent 90%); 
}

.user_box {
background: 
rgba(0, 0, 0, 0.16);
height:  45px;
position: absolute;
width: 200px;
left: 10px;
top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
}
.user_img {
height: 34px;
overflow: hidden;
position: absolute;
top: 5px;
width: 34px;
left: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
    z-index: 999;
} 
.user_img img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
} 
.notif {
position: absolute;
right: 17px;
top: 5px;
height: 12px;
width: 9px;
background: 
rgba(255, 255, 255, 0.1);
padding: 9px 12px 9px 16px;
font-weight: 800;
color: 
white;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.2);
text-shadow: 1px 1px 1px 
rgba(0, 0, 0, 0.5);
}
.user_button {
position: absolute;
font-size: 10px;
color:#111;
background: rgb(0,115,0); 
text-decoration:none;
padding: 1px 15px 3px 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: inset 1px 1px 0 0 
rgba(255, 255, 255, 0.3), inset -1px -1px 0 0 
rgba(0, 0, 0, 0.3), 0 0 3px 0 
rgba(0, 0, 0, 0.5);
top: 23px;
left: 65px;
text-shadow: 1px 1px 0 
yellow;
}
.quicknavi {
position: absolute;
left: 220px;
top: 10px;
}
.quicknavi li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
float: left;
background: 
rgba(0, 0, 0, 0.16);
margin-right: 10px;
}
.quicknavi li a {
padding: 16px 15px 16px 14px;
display: inline-block;
color: 
#A7C4E2;
text-decoration: none;
font-size: 13px;
text-shadow: 1px 1px 0px 
rgba(0, 0, 0, 0.4);
}
.quicknavi select {
border: 1px solid 
#2E5F8F;
padding: 6px;
margin-right: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
}

.player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 210px;
    height: 100px;
    background: ##;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #F0FFF0;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    height: 50px;
    width: 50px;
    background: ##;
    border-radius: 50%;
    float: left;
    position: relative; cursor: pointer;
    color: #FFD700;}
.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: #8A2BE2;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #FF0000;
    margin: 0 10px;
    position: relative;
    top: -10px;
}.player .volume-knob {
    background: #B20000;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}

.lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -35px 0 0 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}
.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding:  0;
  display: block;
  width: 12px;
  height: 28px;
  border-radius: 50%;
  margin: 12px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.66667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
          animation-name: flash-1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.lightrope li:nth-child(2n+1) {
  background: cyan;
  box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
          animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}
.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.66667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
          animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
}
.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
}
.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
}
.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 9.33333px;
  border-radius: 3px;
  top: -4.66667px;
  left: 1px;
}
.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.66667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}
.lightrope li:last-child:after {
  content: none;
}
.lightrope li:first-child {
  margin-left: -40px;
}

@-webkit-keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.66667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}

@keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.66667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
@-webkit-keyframes flash-2 {
  0%, 100% {
    background: cyan;
    box-shadow: 0px 4.66667px 24px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@keyframes flash-2 {
  0%, 100% {
    background: cyan;
    box-shadow: 0px 4.66667px 24px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@-webkit-keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.66667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}
@keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.66667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}
​</style>

<ul class="lightrope">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<div align="center">
<canvas id="c" width="446" height="446"></canvas>

<audio id="player">
<source src="https://sites.google.com/site/code6916/lagu/Carol-mys2010.mp3" type="audio/mpeg"></source>
</audio>

<header> 
<a href="http://myscript2010s.blogspot.co.id"target="_blank" title="Myscript2010s"><span style="color:#f0f"><b>LET'S STUDY</b></a>
<div class="top_head">
</header> 

<div class="ap" id="ap">
<div align="center">
<h2>
<div class="user_box">
<div class="user_img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifkZd1FDvIRI_uEKLDjWtzlPRjSpTGGpZMSgHuU44H6v2X57XUaHKLDh9zcJCc2S8RlCDpBqqT-nGRN4FpcjvdQKXNFx2rehjDEub7XxzlKYN0x9FgjUBmaDCPXOa9TNc16UYzbBw0Cdc/s1600-r/1-Y.png" />
</div>

<h1>
Myscript2010</h1>
<a href="https://plus.google.com/u/0/101254379497511200564/posts"target="_blank" title="Myscript2010s" class="user_button">Gg Pluss</a>
<div class="notif">
<span class="">07. </span>
</div>
</div>

<!-- Quicknavi box -->
<div class="quicknavi">
<ul>
<li><a href="https://id.pinterest.com/myscript2010/mys2010"target="_blank" title="Myscript2010s">Pinterest</a></li>
<li><a href="http://codepen.io/Myscript2010"target="_blank" title="Myscript2010s">Codepen</a></li>
<li><a href="https://Link Download"title="Download code after modification">Download</a></li>
</li></ul></2></a> 

<js Menu>
<link rel='stylesheet prefetch' href='//codepen.io/assets/reset/reset.css'><script src='//codepen.io/assets/libs/prefixfree.min.js'></script></JS Menu End>
<js Music>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet prefetch"></link>
<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> </js Music>

<script>
/**
* 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>

<script>var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
n = [];
M = Math;
Q = M.random;
c.height = c.width = W = t = 446;
J = [];
U = 16;
T = M.sin;
function F() {
    a.clearRect(0, 0, W, W);
    for (A = T(t - 11), i = 0; i < O; L.b = L.z * A - L.x * T(t)) {
        if (window.CP.shouldStopExecution(1)) {
            break;
        }
        (L = J[i++]).a = L.x * A + L.z * T(t);
    }
    window.CP.exitedLoop(1);
    J.sort(function (a, b) {
        return a.b - b.b;
    });
    for (a.font = '60px Impact', a.fillStyle = '#333', i = 0; i < O; a.drawImage(n[(L = J[i++]).n], 207 + L.a >> 0, 150 + L.y >> 0))
        if (i == O >> 1)
            a.fillText('Merry Christmas', U, 396);
    window.CP.exitedLoop(1);
    t += 0.02;
    setTimeout(F, 9);
}
for (O = k = 0; k < 12; k++)
    with (n[k] = c.cloneNode(0)) {
        width = height = 32;
        with (getContext('2d')) {
            if (k > 9) {
                for (i = 0; i < 99; i += U) {
                    if (window.CP.shouldStopExecution(2)) {
                        break;
                    }
                    beginPath();
                    fillStyle = V + (147 + i) + ',' + (k % 2 ? 128 + i : 0) + ',' + i + ',.5)';
                    arc(U - i / 48, 24 - i / 32, 8 - i / U, 0, M.PI * 2, 1);
                    fill();
                }
                window.CP.exitedLoop(2);
            } else
                for (i = W; x = T(i) * U, y = Q() * 32 - U, E = x - 10, D = y - 12, B = M.sqrt(E * E + D * D), R = (70 + B * 4) * (L = k / 9 + 0.8) >> 1, i--;)
                    if (x * x + y * y < 256) {
                        strokeStyle = (V = 'rgba(') + R + ',' + (R + (B * L >> 2)) + ',40,.1)';
                        beginPath();
                        moveTo(U + x / 2, U + y / 2);
                        lineTo(U + x, U + y);
                        stroke();
                    }
        }
    }
window.CP.exitedLoop(2);
for (j = 200; j--;)
    for (H = j + M.sqrt(j) * 25, L = H / U, R = Q() * W, y = H / 2 - 99, x = z = i = 0; V = 3, S = i / L * 20, i < L; i++, x += T(R) * V + Q() * 6 - 3, z += T(R - 11) * V + Q() * 6 - 3, y += Q() * 8 - 4, J[O++] = {
            x: x,
            y: y,
            z: z,
            n: S >> 1
        })
        if (i + 1 >= L && Q() > 0.8)
            V = 9, S += Q() * 4;
window.CP.exitedLoop(2);
F();
 
</script>

Menu code by. Bartos La
Audio Code by. Cartoonistarif

Animated Merry Christmas by. JFarrow
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy & paste you canDownload Here Rotating Border