Memasang Kode Audio Mp3 with 7 Dragons
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
<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
background: #151515;
}
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: 17px 0;
position: fixed;
top: 0;
width: 100%;
background: #000;
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%, #444 50%, transparent 90%);
}
body{
font-family:verdana, arial;
}
.mys2010-list li:hover {
background: #ffa;
cursor: pointer;
}
.mys2010-list li.current {
background: #cddfff;
}
.mys2010-container{
margin-left:auto;
margin-right:auto;
}
#wrapper{
width:490px;
margin-left:auto;
margin-right:auto;
margin-top: -20px;
padding:-15px;
-webkit-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
}
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);
}
}
.Flying-mys2010 {
z-index: 600;
cursor: pointer;
-webkit-animation: Flying-mys2010 38s infinite linear;
-moz-animation: Flying-mys2010 38s infinite linear;
-ms-animation: Flying-mys2010 38s infinite linear;
-o-animation: Flying-mys2010 38s infinite linear;
animation: Flying-mys2010 38s infinite linear;
bottom: 10%;
left: 0%;
position: absolute;}
@keyframes Flying-mys2010 {
25% {
bottom: 80%;
left: 85%;
transform: rotateY(0deg);
}
26% {
transform: rotateY(180deg);
}
50% {
bottom:60%;
left: 0%;
transform: rotateY(180deg);
}
51% {
transform: rotateY(0deg);
}
75% {
bottom:40%;
left: 85%;
transform: rotateY(0deg);
}
76% {
bottom:40%;
left: 85%;
transform: rotateY(180deg);
}
99% {
transform: rotateY(180deg);}}
@keyframes float {
0% {
transform:translateY(0);
}
50% {
transform:translateY(-10px);
}
100% {
transform:translateY(0);
}
}
@import url(http://fonts.googleapis.com/css?family=Oswald);
@keyframes clouds-loop-1 {
to {
background-position: -1000px 0;
}
}
.clouds-1 {
background-image: url("http://s.cdpn.io/15514/clouds_2.png");
animation: clouds-loop-1 20s infinite linear;
}
@keyframes clouds-loop-2 {
to {
background-position: -1000px 0;
}
}
.clouds-2 {
background-image: url("http://s.cdpn.io/15514/clouds_1.png");
animation: clouds-loop-2 15s infinite linear;
}
@keyframes clouds-loop-3 {
to {
background-position: -1579px 0;
}
}
.clouds-3 {
background-image: url("http://s.cdpn.io/15514/clouds_3.png");
animation: clouds-loop-3 17s infinite linear;
}
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;
}
body {
text-align: center;
font-size: 20px;
}
div {
margin: -9px;
}
.btn {
overflow: hidden;
position: relative;
display: inline-block;
height: 2em;
line-height: 2em;
padding: 0 1em;
text-decoration: none;
box-shadow: 0 5px 15px #000;
-moz-transition: color 400ms;
-o-transition: color 400ms;
-webkit-transition: color 400ms;
transition: color 400ms;
}
.btn:before {
content: '';
position: absolute;
z-index: -1;
height: 0%;
width: 100%;
bottom: 0;
left: 0;
-moz-transition: height 100ms;
-o-transition: height 100ms;
-webkit-transition: height 100ms;
transition: height 100ms;
}
.btn:hover {
color: white;
border-color: white;
}
.btn:hover:before {
height: 100%;
}
.build {
color: salmon;
border: 2px solid salmon;
}
.build:before {
background-color: salmon;
}
.build:hover {
color: white;
border-color: white;
}
.me-up {
color: skyblue;
border: 2px solid skyblue;
}
.me-up:before {
background-color: skyblue;
}
.me-up:hover {
color: white;
border-color: white;
}
.rounded {
border-radius: 2em;
}
.butter {
color: GoldenRod;
border: 2px solid GoldenRod;
border-radius: 2em;
}
.butter:before {
background-color: GoldenRod;
}
.butter:hover {
color: white;
border-color: white;
}
body { margin: -1; padding: -1 }
h4.quote {
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
text-align: right;
text-decoration: none;
font-family: 'Oswald', sans-serif;
font-weight: normal;
position: absolute;
top: 15%;
left: 50%;
font-size: 1.2em;
line-height: 1.5em;
margin: 0;
text-shadow: 0 -1px 0 #ffffff, 0 2px 3px #000000;
}
h4.quote span {
display: block;
}</style>
<h4 class='quote'>
<div class='first'>
<font size="3" color="green"face="arial">
<a class='btn build' href='https://sites.google.com/site/code6916/file/audio-mp3-Before-7Dragons-mys2010.css'>BEFORE 7 DRAGONS </a> <a class='btn me-up' href='https://sites.google.com/site/code6916/file/audio-mp3-After-7Dragons-mys2010.css'>AFTER 7 DRAGONS</font></a>
</h4></div>
<canvas id="c"></canvas>
<div id="animation-mys2010">
<div class="insidewalls" id="animation-mys2010">
<img border="0" class="bugaloos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif" height="49" name="e902" width="48" />
<div id="Flying-mys2010" class="slow">
<div id="Flying-mys2010" class="slow">
<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif"name="e902" border="0" width="60" height="90" /></a>
<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">
<a href="http://sample-mys2010.blogspot.co.id" target="_blank" title="Myscript2010">
<h2>
<font size="2" color="orange"face="arial">CIBEBER CIMAHI</font></2></a>
</div>
<header>
<div class="Top Title Header">
<div align="center">
<div id="wrapper">
<audio id="mys2010" src="https://sites.google.com/site/pelajaranku1/mp3ku/Cranberries-Dream-Mys2010.mp3" controls="controls"></audio>
</div>
</header>
<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>
<ul class="mys2010-list">
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.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){ // get the .current song
var current_item = $('.mys2010-list li.current:first'); // :first is added if we have few .current classes
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if '+audio_src);
}else{ // if there is no .current class
var current_item = $('.mys2010-list li:first'); // get :first if we don't have .current class
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') ) { // if it is last - stop playing
$(current_item).removeClass('current');
}else{
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}
}
</script>
If you want to directly copy & paste you canDownload Here Audio Mp3 Modification
