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
Klik Pratinjau untuk melihat hasil 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 type="text/css">
body {background-image: url();color:red;height:100%;overflow:hidden;}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy80R6I_WbJ0jVO5Vm9HdPCKDWugUkHzSEd_XpA3r3LnOFuKfmJ2urJNPbNue6CUiF2uFd__obabft7qytmneX-_OlCbq89fsjkEu91XGaejbAhJBIjzsCztaqACewW-xPZOBY-inXhJA/s1600/wallpaper-M2010s.PNG");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
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:-4px;
width: 100%;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
border-bottom: 3px solid #333;
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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;
font-size: 11px;
background: linear-gradient(270deg, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
}
h2 {
padding:15px;
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%);
background: linear-gradient(transparent 10%, #333 50%, transparent 90%);
-webkit-animation: shadow 1s ease-in-out infinite;
animation: shadow 1s ease-in-out infinite;
}
/*Text Bawah1*/
M-2010, #teks, #posisi, #dibawah, span {
font: 900 15vw Raleway;
position: relative;
display: inline-block;
}
#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:28px;
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
0% {
text-shadow: 0 0 2px #B0E0E6 ,
0 0 8px #B0E0E6 , 0 0 10px #B0E0E6 ,
0 0 20px #B0E0E6 , 0 0 30px #B0E0E6 ,
0 0 40px #B0E0E6, 0 0 50px #B0E0E6 ,
0 0 80px #B0E0E6;
}
50% {
text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8),
0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
0 -10px 2px rgba(255, 0, 0, 0.8);
}
100% {
text-shadow: 0 0 2px #800080 ,
0 0 8px #800080 , 0 0 10px #800080 ,
0 0 20px #800080 , 0 0 30px #800080 ,
0 0 40px #800080 , 0 0 50px #800080 ,
0 0 80px #800080 ;
}
}
.wrapper {
position: absolute;
top: 100%;
left: 50%;
width: 400px;
margin-left: -200px;
font: 300 30px/1 'Open Sans Condensed', sans-serif;
text-align: center;
text-transform: uppercase;
color: #000;
animation: 190s credits linear infinite;
}
.movie {
margin-bottom: 50px;
font-size: 50px;
}
.job {
margin-bottom: 5px;
font-size: 18px;
}
.name {
margin-bottom: 50px;
font-size: 35px;
}
@keyframes credits {
0% {
top: 100%;
}
100% {
top: -500%;
}
}
.shadow-top:after {
content: " ";
box-shadow: 0 0 200px 180px #CC0099;
}
.shadow-top:before {
content: " ";
box-shadow: 0 0 200px 10px #F00;
}
#M2010-shadow {
margin:-150px;
box-shadow: 0 0 150px 80px #809FFE;
}
.shadow1:before,.shadow1:after {
z-index:-1;
position:absolute;
content: " ";
bottom:25px;
left:10px;
width:50%;
max-width:110px;
box-shadow: 0 0 200px 90px #809FFE;
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-o-transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
transform:rotate(-8deg);
}
.shadow1:after {
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-o-transform:rotate(8deg);
-ms-transform:rotate(8deg);
transform:rotate(8deg);
right:10px;
left:auto;
}
div.cities {
text-transform: lowercase;
color: green;
margin: 20px 0 20px 0;
padding: 20px;
}</style>
<div align="center" style="margin-top:110px"> <div class="shadow1"> </div> <div id="M2010-shadow"> </div> <div align="center"> <div class="shadow-top"> </div> <div class="M-logo"> </div> </div></div> </div></div> <div class='wrapper'> <div class='movie'> Welcome</div> <div class='job'> Myscript2010</div> <div class='name'> LEARN EDITING SCRIPT</div> <div class='job'> WITH CODE</div> <div class='name'> CSS HTML EFFECT</div> <div class='job'> SOURCES CODE</div> <div class='name'> CODEPEN GITHUB</div> <div class='job'> SOURCE NEXT</div> <div class='name'> ALL SOURCES CODE</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT SHINE</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT ROTATE</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT SLIDE</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT HOVER</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT TRANSISI</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT FLIP</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT TOOLTIP</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT RADIAL</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT MULTIPLE</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT ANIMATED</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT EXPANDING</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT TRANSFORMS</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT OVERLAY</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT LOADING</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT CIRCLE</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT NAPIGATION</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT DROPDOWN</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT LIGHTING</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT ZOOM</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT SCALE</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT OPACITY</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFECT FLASHING</div> <div class='job'> CODE EFFECT</div> <div class='name'> EFFCET <br>SMOKE & OTHERS</div> <div class='name'> </div> <div class='job'> explanation - etcetera<br> edited and applied in blogspot </div> <div class='job'> </div> <div class='name'> </div> <div class='job'> Let's Learn <br> Learning : According to the Experts </div> <div class='job'> oward L. Kingsley<br> in Dantes (1997) </div> <div class='job'> Learning is the most<br>a process not a product <br> The process whereby the properties and behavior<br> generated and transformed through practice and training </div> <div class='job'> Buy Your Future With Science <br> Not just your life that facilitated<br> when you diligently studied<br><br> but also the lives of others<br> learning will give you a new understanding<br> so you can face the new challenges <br> <br> </div> <div class='name'> </div> <div class='job'> </div> <div class='name'> </div> <div class='job'> Mari Belajar<br> Belajar : Menurut Para Ahli </div> <div class='job'> oward L. Kingsley<br> dalam Dantes (1997) </div> <div class='job'> Belajar adalah<br> suatu proses bukan produk<br> Proses dimana sifat dan tingkah laku<br> ditimbulkan dan diubah melalui praktek dan latihan. </div> <div class='job'> Beli Masa Depan Anda Dengan Ilmu<br> Bukan hanya kehidupan anda yang dimudahkan<br> saat anda rajin belajar<br><br> tapi juga kehidupan orang lain<br> belajar akan memberikan anda pemahaman baru<br> sehingga anda bisa menghadapi tantangan baru<br> <br> </div> <div class='name'> </div> <div class='name'> SONG TITLE ESQ </div> <div class='job'> EMOTIONAL <BR>SPIRITUAL QUESTIENT </div> <div class='name'> INTELLIGENCE </div> <div class='name'> WEBBLOG @ EMAIL<BR> </div> <div class='job'> <div class="cities"> myscript2010s@gmail.com<br> http://myscript2010s.blogspot.co.id </div> <div class='name'> </div> <div class='job'> </div> <div class='name'> </div> <div class='job'> CODE EDITED BY.</div> <div class='name'> MYSCRIPT2010</div> <div class='job'> </div> <div class='name'> Copyright @ 2016</div> <div class='job'> </div> <div class='name'> </div> <div class='job'> </div> <div class='name'> </div> <div class='job'> </div> <div class='name'> </div> <div class='job'> </div> <div class='name'> </div> <div class='job'> </div> <div class='name'> </div> <div class='job'> </div> <div class='name'> </div> <div class='job'> </div> <div class='name'> </div> <div class='job'> </div> <div class='name'> </div> <div class='job'> </div> <div class='name'> Cibeber Cimahi</div>
</div> </div></div> </div></div>
<div id="butterfly">
<div id="butter1" class="butter">
<div class="butterFly1 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYDu2_nwIs7Mf5uVt-5FXf8StHrcDhOjVftC5fXM-xyvUHGQKevo-Fce8cDRBwxJQ5n5Zc-aiOGAX3wlB0ElD6Izq6HNSaoYo4Mun1LWHndPtQnpCKZ4FtzSXV4YxzQYi3EOtvQ3mt-CE/s1600/kupu-3-mys2010.png" alt="" /></div>
</div>
<div id="butter2" class="butter">
<div class="butterFly2 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYcIHGLveuhclVgXgQ3oTtkaByfp7fe9hI9WBpE1oduK0Cfi7hFrGXBdNiPkS7MoYAdBfUwT7OM6DIY4z6NuJFcKsA7_byxnwlJlK3LYU3oXn2W32uBeHqQDCGzib7w39mxpZ_mBTZ1lU/s1600/kupu-2-mys2010.png" alt="" /></div>
</div>
<div id="butter3" class="butter">
<div class="butterFly3 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhwTjGg1wpc47Ozb9pbvbZwTrXVomtaVwIm7p0Brd4fLrScxBpkRWVDpcO_11NzA1SSbBOeHLcIj2xro7Up6nQIpS3eeaxHh1f2i9yqGAa4YEvkLaYBy_ALSkZGIxU04I9GDnINceX4I/s1600/kupu-1-mys2010.png" alt="" /></div>
</div>
</div>
<link href="https://sites.google.com/site/usesitesto/file-code/kupu-kupu-mys2010.css " rel="stylesheet" type="text/css">
<header>
<a href="http://sample-mys2010.blogspot.co.id" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a> </h2>
</a>
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><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:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" 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/laguhiburan/mp3-1/ESQ_Mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<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="//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>
If you want to directly copy and paste you canDownload Here Text Movie Gradiend
