Memasang kode Walk Dragon 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 dan klik simpan selesai
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 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
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: -6px;
width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;
font-size: 6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
border-bottom: 3px solid #dad;
}
.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;
text-align: center;
text-shadow: 0px 0px #FFf;
font-size: 11px;
background: #111;
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%, #666 50%, transparent 90%);
}
#M-2010, #teks, #posisi, #dibawah {
position: absolute;
font-size: 11px;
margin: 2px
}
#M-2010, #teks div {
text-decoration: underline;
cursor: pointer
}
#teks, #posisi {
text-align: right;
right: 50px;
}
#teks, #dibawah {
text-align: left;
left: 50px;
}
#dibawah, #posisi {
bottom: 17px;
}
/*end*/
html, body {
margin-top: -80px;
height: 98%
}
.animated {
width: 100%;
min-height: 700px;
position: relative;
top: 0;
left: 0;
background-color: #fff;
}
.pagar-1 {
-webkit-animation: parallax_bg linear 20s infinite both;
animation: parallax_bg linear 20s infinite both;
background: url(https://sites.google.com/site/code6916/file/transparent-M2010.png) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom:-99px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 835px;
}
.bg-1 {
-webkit-animation: parallax_bg linear -20s infinite both;
animation: parallax_bg linear -20s infinite both;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavBdAzF5Dy-BDs3DWQVDIGj6GHrZMyMYk4r7Kj-zykC3L6LzzkTMqUTIu1SFHAc1VLDgdzkO2IkkhoQIuxL3z4Mg8nBnT3PAjIk1Xh3J8c48dzOR4MGfF8bv4eMAjJP73mQ9CJqYBH-E/s1600/Cemara-3-Mys2010.png) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom:9px;
left: 0;
width: 100%;
height: 90%;
background-size: auto 150px;
}
.bg-2 {
-webkit-animation: parallax_bg linear -30s infinite both;
animation: parallax_bg linear -30s infinite both;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiVOpWMUoc0FFewRlX4_d9LzjJFq37pxD5KDv63Cjo9ssmklon4CY827gTI0_SigEUvO0NffZa96OagUeEjIEwQf45SXYUlTZFqK3pi4uuSgfpzLcEJrhPLLWgKtpP7_VwHaeErE13KE/s1600/palm-m2010.png) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom:-1px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 175px;
}
.bg-3 {
-webkit-animation: parallax_bg linear -55s infinite both;
animation: parallax_bg linear -55s infinite both;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8PN9HQB0F7u32jAhwWmj2GqGdffq9rIpwtRdq3Nm_sWFc4tVuN808eLiXBCaq-bS4E2CtFvrtVUu5Uzh9gdzk7hEb5eCS1lLvyiybAl_6scjQWc7TepeOXzYck4E05WsVOn_benfw5l4/s1600/kembang-m2010.png) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom:17px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 178px;
}
.bg-4 {
-webkit-animation: parallax_bg linear -75s infinite both;
animation: parallax_bg linear -75s infinite both;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yQAF51IpJfYoHgIF5gS-jGTAZBy6xxNTRM3N9XQy8HRK4u2_x0Qr5nPkJiY0F7jTnw3yQ_yeCGmxLOBNPOfxgKO-2sDuEGtygRA6vw1NUM2_ya5Puzfw_ZNrF-hgzPq7I0QaJQ0HXhs/s1600/rumput-m2010.png) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom:-9px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 268px;
}
.bg-5 {
-webkit-animation: parallax_bg linear -95s infinite both;
animation: parallax_bg linear -95s infinite both;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGc5zCHAAFFVbX0RxNO2HjrWeDM3OAPVFcceB6UoMJO0HLmB_rWqNnPw7w99WYMWywbFN8RefJmCDGeBUrMQroLDIFBwCi_KNBbmgidZUXAf6f1jtgsU_ngMccJbFeTUI_-sYzyxEGq8w/s1600/gedung-m2010.png) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom:-120px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 551px;
}
.bg-6 {
-webkit-animation: parallax_bg linear -30s infinite both;
animation: parallax_bg linear -30s infinite both;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZSy69tR1AYlyChHKItKiKHE21evJTdzta0At77R4mgp9vmSyBiuyL-hJNGs4dYdvf2RSnE_3W_v8TsrZ0gyK5pPTHFSC2jzyyjOZUOZTpZvYYlh-b_ThqK9futv1pMRQ4g_kaQ3YaRc/s1600/pohon-tiang-m2010.png) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom:-1px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 345px;
}
.bg-7 {
-webkit-animation: parallax_bg linear -75s infinite both;
animation: parallax_bg linear -75s infinite both;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMex3UWpx2vvWVsZhIW0nKPTaGhXDjfz_ezBJFuGAsDuY130_wmjPDdoh_hlYKXfgDMVW9M9LCdidhKF6FNDgm5M2hfN7PyYpr0VU_ppmSFe5x4Ht-m6WxrQIT5XS6ctb-QueFSJ5TKAE/s1600/rumput-laut-mys2010.png) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom:-1px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 158px;
}
@-webkit-keyframes parallax_bg {
0% {
background-position: 2765px 100%;
}
100% {
background-position: 550px 100%;
}
}
@keyframes parallax_bg {
0% {
background-position: 2765px 100%;
}
100% {
background-position: 550px 100%;
}
}
body {background-image: url();color:red;height:100%;overflow:hidden;}
.animation-mys2010 {position:absolute;bottom:0;width:100 ; }
.window {position:absolute;left:30px;top:10px;}
.bugaloos { position:absolute;left:430px;top:290px;
animation-name: float;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;}
.backwall {position:absolute;width:6%;height:60%;}
@keyframes float {
0% {
transform:translateY(0);
}
50% {
transform:translateY(-10px);
}
100% {
transform:translateY(0);
}
}
/*end*/
.kalong-1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
z-index: 1;
position: absolute;
bottom: 300px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 75px;
}
.kalong-2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif) 0 100% no-repeat;
z-index: 1;
position: absolute;
bottom: 390px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 35px;
}
.kalong-2a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgquBSwdVHNH2MF-xI9LmSpC1bp0hxovgxUC7bSwmDe7oiiXFHyhEn5CBN5PdWtAEJy6s3fJXpTZdV57En3mnrXRTl2MPcdUoEAEoDWzkFKIdgJK7_nM3zo-v1DmaI7N7Ksu0NXjotiDo0/s1600/dragon-M2010.gif) 0 100% no-repeat;
z-index: 1;
position: absolute;
bottom: 70px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 405px;
}
.kalong-1 {
-webkit-animation: parallax_kalong linear 70s infinite both;
animation: parallax_kalong linear 70s infinite both;
}
.kalong-2 {
-webkit-animation: parallax_kalong linear 15s infinite both;
animation: parallax_kalong linear 15s infinite both;
}
.kalong-2a {
-webkit-animation: parallax_kalong linear 100s infinite both;
animation: parallax_kalong linear 100s infinite both;
}
@-webkit-keyframes parallax_kalong {
0% {
background-position: -300px 100%;
}
100% {
background-position: 2000px 100%;
}
}
@keyframes parallax_kalong {
0% {
background-position: -300px 100%;
}
100% {
background-position: 2000px 100%;
}
}
@import url(http://fonts.googleapis.com/css?family=Oswald);
@keyframes clouds-loop-1 {
to {
background-position: -1000px 0;
}
}
.clouds-1 {
background-image: url("http://s.cdpn.io/15514/clouds_2.png");
animation: clouds-loop-1 20s infinite linear;
}
@keyframes clouds-loop-2 {
to {
background-position: -1000px 0;
}
}
.clouds-2 {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGFRpoZhieY2Gx_elVDKzm4KgYeG6g-3uT4g8rqZTURlRmdK2qGF6mpZIZ8Pfqio2uEJ2ZVhpvlzdygEFk_DTIq5DngtwOx_QSVdVq_yZfOfSHCZvkWCQ6GEpZgq_RGk8aU8-6Ht-ceg/s1600/clouds-mys2010.png");
animation: clouds-loop-2 15s infinite linear;
}
@keyframes clouds-loop-3 {
to {
background-position: -1579px 0;
}
}
.clouds-3 {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORLv9vmAXNTaZLM1VRC7HqhF6AOWrIj1ydLQcQsD6OFxZMNFXgJ_JochOpC1WhJUlbw_u0Drj7YwnEZe3ZifYHL_UStym5_6YAkW5rNXIdtdE_Z1sjaZw66E9X3Riq7hgNMbAn0tRclI/s1600/awan-biru-mys2010.png");
animation: clouds-loop-3 17s infinite linear;
}
section.info {
position: absolute;
bottom: 0;
right: 2ch;
font-size: 60%;
}
section.info dl {
display: -webkit-flex;
display: flex;
}
section.info dl dt, section.info dl dd {
margin: 0;
padding: 0;
}
section.info dl dt {
padding-right: 1ch;
}
section.info dl dd {
padding-right: 4ch;
}
.clouds {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity: 0.4;
pointer-events: none;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
right: 0;
height: 100%;
}
.clouds-1,
.clouds-2,
.clouds-3 {
background-repeat: repeat-x;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 500px;
}</style>
<div class="parallax kalong-1"> </div> <div class="parallax kalong-2"> </div> <div class="parallax kalong-2a"> </div> <div class="animated"> <div class="parallax bg-6"> </div> <div class="parallax bg-5"> </div> <div class="parallax bg-3"> </div> <div class="parallax bg-7"> </div> <div class="parallax bg-2"> </div> <div class="parallax bg-4"> </div> <div class="parallax bg-1"> </div> <div class="parallax pagar-1"> </div> <canvas id="c">Dragon</canvas> <div class='clouds'> <div class='clouds-1'> </div> <div class='clouds-2'> </div> <div class='clouds-3'> </div> </div> <div class="ap" id="ap"> <div align="center"> <div id="dibawah"> <span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;"> M - 2010 </a> DOWNLOAD </a> </div> <div id="posisi"> <span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://codepen.io/hello/" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;"> © - 2016 </a> CODEPEN </a> </div> <h2> <audio id="mys2010" src="https://sites.google.com/site/studiedingsongmp3/laguku/Night-of-the-wolf-black-coach-ave-Sinitra-mys2010.mp3"controls="controls"></audio></h2> </a></div> </div> <header> <a href="http://#" target="_blank" title="Mari Belajar"> <h2> <span style="color:orange; font-size: 10pt">Myscript2010</a> </h2> </a> </div> </header>
<ul class="mys2010-list"> <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'> </script> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'> </script> <link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> <script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'> </script> <script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>
<script>
$(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}
}
</script>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>
<script>
// full source for entry into js1k dragons: http://js1k.com/2014-dragons/demo/1837
// thanks to simon for grunt help and sean for inspiration help
// js1k shim
var a = document.getElementsByTagName('canvas')[0];
var b = document.body;
var d = function(e){ return function(){ e.parentNode.removeChild(e); }; }(a);
// unprefix some popular vendor prefixed things (but stick to their original name)
var AudioContext =
window.AudioContext ||
window.webkitAudioContext;
var requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(f){ setTimeout(f, 1000/30); };
// stretch canvas to screen size (once, wont onresize!)
a.style.width = (a.width = innerWidth - 0) + 'px';
a.style.height = (a.height = innerHeight - 0) + 'px';
var c = a.getContext('2d');
// end shim
var sw = a.width,
sh = a.height,
M = Math,
Mc = M.cos,
Ms = M.sin,
ran = M.random,
pfloat = 0,
pi = M.PI,
dragons = [],
shape = [],
loop = function() {
a.width = sw; // clear screen
for ( j = 0; j < 7; j++) {
if ( !dragons[j] ) dragons[j] = dragon(j); // create dragons initially
dragons[j]();
}
pfloat++;
requestAnimationFrame(loop);
},
dragon = function(index) {
var scale = 0.1 + index * index / 49,
gx = ran() * sw / scale,
gy = sh / scale,
lim = 300, // this gets inlined, no good!
speed = 3 + ran() * 5,
direction = pi, //0, //ran() * pi * 2, //ran(0,TAU),
direction1 = direction,
spine = [];
return function() {
// check if dragon flies off screen
if (gx < -lim || gx > sw / scale + lim || gy < -lim || gy > sh / scale + lim) {
// flip them around
var dx = sw / scale / 2 - gx,
dy = sh / scale / 2 - gy;
direction = direction1 = M.atan(dx/dy) + (dy < 0 ? pi : 0);
} else {
direction1 += ran() * .1 - .05;
direction -= (direction - direction1) * .1;
}
// move the dragon forwards
gx += Ms(direction) * speed;
gy += Mc(direction) * speed;
// calculate a spine - a chain of points
// the first point in the array follows a floating position: gx,gy
// the rest of the chain of points following each other in turn
for (i=0; i < 70; i++) {
if (i) {
if (!pfloat) spine[i] = {x: gx, y: gy}
var p = spine[i - 1],
dx = spine[i].x - p.x,
dy = spine[i].y - p.y,
d = M.sqrt(dx * dx + dy * dy),
perpendicular = M.atan(dy/dx) + pi / 2 + (dx < 0 ? pi : 0);
// make each point chase the previous, but never get too close
if (d > 4) {
var mod = .5;
} else if (d > 2){
mod = (d - 2) / 4;
} else {
mod = 0;
}
spine[i].x -= dx * mod;
spine[i].y -= dy * mod;
// perpendicular is used to map the coordinates on to the spine
spine[i].px = Mc(perpendicular);
spine[i].py = Ms(perpendicular);
if (i == 20) { // average point in the middle of the wings so the wings remain symmetrical
var wingPerpendicular = perpendicular;
}
} else {
// i is 0 - first point in spine
spine[i] = {x: gx, y: gy, px: 0, py: 0};
}
}
// map the dragon to the spine
// the x co-ordinates of each point of the dragon shape are honoured
// the y co-ordinates of each point of the dragon are mapped to the spine
c.moveTo(spine[0].x,spine[0].y)
for (i=0; i < 154; i+=2) { // shape.length * 2 - it's symmetrical, so draw up one side and back down the other
if (i < 77 ) { // shape.length
// draw the one half from nose to tail
var index = i; // even index is x, odd (index + 1) is y of each coordinate
var L = 1;
} else {
// draw the other half from tail back to nose
index = 152 - i;
L = -1;
}
var x = shape[index];
var spineNode = spine[shape[index+1]]; // get the equivalent spine position from the dragon shape
if (index >= 56) { // draw tail
var wobbleIndex = 56 - index; // table wobbles more towards the end
var wobble = Ms(wobbleIndex / 3 + pfloat * 0.1) * wobbleIndex * L;
x = 20 - index / 4 + wobble;
// override the node for the correct tail position
spineNode = spine[ index * 2 - 83 ];
} else if (index > 13) { // draw "flappy wings"
// 4 is hinge point
x = 4 + (x-4) * (Ms(( -x / 2 + pfloat) / 25 * speed / 4) + 2) * 2; // feed x into sin to make wings "bend"
// override the perpindicular lines for the wings
spineNode.px = Mc(wingPerpendicular);
spineNode.py = Ms(wingPerpendicular);
}
c.lineTo(
(spineNode.x + x * L * spineNode.px) * scale,
(spineNode.y + x * L * spineNode.py) * scale
);
}
c.fill();
}
}
// the shape of the dragon, converted from a SVG image
'! ((&(&*$($,&.)/-.0,4%3"7$;(@/EAA<?:<9;;88573729/7,6(8&;'.split("").map(function(a,i) {
shape[i] = a.charCodeAt(0) - 32;
});
loop();
</script>
Source Code by. All Sources
Design code is edited by. Mys2010 In Codepen
Design code is edited by. Mys2010 In Codepen
If you want to directly copy and paste you canDownload Here Walk Dragon Audio Mp3
