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 type="text/css">
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaI7RCuhocCLPlcnXGOKBmVB1ykPV-2rv1NV8tgJLUh_ugfW1vMnozyRHMiXoGiFEBItcyZgUbZ1hvDmH8TDZHNKgEMOZFmtSmHnoOXChAcMywmotVc0IOK7ioZkym0zXbwia-USwgXlfc/s1600-r/Titanic-mys2010.jpg");
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: 50%;
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: 1.4em;
font-weight: 500;
line-height: 1.4em;
letter-spacing: .35em;
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;
}
}
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: #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: 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%, blue 50%, transparent 90%);
}
.animation-mys2010 {position:absolute;bottom:0;width:100 ; }
.window {position:absolute;left:30px;top:10px;}
.bugaloos { position:absolute;left:150px;top:210px;
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);
}
}
/* End Flying-mys2010 */ /* Requires font-awesome */
.player {
width: 210px;
height: 5px;
border-radius: 10px;
padding: 0px;
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;
}
#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 300px; /*marquee height */
overflow: hidden;
padding: 2px;
padding-right: 1114px;
} </style>
<div id="animation-mys2010"> <div class="insidewalls" id="animation-mys2010"> <img border="0" class="bugaloos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTQu9HQRPdpqVJu0MxoCGEafw6e1fB2FsCSj4JGbAwQFrO1qNHeGBpOY1Dgl4ySCTtJxK4oMk78G2bODlOlEogpVp6ITCrziaM0txIP7LfhESSS-bWSSz59eQOe-O2u0Px26yDl2p3bngl/s1600-r/burung-mys2010.gif" height="29" name="e902" width="28" /> <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="30" height="40" /></a>
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"> <div id="vmarquee" style="position: absolute; width: 98%;"> <font size="4" color="aqua"face="script mt bold"> <p align="right"> Title : My Heart Will Go On Singer : Celine Dion</font> <font size="4" color="aqua"face="agency fb"> <p align="right"> Every night in my dreams I see you, I feel you, That is how I know you go on</p> <p> Far across the distance And spaces between us You have come to show you go on</p> <p> Near, far, wherever you are I believe that the heart does go on Once more you open the door And you're here in my heart And my heart will go on and on</p> <p> Love can touch us one time And last for a lifetime And never let go 'til we're gone</p> <p> Love was when I loved you One true time I hold to In my life we'll always go on</p> <p> Near, far, wherever you are I believe that the heart does go on Once more you open the door And you're here in my heart And my heart will go on and on</p> <p> You're here, there's nothing I fear, And I know that my heart will go on We'll stay forever this way You are safe in my heart And my heart will go on and on </p> </font></a>
<!-- GRADIEND --> <div class="ap" id="ap"> <div align="center"> <a href="https://sites.google.com/site/code6916/file/Lyrics-mp3-titanic-with-Marquee-Mys2010.css"title="Myscript2010s"> <h2> <font size="1" color="GREEN"face="arial"> DOWNLOAD CODE</2></a> </div> <header> <div class="Top Title Header"> <div align="center"> <audio id="player"> <source src="https://sites.google.com/site/code6916/lagu/Titanic-violin-Mys2010.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>
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>
<script>
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",50)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
If you want to directly copy and paste you canDownload Here Lyrics Mp3 Marquee
