Chop Slider Auto adalah slider yang menapilkan
beberapa slide  menarik dan tempaltenya pun harus sudah mendukung slide tersebut. berikut cara penerapannya : 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/AVvXsEjwHy3bSUmgCTWLhhYIWL-iLwvu-Ks4pcu76gryPSjKEW_0VPYfklp71SouJr30SYzdQxBKLGCSu4oiGbsneRVDuTwMBUMgCoFWi4UnM-A01H3ObfFCSjTNzojAr_ITJhofoddWykaI2vSN/s1600-r/Darkwood-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:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
}
.wrapper {
    position: relative;
    margin: 0 auto 15px;
    width: 500px;
    height: 350px;
    display: block;
    padding: 5px;
    background: #;
    z-index: 2
    }
#slide-prev, #slide-next {
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    padding: 15px;
    bottom: 50%;
    position: absolute;
    z-index: 4
    }
#slide-prev {
    left: 20px;
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTMJG2Utmk3HoXvQ5Uvi91Kg6jQayshU0Xx3U1CudxMXMgyROIOTnXX__Ylf2z4bbVRhaOr0Qnx4WoamdrFsJsjfBn_tfzDyjV3Gkfa9UTOyXWqZUVvC46TBYunvVIuIKxNQvcwxYY5s/s1600/arrow_left.png) no-repeat center
    }
#slide-next {
    right: 20px;
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBMiKMQX541HWaELAz8nkBOeUIU3ZWviOHmVPjFIKrfXMiSOJwLGAyi91C-hF0Qzh-mFGgnkTEDX0VJtMVruMc33juQLSjktj5ZOUYWwzgsZvW2bjD1QZbgWf1NqU4X3edptqYxgsA5Ms/s1600/arrow_right.png) no-repeat center
    }

#slider {
    width: 500px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    display: block
    }

#slider img {
    width: 100%;
    height: 100%
    }

.slide {
    display: none
    }

.cs-activeSlide {
    display: block
    }

.slide-descriptions {
    display: none
    }

.caption {
    background: rgba(238, 238, 238, 0.83);
    color: #333;
    display: none;
    padding: 5px 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    z-index: 3;
    font: normal 13px/20px Arial, sans-serif
    }
</style> 
<div class="wrapper">
<a href="https://www.blogger.com/blogger.g?blogID=2797383530765388234#" id="slide-next"></a>
<a href="https://www.blogger.com/blogger.g?blogID=2797383530765388234#" id="slide-prev"></a>
<div id="slider">
<div class="slide cs-activeSlide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnvzKHLiY-Xp-FmWB3kUTkyKqbj5Vr-zI9tuGn8JU20K6b5gYotmrMdbocn4-rdLVwNMCzcK758C1_b5u_BJWfQU7TZmGnFKxN95LKfgxOnpdTI9Qe0Dtz1URqZv6XUkRLZHplcTCfoT8k/s1600-r/Scottadkins_Mys2010s2.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcnYo_cziJ-IvkB-yg8PHOTgkTqHy6dTrt9kOugan6dwmqfQtIyVs8TfDL2cDcReU6iiLRpIVstiTYrp11yW_Q-CUN8DmZ2Rt9wRZZzggghQSXfuErRevEQaNAOlpMwiH-zggCzy4tv6v/s1600-r/Scottadkins_Mys2010s1.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3bxRsamMz0fdw_56kKGfy9Packtvdve85USjWBb2SjKpHA0DgAw3bdJ08deWkpRuGY98RtiKabOqxrU9GbNh-hMz2CPuaio7oH1amunZFB2YI7dx3uoAnDwLVKhmyc_nyL_U8c9My2mr/s1600-r/Scottadkins_Mys2010s.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2arQH0ziw2LVrnzgWyDTJvR5DrYMifD6N6vdzMla6nGM0QN2L-zSNuS1LAHYZplRfDJbMCXpXOCxeIwR0RJRvCTJPncR_2XRmBWiiSDSa8nkbXMs-BlbNP-QJ25ayrLKUpnzwHp2kKJOX/s1600-r/Scottadkins_Mys2010.jpg" /></div>
</div>
<div class="slide-descriptions">
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=P6fKD_U8iGs" target="_blank" title="watch movies on youtube">Undisputed III</a>&nbsp;Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=GIQWR7qQzvQ" target="_blank" title="watch movies on youtube">Close Range</a>&nbsp;Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=t03wigE8GK0" target="_blank" title="watch movies on youtube">Undisputed II</a>&nbsp;Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=P6fKD_U8iGs" target="_blank" title="watch movies on youtube">Undisputed III</a>&nbsp;Youtube</div>
</div>
<div class="caption">
</div>
</div>
</div>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/code6916/file/Chop-Slider-mys2010s.css"title="Myscript2010s"> 
<h2>
<font size="1" color="blue"face="arial">DOWNLOAD CODE</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id/2016/04/chop-slider-auto.html"title="Myscript2010s"><b><font size="1" color="orange"face="arial">LET'S STUDY</b>
</div>
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-chopslider-2.2.0.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-cstransitions-1.2.js"></script>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script>
<script>jQuery(function () {
    $('#slider').chopSlider({
        slide: '.slide',
        nextTrigger: 'a#slide-next',
        prevTrigger: 'a#slide-prev',
        hideTriggers: true,
        sliderPagination: '.slider-pagination',
        useCaptions: true,
        everyCaptionIn: '.sl-descr',
        showCaptionIn: '.caption',
        captionTransform: 'scale(0) translate(-600px,0px) rotate(45deg)',
        autoplay: true,
        autoplayDelay: 3000,
        t3D: csTransitions['3DFlips']['random'],
        t2D: [
            csTransitions['multi']['random'],
            csTransitions['vertical']['random']
        ],
        noCSS3: csTransitions['noCSS3']['random'],
        mobile: csTransitions['mobile']['random'],
        onStart: function () {
        },
        onEnd: function () {
        }
    });
}); 
</script>
Source Code by. Irvan Efendy
Design code is edited by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload Here Chop Slider Auto

Memasang kode Transparent Background
Untuk menerapkan kode tersebut Login ke akun blog klik tombol blog baru 
buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini  Get Blank Template  
edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
body {#);color:red;height:100%;overflow:hidden;}

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

/* 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: #333;
background: #000;
border-top: 2px solid #f0f;
z-index: 9999;
}
 /*end*/
body
{
  width: 95%; 
  height:100%;
  margin:0em 5%;
  background-color:#dad;
  background-image: url("http://vignette3.wikia.nocookie.net/scarfheroes/images/c/c3/Fancy-Swirl-Pattern-Grey-White-PNG.png/revision/20151009044909");
  background-position: center bottom;
  animation: animatedBackground 30s linear infinite;
  /* Safari and Chrome: */
   
-webkit-animation: animatedBackground 30s linear infinite;
}


@keyframes animatedBackground 
{
  from { background-position: 0 100%; }
  to { background-position: 100% 100%; }
}
@-webkit-keyframes  animatedBackground 
{
  from { background-position: 0 100%; }
  to { background-position: 100% 100%; }
}
#content
{
  position:fixed;
  top:5em;
  height:1em;
  width:19em;
  background-color:rgba(1,1,1,0.5);
  color:white;
  padding:2em;
  border-bottom-right-radius: 5em;
  -webkit-border-bottom-right-radius: 5em;
   border-top-left-radius: 5em;
  -webkit-border-top-left-radius: 5em;
}
/*end*/
.blurred-bg.tinted {
  background: rgba(4,000,000, .4);
   
}
      .box {
  width: 500px;
  height: 300px;
  left: -webkit-calc( 50% - 250px );
  top: 20%;
  position: absolute;
  border-radius: 5px;
  -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  text-align: center;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  display: flex;
  transition: box-shadow .3s ease;
}
.box:active {
  cursor: move;
  -moz-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}
.box .content {
  margin: auto;
}

h1, h2, a, p {
  color: white;
  font-weight: 100;
}
.tinted h1, .tinted h2, .tinted a, .tinted p {
  color: black;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}

h2 {
  font-size: 14px;
}

p {
  margin: 20px;
}
p.related {
  text-transform: uppercase;
  font-weight: 700;
  color: #444;
}
p.related a {
  font-weight: 700;
  text-decoration: none;
}
p.related a:hover {
  text-decoration: underline;
}</style>
<div id="box1" class="box blurred-bg tinted">
<div class="content">
<h1>
Transparent Background</h1>
<h2>
Edited By <a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html" rel="follow" target="_blank">Myscript2010</a></h2>
<p>
Drag this box to move around</p>
<p class="related">
See also: <a href="http://codepen.io/Myscript2010/pens/popular/" target="_blank">Code in the edit codepen</a></p>
</div>
</div>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/laguhiburan/file/Transparent-Background-with-background-running-Mys2010.css"title="Myscript2010s"> 
<h2>
DOWNLOAD CODE</2></a>  
</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="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html" target="_blank"title="Myscript2010s"><b>LET'S STUDY</b>
</div>
</header>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script> 
<script>$(function () {
    $('.box').draggable();
}); 
</script>
Blurred Background by. Rian Ariona
Background Example Code by. Vollnixx
Design code is edited by. by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload Here Transparent-Background

Memasang kode CSS3 Animated Clouds with Glass Quote
Code ini menggunakan CSS dan HTML serta Js. 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 {);color:#111;height:100%;overflow:hidden;}
body {
  background: #f0f;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}
 /*end*/
.clouds_one {
  background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_one.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_one 50s linear infinite;
  -moz-animation: cloud_one 50s linear infinite;
  -o-animation: cloud_one 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}
.clouds_two {
  background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_two.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}
.clouds_three {
  background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}
@-webkit-keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}
@-webkit-keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1);
    left: 0% bottom: 250px;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}
@-webkit-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-webkit-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-webkit-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}
@-moz-keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1);
    left: 0% bottom: 250px;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}
@-moz-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
main {
  margin: 70px auto;
  position: relative;
  padding: -60px 5px;
   background: rgba(4,111,111, .4);
  font-size: 20px;
  font-family: 'agency fb', serif;
  line-height: -1.5;
  border-radius: 40px;
  width: 50%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}
main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  z-index: -1;
}
blockquote {
  font-style: italic;
}
cite {
  font-style: normal;
  font-size: 20px;
}
<body>
<div class="sky">
<div class="moon">
</div>
<div class="clouds_one">
</div>
<div class="clouds_two">
</div>
<div class="clouds_three">
</div>
</div>
<main>
<blockquote>
<center>
About Me</center>
<cite>
&mdash;" Hey there, I MyScript 2010. 
&mdash; Thank you for visiting my site!
&mdash; I’m a stay-at-home dad
&mdash; my address in Cibeber cimahi Bandung West Java, 
&mdash; hopefully article available on the Website can be useful and add to knowledge."</cite>
&mdash; <b><font size="5" color="#111"face="vivaldi"> Sulaeman Mys2010</b> 
</blockquote>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="http://LINK DOWNLOAD "title="Myscript2010s"> 
<h2>
DOWNLOAD CODE</2></a>  
</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="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html"title="Myscript2010s"><b>LET'S STUDY</b>
</div>
</header>
CSS3 Animated Clouds by. Montana Flynn
Frosted Glass Quote Code by. Joni Trythall
Design code is edited by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload Here Clouds Glass Quote 

Memasang kode Animasi Sosial Css3 with firework
Code ini menggunakan CSS dan HTML serta Js. 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="styles">
body {background-image: url(http://cdn.pcwallart.com/images/red-color-gradient-wallpaper-1.jpg);color:red;height:100%;overflow:hidden;}
body{background:;font-family:Arial,Helvetica,sans-serif;color:#666666;height:100%;} 
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-khtml-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.navigation{padding:20px;background-color:#999999;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#bfbfbf), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #bfbfbf 0%, #999999 100%);background-image:-moz-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-o-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-khtml-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-ms-linear-gradient(top, #bfbfbf 0%, #999999 100%);background-image:linear-gradient(top, #bfbfbf, #999999 100%);background-repeat:repeat-x;}.navigation .container{padding:8px;}
.navigation .nav_outer{background-color:#cccccc;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#808080), color-stop(100%, #cccccc));background-image:-webkit-linear-gradient(top, #808080 0%, #cccccc 100%);background-image:-moz-linear-gradient(top, #808080, #cccccc 100%);background-image:-o-linear-gradient(top, #808080, #cccccc 100%);background-image:-khtml-linear-gradient(top, #808080, #cccccc 100%);background-image:-ms-linear-gradient(top, #808080 0%, #cccccc 100%);background-image:linear-gradient(top, #808080, #cccccc 100%);background-repeat:repeat-x;padding:1px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;}
.navigation ul{background-color:#a6a6a6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#999999), color-stop(100%, #a6a6a6));background-image:-webkit-linear-gradient(top, #999999 0%, #a6a6a6 100%);background-image:-moz-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-o-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-khtml-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-ms-linear-gradient(top, #999999 0%, #a6a6a6 100%);background-image:linear-gradient(top, #999999, #a6a6a6 100%);background-repeat:repeat-x;padding:8px 0 8px 8px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;overflow:hidden;}
.navigation li{background-color:#fff;font-size:13px;line-height:16px;margin-right:8px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-khtml-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-o-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-khtml-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-ms-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);margin-bottom:8px;}
.navigation li:last-child{margin-bottom:0;}
.navigation a{text-decoration:none;display:block;text-align:center;padding:2px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-khtml-border-radius:3px;-ms-border-radius:3px;border-radius:3px;font-weight:bold;color:#555;text-shadow:1px 1px rgba(255, 255, 255, 0.4),-1px -1px rgba(0, 0, 0, 0.075);}
.navigation li:not(.active){position:relative;top:-2px;-webkit-transition:top 0.1s linear;-moz-transition:top 0.1s linear;-o-transition:top 0.1s linear;-khtml-transition:top 0.1s linear;-ms-transition:top 0.1s linear;transition:top 0.1s linear;}.navigation li:not(.active):hover{top:0;}
.navigation li:not(.active) a{-webkit-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-o-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-khtml-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-ms-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-webkit-transition:box-shadow 0.1s linear;-moz-transition:box-shadow 0.1s linear;-o-transition:box-shadow 0.1s linear;-khtml-transition:box-shadow 0.1s linear;-ms-transition:box-shadow 0.1s linear;transition:box-shadow 0.1s linear;color:#666666;}.navigation li:not(.active) a:hover{-webkit-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-moz-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-o-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-khtml-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-ms-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);color:#555;}
.navigation span{display:block;padding:5px 10px;background-color:#ffffff;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#dddddd), color-stop(100%, #ffffff));background-image:-webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);background-image:-moz-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-o-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-khtml-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);background-image:linear-gradient(top, #dddddd, #ffffff 100%);background-repeat:repeat-x;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;background-color:#fff;}
@media only screen and (min-width:420px){.main{padding-top:48px;} .navigation{position:absolute;top:0;left:0;width:100%;}.navigation li{margin-bottom:0;} .navigation ul{padding-right:8px;} .navigation li{display:inline-block;vertical-align:top;width:18%;margin-right:1.25%;} .navigation li:last-child{margin-right:0;}}/*end*/
#social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }</style> 
<center>
<div class="navigation">
<div class="nav_outer">
<ul>
<li class="active">
<h2>
<a href="http://codepen.io/Myscript2010/pen/XXqZPL"target="_blank" title="Let's Share"><span>CODEPEN</span></a></h2>
</li>
<li>
<h2>
<a href="https://gist.github.com/Myscript2010/8e36ce09eddd038156d5"target="_blank" title="Let's Share"><span>GITHUB</span></a></h2>
</li>
<li>
<h2>
<a href="https://jsfiddle.net/user/dashboard/"target="_blank" title="Let's Share"><span>JSFIDDLE</span></a></h2>
</li>
<li>
<h2>
<a href="https://dribbble.com/Myscript2010s"target="_blank" title="Let's Share"><span>DRIBBBLE</span></a></h2>
</li>
<li>
<h2>
<a href="http://demoshow-mys2010.blogspot.co.id/2016/01/animated-social-media-css3.html" title="Merubah"><span>CHANGING</span></a></h2>
</li>
</ul>
</div>
</div>
<center>
<div id="social">
<a title="Facebook" href="https://www.facebook.com/learn.editing.myscript2010" target="_blank">  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOurJ3koPJQP6SkeznGSgLvQpNMD-wMZmJXuVi2nISs3cUPnImRbFDuGgQu2ElWTm48V6aBMaNCazbEj9oebnScpzTrC210x0VcxLkdak0s-ONlqpz8TfZUTRdSv8BMOhgr6-dk5HvAVGn/s1600-r/facebook-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a>   <a title="Gg Pluss" href="https://plus.google.com/u/0/101254379497511200564/posts" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4doUvGDg9uhDICuErnn18W9ZxhjbsbiaLi4oMKzC1fUtVDNJoEiQmGtXiYIBbq5aHL5fpyPH6G21C2pomLdcm6Jkx-ipjPbCIAtrB7q7OA3lxA737hl0uV-QJ7wtKxRveVvLFCsw-Q_Mu/s1600-r/google-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a>   <a title="Github" href="https://github.com/myscript2010" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPSieo2-cFrOJ55Ny2ZLXSaf99XSJcuSLJviPHW_1KqpWsuQx28Fl1kINmfVt9sywK-Zod0Xwhj6E6MjYe9oMcVRTh5jJpRcU7tlwyEqfsm-T3zCi71TX44HXVylMNvC72LIwv_ZYWyhm/s1600-r/github-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a> <a title="pinterest" href="https://www.pinterest.com/myscript2010" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5PKQyYJP_PDl8oN2SMmHsb2c1co6EqK2b05_wzy5TGhdYDlwYLnzkAg3rcepXnSyQTb1IavTgu-LVq69eIXbmlE9v1sDcasXmGlYuypLc198kjjCR-6W3dlo178_LfUTf-99T32_u9iSE/s1600-r/pinterest-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a><a title="Twitter" href="https://twitter.com/myscript2010s" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil6fbWZHnXfNACquJN18iiDPJV7x1lk9CYeulJOnWalmeui4bW0CZ5CURG82ZEmeXwS_ir9sygnIvJyH3Dz7Ru36hPfWClQuatMVn4qrl3Ethr4Dg-xpn_I6-eoreWtSxiMWAhGnw05n2w/s1600-r/twitter-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a>  </div>
</center>
<center>
<a href="https://sites.google.com/site/fileblogfor/code/Social-Net-Mys2010.css"title="Download Full Code">
<img src="http://s14.postimg.org/hp6it0d2p/download_button.png" name="e902" border="0" width="100" height="60" /></a>
</center>
<script src='//codepen.io/assets/editor/live/css_live_reload_init.js'></script> 
<!-- setup our canvas element -->
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>
<script>
      // when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
// not supported in all browsers though and sometimes needs a prefix, so we need a shim
window.requestAnimFrame = ( function() {
 return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function( callback ) {
     window.setTimeout( callback, 1000 / 60 );
    };
})();

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

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

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

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

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

// update firework
Firework.prototype.update = function( index ) {
 // remove last item in coordinates array
 this.coordinates.pop();
 // add current coordinates to the start of the array
 this.coordinates.unshift( [ this.x, this.y ] );
 
 // cycle the circle target indicator radius
 if( this.targetRadius < 8 ) {
  this.targetRadius += 0.3;
 } else {
  this.targetRadius = 1;
 }
 
 // speed up the firework
 this.speed *= this.acceleration;
 
 // get the current velocities based on angle and speed
 var vx = Math.cos( this.angle ) * this.speed,
   vy = Math.sin( this.angle ) * this.speed;
 // how far will the firework have traveled with velocities applied?
 this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
 
 // if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
 if( this.distanceTraveled >= this.distanceToTarget ) {
  createParticles( this.tx, this.ty );
  // remove the firework, use the index passed into the update function to determine which to remove
  fireworks.splice( index, 1 );
 } else {
  // target not reached, keep traveling
  this.x += vx;
  this.y += vy;
 }
}

// draw firework
Firework.prototype.draw = function() {
 ctx.beginPath();
 // move to the last tracked coordinate in the set, then draw a line to the current x and y
 ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
 ctx.lineTo( this.x, this.y );
 ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
 ctx.stroke();
 
 ctx.beginPath();
 // draw the target for this firework with a pulsing circle
 ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
 ctx.stroke();
}

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

// update particle
Particle.prototype.update = function( index ) {
 // remove last item in coordinates array
 this.coordinates.pop();
 // add current coordinates to the start of the array
 this.coordinates.unshift( [ this.x, this.y ] );
 // slow down the particle
 this.speed *= this.friction;
 // apply velocity
 this.x += Math.cos( this.angle ) * this.speed;
 this.y += Math.sin( this.angle ) * this.speed + this.gravity;
 // fade out the particle
 this.alpha -= this.decay;
 
 // remove the particle once the alpha is low enough, based on the passed in index
 if( this.alpha <= this.decay ) {
  particles.splice( index, 1 );
 }
}

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

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

// main demo loop
function loop() {
 // this function will run endlessly with requestAnimationFrame
 requestAnimFrame( loop );
 
 // increase the hue to get different colored fireworks over time
 //hue += 0.5;
  
  // create random color
  hue= random(0, 360 );
 
 // normally, clearRect() would be used to clear the canvas
 // we want to create a trailing effect though
 // setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
 ctx.globalCompositeOperation = 'destination-out';
 // decrease the alpha property to create more prominent trails
 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 ctx.fillRect( 0, 0, cw, ch );
 // change the composite operation back to our main mode
 // lighter creates bright highlight points as the fireworks and particles overlap each other
 ctx.globalCompositeOperation = 'lighter';
 
 // loop over each firework, draw it, update it
 var i = fireworks.length;
 while( i-- ) {
  fireworks[ i ].draw();
  fireworks[ i ].update( i );
 }
 
 // loop over each particle, draw it, update it
 var i = particles.length;
 while( i-- ) {
  particles[ i ].draw();
  particles[ i ].update( i );
 }
 
 // launch fireworks automatically to random coordinates, when the mouse isn't down
 if( timerTick >= timerTotal ) {
  if( !mousedown ) {
   // start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
   fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
   timerTick = 0;
  }
 } else {
  timerTick++;
 }
 
 // limit the rate at which fireworks get launched when mouse is down
 if( limiterTick >= limiterTotal ) {
  if( mousedown ) {
   // start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
   fireworks.push( new Firework( cw / 2, ch, mx, my ) );
   limiterTick = 0;
  }
 } else {
  limiterTick++;
 }
}

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

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

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

// once the window loads, we are ready for some fireworks!
window.onload = loop;       
    </script> 
Firework  by. Chuong Dang
Responsive buttons by. Kevadamson
Design code is edited by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload Here Sosial with firework

Memasang kode Pure CSS Christmas Lights with Audio
Code ini menggunakan CSS dan HTML serta Js. 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>
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:  -2px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background:  #111;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: rgba(4,000,000, .4);
border-top: 2px solid #f0f;
z-index: 9999;
} 
/*Image Full*/
* {margin: 0; padding: 0;}
body {
/* Image */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEtoLTbDEwDB8hwrVqVJXh36-DUB7qxmfNqPpFQjYL96-XSzdsIx-E7uF3rXSSFRVOEYv2Zke9CV0iu3byQOj7YL3VOChu_SmaYGKBsDJlXXJiO7NCo3CBRHXPTfEwRFIZnwQ_DlmL-xmk/s1600-r/badroom-mys2010.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed; 
background-size: 1400px 750px;
} 
/*end*/
/* Music */
.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;
}/*end*/
/*Led down*/
.lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -50px 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>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<audio id="player">
<source src="https://sites.google.com/site/songlagustudy/mp3/Tonight-i-celebrate-Mys2010s.mp3" type="audio/mpeg">
</audio>
<div align="center">
<header> 
<div class="Top Title Header">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html"title="Myscript2010s"><font size="1" color="red"face="arial"> <b>EXCHANGE PICTURES</b></a>
</div>
</header>
<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>
<script>
/**
* 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>
Christmas Lights by. Toby
Audio Player Mp3 Code by. Cartoonistarif
Design code is edited by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload Here Christmas Lights

Memasang kode Christmas tree and Xmas Lights
Code ini menggunakan CSS dan HTML serta Js. 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="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: 50px;
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: #222;
border-top: 2px solid #f0f;
z-index: 9999;
} 
/*led*/
body {
  background: #151515;
}

#lights {
  position: bottom;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
}
#lights .led {
  position: relative;
  float: left;
  width: 10px;
  height: 15px;
  margin: auto;
  border-radius: 5px 5px 100% 100%;
  animation: glow 0.5s linear infinite;
}
#lights .led:before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 0 0 3px 3px;
  background: #333;
  box-shadow: inset 0 -3px 3px rgba(255, 255, 255, 0.1);
}
#lights .led:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px 5px 100% 100%;
  box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.15);
}
#lights .led:nth-child(1) {
  animation-delay: 0.1s;
}
#lights .led:nth-child(2) {
  animation-delay: 0.2s;
}
#lights .led:nth-child(3) {
  animation-delay: 0.3s;
}
#lights .led:nth-child(4) {
  animation-delay: 0.4s;
}
#lights .led:nth-child(5) {
  animation-delay: 0.5s;
}
#lights .led:nth-child(6) {
  animation-delay: 0.6s;
}
#lights .led:nth-child(7) {
  animation-delay: 0.7s;
}
#lights .led:nth-child(8) {
  animation-delay: 0.8s;
}
#lights .led:nth-child(9) {
  animation-delay: 0.9s;
}
#lights .led:nth-child(10) {
  animation-delay: 1s;
}
#lights .led:nth-child(11) {
  animation-delay: 1.1s;
}
#lights .led:nth-child(12) {
  animation-delay: 1.2s;
}
#lights .led:nth-child(13) {
  animation-delay: 1.3s;
}
#lights .led:nth-child(14) {
  animation-delay: 1.4s;
}
#lights .led:nth-child(15) {
  animation-delay: 1.5s;
}
#lights .led:nth-child(16) {
  animation-delay: 1.6s;
}
#lights .led:nth-child(17) {
  animation-delay: 1.7s;
}
#lights .led:nth-child(18) {
  animation-delay: 1.8s;
}
#lights .led:nth-child(19) {
  animation-delay: 1.9s;
}
#lights .led:nth-child(20) {
  animation-delay: 2s;
}

@keyframes glow {
  50% {
    background: transparent;
    box-shadow: 0 0 10px transparent;
  }
}
.frame {
  
  font-size: 2em;
  text-shadow: 1px 1px black;
  color: green;
  text-align: center;
}
.frame canvas {
  display: block:center;
  padding: 15px 30px 15px 30px;
  background-color: #151515;
}
/* Requires font-awesome */
.player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 210px;
    height: 100px;
    background: ##;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #00008B;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    height: 50px;
    width: 50px;
    background: ##;
    border-radius: 50%;
    float: left;
    position: relative; cursor: pointer;
    color: #FF0000;}
.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: #0000FF;
    margin: 0 10px;
    position: relative;
    top: -10px;
}.player .volume-knob {
    background: #8A2BE2;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}
<div id='lights'>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
</div>
<div class='frame'>
<canvas id='tree'></canvas>
<div align="center">
<audio id="player">
<source src="https://sites.google.com/site/gg1cover/music/Angels-We-Have-Heard-On-High-Mys2010s.mp3" type="audio/mpeg">
</audio>
</div>
<!-- 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>


<div align="center">
<header> 
<div class="Top Title Header">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html"title="Myscript2010s"><font size="1" color=" #CD5C5C"face="arial"> <b>EXCHANGE PICTURES</b></a>
</div>
</header>
<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>

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

<led>
<script src='//dmnbd74khqk5q.cloudfront.net/assets/common/stopExecutionOnTimeout.js?t=1'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

<script>$('.led').each(function (i) {
    var c = 50 * i;
    $(this).css({
        backgroundColor: 'hsl(' + c + ',75%,50%)',
        boxShadow: '0 0 10px hsl(' + c + ',75%,50%)'
    });
});
 
</script>



<xmast>
<script src='//dmnbd74khqk5q.cloudfront.net/assets/common/stopExecutionOnTimeout.js?t=1'></script>
<script>(function() {
  var SwirlNode, Tree, TreeSwirl, height, swirls, width,
    bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  width = 250;

  height = 300;

  swirls = [
    {
      color: 'red',
      nodes: 50,
      speed: 3,
      radius: 2
    }, {
      color: 'green',
      nodes: 200,
      speed: 3,
      radius: 1.5
    }, {
      color: 'blue',
      nodes: 50,
      speed: 3,
      radius: 2
    }, {
      color: 'green',
      nodes: 200,
      speed: 3,
      radius: 1.5
    }
  ];

  Tree = (function() {
    function Tree(w, h, swirls) {
      this.run = bind(this.run, this);
      var i;
      this.width = w;
      this.height = h;
      this.canvas = document.getElementById('tree');
      this.context = this.canvas.getContext('2d');
      this.canvas.width = w;
      this.canvas.height = h;
      this.swirls = (function() {
        var j, ref, results;
        results = [];
        for (i = j = 0, ref = swirls.length; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
          results.push(new TreeSwirl(this, swirls[i], i / swirls.length));
        }
        return results;
      }).call(this);
      this.run();
    }

    Tree.prototype.run = function(t) {
      if (t == null) {
        t = 0;
      }
      window.requestAnimationFrame(this.run);
      return this.draw(t);
    };

    Tree.prototype.draw = function(t) {
      var j, k, len, len1, ref, ref1, results, s;
      this.context.clearRect(0, 0, this.width, this.height);
      ref = this.swirls;
      for (j = 0, len = ref.length; j < len; j++) {
        s = ref[j];
        s.drawBack(t);
      }
      ref1 = this.swirls;
      results = [];
      for (k = 0, len1 = ref1.length; k < len1; k++) {
        s = ref1[k];
        results.push(s.drawFront(t));
      }
      return results;
    };

    return Tree;

  })();

  TreeSwirl = (function() {
    function TreeSwirl(tree, s, offset) {
      var i;
      this.tree = tree;
      this.offset = offset;
      this.color = s.color;
      this.speed = s.speed;
      this.radius = s.radius;
      this.nodes = (function() {
        var j, ref, results;
        results = [];
        for (i = j = 0, ref = s.nodes; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
          results.push(new SwirlNode(this, i / s.nodes));
        }
        return results;
      }).call(this);
    }

    TreeSwirl.prototype.drawBack = function(t) {
      var j, len, n, ref, results;
      ref = this.nodes;
      results = [];
      for (j = 0, len = ref.length; j < len; j++) {
        n = ref[j];
        if (n.inBack(t)) {
          results.push(n.draw(t));
        }
      }
      return results;
    };

    TreeSwirl.prototype.drawFront = function(t) {
      var j, len, n, ref, results;
      ref = this.nodes;
      results = [];
      for (j = 0, len = ref.length; j < len; j++) {
        n = ref[j];
        if (n.inFront(t)) {
          results.push(n.draw(t));
        }
      }
      return results;
    };

    return TreeSwirl;

  })();

  SwirlNode = (function() {
    function SwirlNode(swirl, offset) {
      this.swirl = swirl;
      this.offset = offset;
    }

    SwirlNode.prototype.yPos = function() {
      var d, od;
      d = this.t / 1000 * this.swirl.speed;
      od = d + this.offset * this.swirl.tree.height;
      return (this.swirl.tree.height - od % this.swirl.tree.height) % this.swirl.tree.height;
    };

    SwirlNode.prototype.xDeg = function() {
      return this.yPos() * 5 + 360 * this.swirl.offset;
    };

    SwirlNode.prototype.xRad = function() {
      return this.xDeg() * Math.PI / 180;
    };
    SwirlNode.prototype.xPos = function() {
      return Math.sin(this.xRad()) * this.swirl.tree.width * this.yPos() / this.swirl.tree.height / 2 + this.swirl.tree.width / 2;
    };
    SwirlNode.prototype.shade = function() {
      return (Math.cos(this.xRad()) + 1) / 3;
    };
    SwirlNode.prototype.inBack = function(t) {
      this.t = t;
      return Math.cos(this.xRad()) > 0;
    };
    SwirlNode.prototype.inFront = function(t) {
      this.t = t;
      return !this.inBack(t);
    };
    SwirlNode.prototype.draw = function(t) {
      this.t = t - 180;
      this.drawNode(this.swirl.radius * 0.6, this.shade() + 0.4);
      this.t = t - 90;
      this.drawNode(this.swirl.radius * 0.8, this.shade() + 0.2);
      this.t = t;
      return this.drawNode(this.swirl.radius, this.shade());
    };
    SwirlNode.prototype.drawNode = function(size, shade) {
      var c;
      c = this.swirl.tree.context;
      c.beginPath();
      c.arc(this.xPos(), this.yPos(), size, 0, 2 * Math.PI);
      c.fillStyle = this.swirl.color;
      c.fill();
      c.fillStyle = "rgba(0,0,0," + shade + ")";
      return c.fill();
    };
    return SwirlNode;
  })();
  new Tree(width, height, swirls);
}).call(this);
</script>
Xmas Lights by. W Wolf Wizard
Christmas tree by. Jeremy Brenner
Audio Code by. Cartoonistarif
Code Edited by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload Here Tree and Xmas Lights

Memasang kode Christmas Snowfall with audio
Code ini menggunakan CSS dan HTML serta Js. 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>
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:  -2px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #00008B;
  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: #333;
background: #9400D3 ;
border-top: 2px solid #f0f;
z-index: 9999;
} 
/*Image Full*/
* {margin: 0; padding: 0;}
body {
/* Image */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrz26Px6WAAWfWQKk-nRyXI6xAtTyMvxWsY61XU9hG-Qna7jgeB7qabQBQYC-l8DIucSoiQ1URoulh7jd5UP9EtmQDDHaLtTU-LzFsmeOPzRkj4cuv7pdWA28zWl4AERtpBVxk3cymc-4Y/s1600-r/bg-mys2010.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed; 
background-size: 1200px 555px;
} 
html,body {
    height: 100%; 
    width: 100%;
    margin: 0;
    padding: 0;
}
canvas {
    position: absolute;
}
/* Requires font-awesome */
.player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 210px;
    height: 100px;
    background: ##;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #00008B;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    height: 50px;
    width: 50px;
    background: ##;
    border-radius: 50%;
    float: left;
    position: relative; cursor: pointer;
    color: #000;}
.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: #0000FF;
    margin: 0 10px;
    position: relative;
    top: -10px;
}.player .volume-knob {
    background: #111;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}
<canvas id="canvas"></canvas>
<header> 
<div class="Top Title Header">
<div align="center">

<a href="http://demoshow-mys2010.blogspot.co.id/2016/04/xmast-sungguh2.html" title="Tukar Gambar"><b>EXCHANGE PICTURES</b></a>
</div>
</header>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<audio id="player">
<source src="https://sites.google.com/site/gg1cover/music/sungguh-Mys2010s.mp3" type="audio/mpeg">
</audio><link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>
<script>
/**
* 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>

<snow>
<script src='//dmnbd74khqk5q.cloudfront.net/assets/common/stopExecutionOnTimeout.js?t=1'></script>
<script>function Flake(x,y,vx,vy,s) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.mx = Math.abs(vx * 2);
    this.vy = vy;
    this.my = vy;
    this.s = s;
    this.seed = Math.random() * 1e12;
    ///
    var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        height = canvas.height = s * 2,
        width = canvas.width = s * 2,
        grad = context.createRadialGradient(s, s, 1, s, s, s);
    grad.addColorStop(0, 'rgba(255,255,255,.66)');
    grad.addColorStop(1, 'rgba(255,255,255,0)');
    context.beginPath();
    context.arc(s, s, s, 0, Math.PI * 2, !0);
    context.fillStyle = grad;
    context.fill();
    context.closePath();
    
    this.img = canvas;
}
Flake.prototype = {
    constructor: Flake,
    update: function() {
        this.x += this.vx;
        this.y += this.vy;
        
        if( this.x > width + this.s * 2 ) {
            this.x = 0 - this.s * 2;
        }
        if( this.x < 0 - this.s * 2 ) {
            this.x = width + this.s * 2;
        }
        
        if( this.y > height + this.s * 2 ) {
            this.y = 0 - this.s * 2;
        }
        if( this.y < 0 - this.s * 2 ) {
            this.y = height + this.s * 2;
        }
        if( Math.abs(this.vx) > this.mx ) {
            this.vx = this.vs > 0 ? this.mx : -1 * this.mx;
        }
        // direction modification is kinda cheap... 
        this.vx += Math.sin(Date.now() + this.seed)/100;
        if( this.vy < this.my ) {
            this.vy += this.my/10;
        }
    }
};

var canvas, context, height, width, snow_count, hand_size, snow;

setTimeout(init, 10);

function init() {
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    height = canvas.height = document.body.offsetHeight;
    width = canvas.width = document.body.offsetWidth;

    snow_count = 128;
    hand_size = 32;
    snow = [];

    for( var i = 0; i < snow_count; i++ ) {
    
        var x = Math.random() * width,
            y = Math.random() * height,
            s = Math.random() * 2.5 + 2.5,
            vx = Math.random() * 2 - 1,
            vy = Math.random() + s/2.5;
        snow.push(new Flake(x,y,vx,vy,s));
    }
    
    canvas.onmousemove = function(e) {   
        for( var i = 0; i < snow_count; i++ ) {
            var dx = snow[i].x - e.clientX,
                dy = snow[i].y - e.clientY,
                d = Math.sqrt(dx*dx + dy*dy);
            if( d < hand_size ) {
                var r = Math.atan2(dy, dx);
                snow[i].vx = 2 * Math.cos(r);
                snow[i].vy = 2 * Math.sin(r);
            }
        }    
    };
    
    update();
    render();
}

function update() {
    for( var i = 0; i < snow_count; i++ ) {
        snow[i].update();
    }
    setTimeout(update, 1000/30);
}
function render() {
    context.clearRect(0, 0, width, height);
    for( var i = 0; i < snow_count; i++ ) {
        context.drawImage(snow[i].img, snow[i].x - snow[i].s, snow[i].y - snow[i].s);
    }
    requestAnimationFrame(render);
}
</script>
Snowfall by. Long Nguyen
Audio Code by. Cartoonistarif
Code Edited by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload Here Snowfall with audio