HomeArchives for 04/13/17

Menu Fixed Gradients

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
Penerapan kode : klik entri halaman baru HTML pada link tersebut.
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;">&nbsp; M - 2010 </a>&nbsp; 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;">&nbsp; &copy; - 2016 </a>&nbsp; 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
DEMOSHOW
If you want to directly copy and paste you canDownload Here Menu Fixed Gradients

Category:
Subscribe to: Posts (Atom)