Kites Broke

Memasang kode Kites Broke
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template, ganti dengan kode 
blank template yang tersedia pada sumber berikut :  

Get Blank Template  edit background warna sesuai keinginan Kemudian 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 {#);color:red;height:100%;overflow:hidden;}
/* HEADER*/
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;}} 

.stormclouds {
    position: absolute;
    z-index: 1000;
    height: 100%;
    width: 100%;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUKfSglb6EgMuSAQr8UysHybEtdvAntSn_Dvh-r-8EUgHlrE3S_GHIjUOh6XoZQpcGQFwegMTu8dlFlqG4I3FYetOhur6rzFyptKImxcaBEh99TRrQ3iDa-QFCnWYOt-6gd1bwnGmTmXpj/s1600-r/awan-mys2010.jpg") repeat;
}
.kite {
    position: absolute;
    z-index: 5000;
    width: 184px;
    height: 132px;
}
/*! Spin the kite around */
.rotate {
    -webkit-animation: rotate 5s infinite linear;
    animation: rotate 5s infinite linear;
}
 @-webkit-keyframes rotate {
 100% {
 -webkit-transform: rotateY(360deg);
 transform: rotateY(360deg);
}
}
 @keyframes rotate {
 100% {
 -webkit-transform: rotateY(360deg);
 transform: rotateY(360deg);
}}
    </style>

<div class="stormclouds sepia">
</div>
<div id="kite" class="kite rotate">
<img  class="sepia" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIIZVoAO5Q-u0ql4J5ZheJ_4TABBcn-kNd62nMZxv3ba6n9xyWKTVRg4R54t06VS3-KDVJratBQ1ZUNNJCGxWKt48OjINHp0KN6NOC9uN5_FVfygzbjRSflM0oYfC21tHrUAjSzXug5DK/s1600-r/kite-mys2010.gif" alt="Click for Oz"/></a></div>
<center>
<div class="navigation">
<div class="nav_outer">
<ul>
<li class="active">
<h2>
<a href="http://codepen.io/Myscript2010/pen/YqNRWM"target="_blank" title="Mys2010 on Codepen"><span>CODEPEN</span></a></h2>
</li>
<li>
<h2>
<a href="https://gist.github.com/Myscript2010"target="_blank" title="Mys2010 on Github"><span>GITHUB</span></a></h2>
</li>
<li>
<h2>
<a href="https://jsfiddle.net/user/dashboard/"target="_blank" title="Mys2010 on Jsfidle"><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://codepen.io/WhizofaWiz/pen/xVZZeB" target="_blank" title="Sumber"><span>SOURCES</span></a></h2>
</li>
</ul>
</div>
</div>

<script src='//codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html>
</section>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>
       position=0;
var interval = setInterval(function () {
position -= 1;
$(".stormclouds").css({ "background-position":+ position +"px 0px" }) },50 );
// Float the kite around the screen
$(document).ready(function(){
    animateDiv();  
});
function makeNewPosition(){  
    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 132;
    var w = $(window).width() - 184;  
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    return [nh,nw];    
}
function animateDiv(){
    var newq = makeNewPosition();
    var oldq = $('.kite').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
  
    $('.kite').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv();      
    });  
};
function calcSpeed(prev, next) {  
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    var speedModifier = 0.1;
    var speed = Math.ceil(greatest/speedModifier);
    return speed;

}
// Set up our Tiny Torndado  Find it here https://github.com/vinceallenvince/tinytornado
//  I swear, you can find everything online if you look long enough.

 var base = new TinyTornado.Vortex.Base({
        perlinSpeed: 0.002
      });
      var debris = new TinyTornado.Vortex.DebrisBit();
      var spine = new TinyTornado.Vortex.Spine({
        density: 10
      });
      var shell = new TinyTornado.Vortex.ShellBit();

      var vortex = new TinyTornado.Vortex.RunnerBit(base, debris, spine, shell);
      vortex.init({
        el: document.getElementById('worldA')
      });

        /*Made some use of the Buzz Audio Library.
http://buzz.jaysalvat.com/documentation/sound/
MP3s are pretty safe to use when you are targeting HTML5 Audio.  Non supported browsers just don't hear the awesomeness of New Orleans.

Read the Buzz Docs.  Super easy to use.
*/
 /***************************
Setting Audio defaults and registering audio.
****************************/
buzz.defaults.formats = [ 'mp3' ];
buzz.defaults.preload = 'metadata';
var Overture = new buzz.sound("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/Overture", {
    formats: [ "mp3" ],
    preload: true,
    autoplay: false,
    volume: 30,
    loop: true
});
var notinkansas = new buzz.sound("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/notinkansas", {
    formats: [ "mp3" ],
    preload: true,
    autoplay: false,
    volume: 100,
    loop: false
});
var cyclone = new buzz.sound("https://sites.google.com/site/studiedingsongmp3/laguku/UB40-Here-I-Am-Mys2010.mp3", {
    formats: [ "mp3" ],
    preload: true,
    autoplay: false,
    volume: 15,
    loop: true
});

/***************************
Grouping the sounds so I can toggle them off and on all at once
****************************/  
var soundEffects = new buzz.group([
    Overture,
    cyclone
]);  

document.querySelector('.youtube-button').addEventListener('click', function (e) {
    this.classList.toggle('youtube-button--active');
});
$('.youtube-button').on('click', function() {
  
    soundEffects.togglePlay();
    });
    </script>

Edited by. Mys2010 on Jsfiddle
Buttons by. Mark Sottek on Codepen

DEMOSHOW