Memasang Kode Menu Fixed Gradients
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 lik pratinjau untuk melihat hasil dan klik simpan selesai
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 lik pratinjau untuk melihat hasil dan klik simpan selesai
Penerapan kode : klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam Entri halaman baru HTML dan klik simpan selesai
copy kode dibawah ini, pastekan kedalam Entri halaman baru HTML dan klik simpan selesai
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url("https://sites.google.com/site/sule2010s/icon/triplek-M2010s.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.ap {
position: fixed;
right: 0;
bottom:-44px;
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:#B24700;
border-bottom:16px solid #f0f;
}
h2 {
padding:12px;
background: -webkit-linear-gradient(transparent 10%, #483D8B;50%, transparent 90%);
background: linear-gradient(transparent 10%, #222 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:37px;
-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 ;
}
}
/*end*/
.shadow-atas:after {
content: " ";
box-shadow: 0 0 200px 108px #fff;
}
.shadow-atas:before {
content: " ";
box-shadow: 0 0 200px 110px #809FFE;
}
#M2010-shadow-atas {
margin:-110px;
box-shadow: 0 0 150px 80px #A52A2A;
}
.shadow-bawah:before,.shadow-bawah: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);
}
.shadow-bawah:after {
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-o-transform:rotate(8deg);
-ms-transform:rotate(8deg);
transform:rotate(8deg);
right:10px;
left:auto;
}
/Menu*/
a:hover {
color: #f46830;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
nav {
float: left;
width: 100%;
height:110px;
top:-19px;
left: 0;
background:#B24700;
position: fixed;
}
nav .menu {
padding: 30px;
}
ul {
float: left;
width: 100%;
margin: 0 0 30px 0;
padding: 0;
}
ul li {
float: left;
display: inline;
margin-right: 0px;
list-style: none;
}
ul li:nth-child(even) a {
background: #FFBFFE;
}
ul li a {
display: block;
padding: 20px;
font-family: "Exo", sans-serif;
font-weight: 200;
background: #00477D;
color: #fff;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #000;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
ul li.active a {
background: #58c7d0;
}
ul li.poto-circle {
float: right;
}
#poto-circle{
background-color: rgba(0, 0, 255, .15);
width:50px;
height:50px;
border-width:6px;
border-style: inset;
border-radius: 60%;
border-color: #12127D #FFFF00;
}
</style>
<div align="center" style="margin-top:110px">
<div id="M2010-shadow-atas">
</div>
<div class="shadow-atas">
</div>
<div class="shadow-bawah">
</div>
</div>
</div></div>
</div></div>
<nav class="nav">
<div class="menu">
<ul>
<li><a href="https://Link Judul"target="_blank"title="Mari Belajar">MENU 1</a></li>
<li><a href="https://Link Judul"target="_blank"title="Mari Belajar">MENU 2</a></li>
<li><a href="https://Link Judul"target="_blank"title="Mari Belajar">MENU 3</a></li>
<li><a href="https://Link Judul"target="_blank"title="Mari Belajar">MENU 4</a></li>
<li class="poto-circle"><img id="poto-circle"src="https://sites.google.com/site/sulescroll/poto/Sule-M2010.png" name="e902" border="0" width=" 50" height="50" /></a></li>
</ul>
</div>
</nav>
<div class="ap" id="ap"> <div align="center"> <div id="dibawah"> <span style="font-family:arial;font-size:11px; color:#80C8FE;"> EDITED BY. <a href="https://Link Judul"target="_blank"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="https://Link Judul"target="_blank"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;"> © - 2016 </a> CODEPEN </a> </div> <h2><div align="center" style="margin-top:-7px"> <audio id="player" preload="auto"> <source src="https://sites.google.com/site/sulelagu042/l/Instru-M2010.mp3"> </source></h2> </a></div> </div>
<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> <link Audio mp3> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'> </script> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'> </script> <script src="https://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) {
mejsPlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mejs-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mejs:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mejsPlayNext(currentPlayer) {
if ($('.mejs-list li.current').length > 0) {
var current_item = $('.mejs-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 = $('.mejs-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>
Designed by. M-2010
If you want to directly copy and paste you canDownload Here Menu Fixed Gradients
