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
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: 0 px 0;
position: fixed;
top: 0 ;
width: 100%;
background: #222;
border-bottom: 3px solid #dad;
}
.ap {
position: fixed;
right: 0;
bottom:-15px;
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%, pink 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:25px;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8V8XUHlxQBkVPJr30PVwXKJ8NPfXORMfaphP1s5CXA258JVu5wjNNsaiQsGCShOeKxx3ghKZBWIWxX0RaOou5row-H5bJ9vgHQlkT0jslbDCrMDNFJliAQng2NBB3ZFyoIpweeQcR1Dt/s1600-r/Laut-Animasi-Mys2010.gif");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body::before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
-webkit-animation: overlay infinite 12s;
animation: overlay infinite 12s;
content: '';
}
h1 {
position: absolute;
top: 10%;
left: 50%;
margin: 0;
width: 50px;
height: 1.4em;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
color: rgba(255, 255, 255, 0.55);
font-family: agency fb, helvetica neue, sans serif;
font-size: 2.4em;
font-weight: 500;
line-height: 1em;
letter-spacing: .45em;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-webkit-animation: opacity infinite 12s;
animation: opacity infinite 12s;
}
h1 span {
display: block;
position: absolute;
top: 0;
}
h1 span:nth-child(1) {
right: 100%;
margin-right: -.4em;
}
h1 span:nth-child(2) {
left: 100%;
}
h1::before, h1::after {
display: block;
position: absolute;
top: 50%;
width: 2px;
height: 30px;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.55);
content: '';
}
h1::before {
left: 18px;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateZ(-50%) rotateX(-90deg);
transform: translateZ(-50%) rotateX(-90deg);
-webkit-animation: transform ease-out infinite 12s;
animation: transform ease-out infinite 12s;
}
h1::after {
right: 18px;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translateZ(-50%) rotateX(-90deg);
transform: translateZ(-50%) rotateX(-90deg);
-webkit-animation: transform ease-out infinite 12s;
animation: transform ease-out infinite 12s;
}
@-webkit-keyframes transform {
0%, 16% {
opacity: 0;
-webkit-transform: translateY(-50%) rotateX(-90deg);
transform: translateY(-50%) rotateX(-90deg);
}
18% {
opacity: 1;
}
40% {
opacity: 1;
-webkit-transform: translateY(-50%) rotateX(0deg);
transform: translateY(-50%) rotateX(0deg);
}
}
@keyframes transform {
0%, 16% {
opacity: 0;
-webkit-transform: translateY(-50%) rotateX(-90deg);
transform: translateY(-50%) rotateX(-90deg);
}
18% {
opacity: 1;
}
40% {
opacity: 1;
-webkit-transform: translateY(-50%) rotateX(0deg);
transform: translateY(-50%) rotateX(0deg);
}
}
@-webkit-keyframes overlay {
0% {
opacity: .5;
}
18%, 81% {
opacity: 0;
}
92%, 100% {
opacity: .5;
}
}
@keyframes overlay {
0% {
opacity: .5;
}
18%, 81% {
opacity: 0;
}
92%, 100% {
opacity: .5;
}
}
@-webkit-keyframes opacity {
0%, 4% {
opacity: 0;
}
18%, 81% {
opacity: 1;
}
92%, 100% {
opacity: 0;
}
}
@keyframes opacity {
0%, 4% {
opacity: 0;
}
18%, 81% {
opacity: 1;
}
92%, 100% {
opacity: 0;
}
}
.animation-mys2010 {position:absolute;bottom:0;width:100 ; }
.window {position:absolute;left:30px;top:10px;}
.bugaloos { position:absolute;left:430px;top:190px;
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);
}
}
.player {
width: 210px;
height: 5px;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #fff;
font-family: arial, sans-serif;
}
.player .source-ctrl-container {
float: left;
position: relative;
cursor: pointer;
color: #dad;}
.player .volume-ctrl-container {
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-top: 0px;
height: 50px;
width: 118px;
float: right;
}
.player .fa-pause {
position: absolute;
top: 7px;
left: 18px;
}
.player .fa-play {
position: absolute;
top: 7px;
left: 20px;
}
.player .time-info {
clear: both;
position: relative;
top: 8px;
text-align: center;
font-size: 13px;
}
.player .time-current {
color: #ff0;
}
.player .volume-slider {
display: inline-block;
height: 2px;
width: 50px;
background: #666;
margin: 0 10px;
position: relative;
top: -10px;
}
.player .volume-knob {
background: #fff;
width: 13px;
height: 13px;
border-radius: 50%;
position: relative;
top: -6px;
}
</style>
<div id="animation-mys2010"> <div class="insidewalls" id="animation-mys2010"> <img border="0" class="bugaloos" src="http://khezo.com/wp-content/uploads/2013/06/Animasi-kelelawar-vampire.gif" height="29" name="e902" width="28" /> <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="ap" id="ap"> <div align="center"> <h2> <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/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;"> © - 2016 </a> CODEPEN </a> </div> <a href="#"title="Myscript2010s"> CIBEBER CIMAHI</h2></a> </div> <header> <div class="Top Title Header"> <div align="center"> <audio id="player"> <source src="https://sites.google.com/site/code6916/lagu/Now-and-forever-Mys2010s.mp3" type="audio/mpeg"> </audio> </div> </header>
<h1> <span><a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> Mys2010</a></span><span><a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Css Effect">Effects</a></span></h1>
<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>
"use strict";
/**
* 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>
Audio Code by. Cartoonist ARiF Design code is edited by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload Here Animated Sea Audio
