Memasang Kode Parallax Effects Shine
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 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 class="Mys2010-styles">
body {
background:#333;} 
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:-2px;
  width: 100%;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg,#555,#111, #444, #222, #444,#111, #555);
  border-bottom: 3px solid #24006B;  
-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:80px;
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:  #111;
border-top: 2px solid #222;
z-index: 9999;
} 
h2 {
padding:15px; 
border-top: 2px solid #222; 
}
a{text-decoration:none}
html, body {
height: 100%;
width: 100%;
}
.center-image {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
@import url(https://fonts.googleapis.com/css?family=Lora:400,400italic|Lato:400,300,100,700,900);
* {
  margin: 0 auto;
  padding: 0;
}
.container {
  height: 800px;
  width: 100%;
  overflow: hidden;
}
.container:nth-child(3) {
  height: 850px;
}
.img-1 {
  background: url("https://sites.google.com/site/sulescroll/poto/Bg-Youtube-M2010.jpg");
  background-attachment: fixed;
  background-repeat: none;
  background-position: top left;
}
.img-2 {
  background-color: #ccc;
}
.img-3 {
  background: url("https://sites.google.com/site/sulescroll/poto/Sule-Youtube-Lisensi-M2010.png");
  background-size: cover;
  background-repeat: none;
  background-attachment: fixed;
}
.img-4 {
  background-color: #02050A;
}
.img-5 {
  background: url("https://sites.google.com/site/sulescroll/poto/Play-Youtuber-M2010.jpg");
  background-size: cover;
  background-repeat: none;
  background-attachment: fixed;
}
.images-text {
  text-align: center;
  text-transform: uppercase;
  font-family: 'lato';
  font-weight: 200;
  font-size: 4.5em;
  color: #dad;
  letter-spacing: .05em;
  line-height: 1.1em;
  width: 90%;
  top: 50%;
  position: relative;
  top:20%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.images-text2 {
  text-align: center;
  text-transform: uppercase;
  font-family: 'agency fb';
  font-weight: 200;
  font-size: 32px;
  color: #222;
  letter-spacing: .05em;
  line-height: 1.1em;
  width: 90%;
  top: 50%;
  position: relative;
  top:20%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.image-cont {
  border-left: solid 4px #192222;
  width: 60%;
  margin: 7% auto;
}
.panel-text {
  width: 90%;
  margin: 0 auto;
  font-family: "lato";
  letter-spacing: .08em;
  font-size: 2.5em;
}
.headline1 {
  color: #ff0;
  text-align: center;
  padding-top: 80px;
  margin-bottom: -150px;
  font-weight: 300;
font-family: "agency fb";
}
.headline2 {
  padding: 0 0 10px 2.5%;
  text-align: left;
  color: #307C7D;
  font-weight: 400;
}
.text {
  width: 90%;
  margin: 0 auto;
  padding: 3.5% 0 0 2.5%;
  font-family: "lora";
  font-color: #f00;
  font-size: 1.2em;
  line-height: 1.8em;
}
.column-container {
  width: 100%;
  height: 375px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.column-container aside {
  float: left;
  width: 26.66666666666667%;
  height: 300px;
  margin: 2.5%;
  opacity: .6;
  border-radius: 5px;
  transition: all .5s ease;
}
.column-container aside:hover {
  opacity: 1;
  border-radius: 50%;
}
.column-container aside:nth-child(1) {
  margin-left: 5%;
}
.column-text {
  font-family: "lato";
  font-weight: 100;
  font-size: 3em;
  text-align: center;
  color: #333;
  width: 100%;
  height: 300px;
  line-height: 300px;
  transition: all 0.7s ease;
}
.column-text:hover {
  color: #dad;
}
.bg-image1 {
  background: url("https://sites.google.com/site/sulescroll/poto/YouTube-blocked-M2010.png");
  background-repeat: none;
  background-size: cover;
  max-width: 100%;
}
.bg-image2 {
  background: url("https://sites.google.com/site/sulescroll/poto/Copyright-M2010.jpg");
  background-repeat: none;
  background-size: cover;
  max-width: 100%;
}
.bg-image3 {
  background: url("https://sites.google.com/site/sulescroll/poto/Play-Youtube-M2010.jpg");
  background-repeat: none;
  background-size: cover;
  max-width: 100%;
}
.video {
  width: 560px;
  height: 315px;
  position: absolute;
 position: center;
  top:366px;
 left: -2px;
  right:6px;
  bottom: 0;
  margin: auto;
  z-index: 100;
}
</style>
<div class="container img-1">
<figure class="images-text">PARALLAX <br> EFFECTS SHINE</figure>
<figure class="images-text2"><br><br><br> 
<p>Mari belajar mendesain webblog<br> menggunakan kode parallax Effects Shine<br>
dengan cara mengedit kode parallax <br>dan menerapkannya kedalam HTML webblog<br>
agar tampilan webblog terlihat rapih. <br>  GETTING THE CODE <a href="https://Link Download"title="Mari Belajar"style="text-decoration:none">
<span style="color:green;"> download </a>kode  parallax <br>edit sesuai keinginan </p>
</figure>
</div>
<div class="container img-4" >
    <h1 class="panel-text headline1">Lisensi Standar Youtbe Licence</h1>
  <div class="column-container">
    <aside class="img-3-column bg-image1"><p class="column-text">BLOCKED</p></aside>
    <aside class="img-3-column bg-image2"><p class="column-text">LICENCE</p></aside>
    <aside class="img-3-column bg-image3"><p class="column-text">ALLOWED</p></aside>
  </div>
</div>
<div class="container text">
  <div class="image-cont">
  <h1 class="panel-text headline2">Lisensi di Situs YouTube</h1>
  <p>Youtube menyediakan dua jenis lisensi, yaitu perlindungan Hak Cipta dan Perlindungan Creative Commons BY (CC BY). Suatu konten di YouTube yang dilindungi oleh Hak Cipta, jika seseorang akan mendownload, mengedit dan mengkomersialisasikan isi konten <p>di YouTube tersebut, maka seseorang harus terlebih dahulu Meminta izin</p>  
<p><i>Jika seseorang menggunakan video dari YouTube diharuskan menghubungi <p> pembuat atau pengunggah video tersebut<p> dengan cara mengeklik tautan di saluran pengguna -Kirim Pesan- dan meminta izin kepada pemilik</i> serta harus mengetahui jenis lisensi yang digunakannya <p>mengambil kontent dari youtube untuk tujuan hal yang wajar, <p> harus menyantumkan sumber kontent tersebut, sebagaimana dijelaskan <p>dalam UU Hak Cipta, UU No 19 Tahun 2002 pada pasal 15 (a) : <p>agar tidak dianggap sebagai pelanggaran Hak Cipta,
</p>
</div>  
</div>
<div class="container img-3">
  <figure class="images-text">
<font size="30" color="green"face="agency fb"> DESIGN CODE IS EDITED BY.</font></figure>
</div>
<div class="container text">
  <div class="image-cont">
  <h1 class="panel-text headline2">Creative Commons</h1>
 Lisensi Creative Commons adalah cara standar bagi pembuat konten untuk memberikan izin penggunaan karyanya kepada orang lain. YouTube membolehkan pengguna untuk menandai video mereka dengan lisensi Creative Commons CC BY. Video yang ditandai tersebut dapat diakses oleh pengguna YouTube untuk digunakan, bahkan secara komersial, dalam video mereka sendiri melalui Editor Video YouTube.
Atribusi diberikan secara otomatis menurut lisensi CC BY. Itu berarti video yang Anda buat menggunakan konten Creative Commons akan otomatis menampilkan judul video sumber di bawah pemutar video. Anda yang memegang hak cipta, dan pengguna lain dapat menggunakan kembali karya Anda sesuai persyaratan lisensi.
Creative Commons di YouTube
Kemampuan untuk menandai video yang diupload dengan lisensi Creative Commons tersedia bagi semua pengguna.
Lisensi standar YouTube merupakan setelan default bagi semua upload. Untuk meninjau persyaratan lisensi YouTube standar.
Karena lisensi Creative Commons untuk konten asli, Anda tidak dapat menandai video dengan lisensi Creative Commons apabila ada klaim Content ID atas video tersebut.
Dengan menandai video asli Anda dengan lisensi Ceative Commons, Anda memberikan hak kepada seluruh komunitas YouTube untuk menggunakan kembali atau mengedit video tersebut. <a href="https://support.google.com/" target="_blank" title="Mari Belajar"><span style="color:green;"> Source </a> Support Google
</div>  
</div>
<div class="container img-5">
<figure class="images-text">
<font size="50" color=" #191970"face="agency fb"><p>&#9991;</p><p> M2010</p>
<div class='video'>
</div>
<div align="center" style="margin-top:-77px"> 
<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>
    (function () {
    var ambilight;
    $(document).ready(function () {
        return ambilight.on('KSqttO3NtCg', '.video');
    });
    ambilight = {
        on: function (yt_id, container) {
            $(container).append('<iframe width="560" height="315" src="https://www.youtube.com/embed/nNxcUbHpGms" frameborder="0" allowfullscreen></iframe>');
            return $('body').tubular({ videoId: yt_id });}};
}.call(this));  
  </script>
</figure>
</div>
<div class="ap" id="ap"><h2>
<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;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> <h2>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id" target="_blank" title="Mari Belajar">
<h2>
<span style="color:#f00; font-size:11pt">
<div class="Liplop">Myscript2010</div></a>
</h2>  
</header> 
Code by. All Source
Edited by. Mys2010 On Codepen
If you want to directly copy  and  paste you canDownload Here  Parallax Effects Shine

Memasang Kode Slide Full Page Js
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 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 class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;} 
body {
background:#000;} 
@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);
/* ICON STYLES - ICON FROM: http://fontastic.me/
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: "untitled-font-1";
  src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot");
  src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot#iefix") format("embedded-opentype"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.woff") format("woff"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.ttf") format("truetype"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.svg#untitled-font-1") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:after,
[class*=" icon-"]:after {
  font-family: "untitled-font-1";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-up-open-big { display: inline-block; }
.icon-up-open-big:after {
  content: "a";
  font-size: 2.5em;
  display: block;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
  color: black;
  -webkit-transition: color .3s;
          transition: color .3s;
}
.icon-up-open-big:hover:after {
 color: white; 
}
.scroll-icon {
 position: absolute;
  left: 50%;
  bottom: 30px;
  padding: 0 10px;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
}
/* HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.l-left {
 float: left;
}
.l-right {
 float: right;
}
.end {
 margin-top: 30px;
 font-size: 3em;
 font-weight: bold;
 opacity: 0;
 -webkit-transform: translateY(300px);
         transform: translateY(300px);
 -webkit-transition: opacity, -webkit-transform 1s;
         transition: opacity, -webkit-transform 1s;
         transition: opacity, transform 1s;
         transition: opacity, transform 1s, -webkit-transform 1s;
 -webkit-transition-delay: 1s;
         transition-delay: 1s;
}
/* RESET-GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
 margin: 0;
 padding: 0;
 font-family: 'Alegreya Sans', Arial, sans-serif;
 text-transform: uppercase;
}
html {
 font-size: 62.5%;
}
body {
 color: black;
 letter-spacing: .18em;
}
a {
 text-decoration: none;
 color: white;
}
ul, li {
 list-style-type: none;
}
/* NAV STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-top {
 background: rgba(0, 47, 77, .3);
 height: 70px;
 padding: 0 10px;
 position: fixed;
 top: 52px;
 width: 100%;
 z-index: 12;
 box-sizing: border-box;
}
h1 {
 line-height: 70px;
 height: 70px;
}
h1 a {
 display: block;
 padding: 0 10px;
}
.toggle-menu {
 width: 50px;
 height: 50px;
 display: inline-block;
 position: relative;
 top: 10px;
}
.toggle-menu i {
 position: absolute;
 display: block;
 height: 2px;
 background: white;
 width: 30px;
 left: 10px;
 -webkit-transition: all .3s;
         transition: all .3s;
}
.toggle-menu i:nth-child(1) {
 top: 16px;
}
.toggle-menu i:nth-child(2) {
 top: 24px;
}
.toggle-menu i:nth-child(3) {
 top: 32px;
}
.open-menu i:nth-child(1) {
 top: 25px;
 -webkit-transform: rotateZ(45deg);
         transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
 background: transparent;
}
.open-menu i:nth-child(3) {
 top: 25px;
 -webkit-transform: rotateZ(-45deg);
         transform: rotateZ(-45deg);
}
nav {
  height: 0;
 opacity: 0;
  box-sizing: border-box;
 background: rgba(0, 47, 77, .25);
 position: fixed;
 top: 70px;
 width: 100%;
  -webkit-transition: all 3s;
          transition: all 3s;
}
.open-menu ~ nav {
 opacity: 1;
  padding: 80px 0;
 z-index: 15;
 height: calc(90vh - 70px);
}
nav ul {
 padding: 0 10px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}
nav li {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
}
nav li a {
 font-size: 2em;
 display: block;
 padding: 30px;
 text-align: center;
 -webkit-transition: background .3s;
         transition: background .3s;
}
nav li:nth-child(odd) a,
body.fp-viewing-fifthSection-1 #menu li:nth-child(5) a {
 background: #962D3E;
}
nav li:nth-child(even) a {
 background: #aa3346;
}
nav li:nth-child(odd) a:hover {
 background: #9e2f41;
}

nav li:nth-child(even) a:hover {
 background: #c53c52;
}
nav li.active a,
body.fp-viewing-fifthSection-1 #menu li:last-child a {
  background: #453659;
}
/* SECTION STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section { 
 text-align: center;
  /*background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;*/
}
h4 {
text-transform: uppercase;
Little-text-transform: lowercase;
 font-size: 4em;
 margin-bottom:20px;
}
h3 {
 font-weight: 300;
 font-size: 2.8em;
}
/* SLIDENAV STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#fp-nav ul li a span, 
.fp-slidesNav ul li a span {
 background: white;
 width: 8px;
 height: 8px;
 margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, 
.fp-slidesNav ul li:hover a.active span {
 width: 16px;
 height: 16px;
 margin: -8px 0 0 -8px;
 background: transparent;
 box-sizing: border-box;
 border: 1px solid #24221F;
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 767px) {
 nav ul {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
 }
 nav li {
  margin-top: 1px;
 }  
  nav li a {
    font-size: 1.5em;
  }
   .scroll-icon {
    display: none;
  }
}
@media screen and (max-width: 400px) {
  html {
    font-size: 50%;
  }
  .open-menu ~ nav {
  padding: 20px 0;
 }
 nav li a {
  padding: 3px;
 }
}</style>
<header>
<div class="header-top clearfix">
    <h1 class="l-left">
<a href="#firstSection">Your Logo</a></h1>
    <a class="l-right toggle-menu" href="#">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
</a></div> 
  <nav class="hide">
    <ul id="menu">
      <h2><li data-menuanchor="firstSection">
        <a href="#firstSection" title="First Section">First Section</a>
      </li>
      <li data-menuanchor="secondSection">
        <a href="#secondSection" title="Second Section">Second Section</a>
      </li>
      <li data-menuanchor="thirdSection">
        <a href="#thirdSection" title="Second Section">Third Section</a>
      </li>
      <li data-menuanchor="fourthSection">
        <a href="#fourthSection" title="Fourth Section">Fourth Section</a>
      </li>
      <li data-menuanchor="fifthSection">
        <a href="#fifthSection" title="First Slide">First Slide</a>
      </li>
      <li data-menuanchor="fifthSection/1">
        <a href="#fifthSection/1" title="Second Slide">Second Slide</a>
      </li>
    </ul> 
  </nav>
 </header>
<div id="fullpage">
  <section class="vertical-scrolling">
  <h4>M-2010</h4> 
    <h3>learn web design<br>This is the first section</h3>
    <div class="scroll-icon">
      <p>Jump into the last slide</p>
      <a href="#fifthSection/1" class="icon-up-open-big"></a>
    </div>
  </section>
  <section class="vertical-scrolling">
   <h4>SSLIDE 2</h4> 
    <h3>This is the second section</h3>
  </section>
  <section class="vertical-scrolling">
    <h4>SLIDE 3</h4>
    <h3>This is the third section</h3>
  </section>
  <section class="vertical-scrolling">
    <h4>SLIDE 4</h4> 
    <h3>This is the fourth section</h3>
  </section>
  <section class="vertical-scrolling">
    <div class="horizontal-scrolling">
      <h4>fullPage.js</h4>
      <h3>This is the fifth section and it contains the first slide (actually section == first slide)</h3>
    </div>
    <div class="horizontal-scrolling">
      <h4>Myscript2010</h4>
      <h3>This is the second slide</h3> 
      <p class="end">Thank you!</p>
    </div>
  </section>
</div>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css'>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js'>
</script><script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js'>
</script>
<script>
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// toggle menu 
$header_top.find('a').on('click', function() {
  $(this).parent().toggleClass('open-menu');
});
// fullpage customization
$('#fullpage').fullpage({
  sectionsColor: ['#B8AE9C', '#348899', '#F2AE72', '#5C832F', '#B8B89F'],
  sectionSelector: '.vertical-scrolling',
  slideSelector: '.horizontal-scrolling',
  navigation: true,
  slidesNavigation: true,
  controlArrows: false,
  anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection'],
  menu: '#menu',
 afterLoad: function(anchorLink, index) {
    $header_top.css('background', 'rgba(0, 47, 77, .3)');
    $nav.css('background', 'rgba(0, 47, 77, .25)');
    if (index == 5) {
        $('#fp-nav').hide();}},
 onLeave: function(index, nextIndex, direction) {
    if(index == 5) {
      $('#fp-nav').show();}},
  afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
      $.fn.fullpage.setAllowScrolling(false, 'up');
      $header_top.css('background', 'transparent');
      $nav.css('background', 'transparent');
      $(this).css('background', '#374140');
      $(this).find('h4').css('color', 'white');
      $(this).find('h3').css('color', 'white');
      $(this).find('p').css({
          'color': '#DC3522',
          'opacity': 1,
          'transform': 'translateY(0)'});}},
  onSlideLeave: function( anchorLink, index, slideIndex, direction) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
      $.fn.fullpage.setAllowScrolling(true, 'up');
      $header_top.css('background', 'rgba(0, 47, 77, .3)');
      $nav.css('background', 'rgba(0, 47, 77, .25)');}}}); 
</script>
Desain Webblog Slide Full Page Js untuk menampilkan Menu, Edit Kode Sesuai keinginan
Slide Code by. Alvarotrigo
Design code is edited by. Mys2010 In Codepen
* If you want to directly copy  and  paste you canDownload Here  Slide Full Fage Js 

Memasang Kode Windows 10
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 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 class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;} 
body {
background:#000;} 
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:-2px;
  width: 100%;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg,#AA80FE,#660099, #809FFE, #B0E0E6, #809FFE,#660099, #AA80FE);
  border-bottom: 3px solid #24006B;  
-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:80px;
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:  #111;
border-top: 2px solid #222;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, #000 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #000 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah #shadow;}
 .text-bawah {
  
}
.M2010-textshadow {  
   margin: 0 auto;
  text-align: center;
  color: #00248E;
  text-shadow: #00248E 10px 0px 30px, #00248E -10px 0px 30px, #00248E 0px 10px 30px, #00248E 10px 0px 30px, #00248E -10px 0px 30px, #00248E 0px 10px 30px,#00248E 0px -10px 30px;
  color: #eee;
  background:#eee;
  mix-blend-mode: screen;
}
#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:40px;
 -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 #809FFE,
 0 5px 15px #809FFE, 0 0 50px #809FFE,
 0 -10px 2px #809FFE;
  }
 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 #24006B;   
}
.shadow-atas:before {  
    content: " ";
    box-shadow: 0 0 200px 110px #AA80FE;    
}
#M2010-shadow-atas  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #24006B;  
}
.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 #24006B;  
    -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;
}
.Liplop {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
color: #000;
margin-top:-3px;
} 
.Liplop {
  -webkit-animation: fade-in 0.2s linear infinite alternate;
  -moz-animation: fade-in 0.2s linear infinite alternate;
  animation: fade-in 0.2s linear infinite alternate;
}
@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*end*/
 
M2010-text-bawah-shadow;}
 .text-bawah {
  position: absolute;
  right: 410px;
  bottom: -310px;  
font-size: 50px;
font-family: agency fb, sans-serif;
  text-transform: uppercase;
}
.text-bawah1 {
  position: absolute;
  left: 90px;
  bottom: 189px;
  text-align: left;
  text-transform: uppercase;}
.text-bawah2 {
  position: absolute;
  right: 90px;
  bottom: 189px;
  text-align: right;
  text-transform: uppercase;
}
.M2010-textshadow {  
margin: 0 auto;
text-align: center;
color: #FFF8DC;
text-shadow: #dad 10px 0px 30px, #033FFF -10px 0px 30px, #dad 0px 10px 30px, #dad 0px -10px 30px;
color: #eee;
background:#eee;
mix-blend-mode: screen;
}
/*win*/
@import url(http://fonts.googleapis.com/css?family=Gudea);
body {
background-color: #312949;
margin: auto;  
overflow: hidden;  
}
h1 {
color: white;
margin-top:170px;
text-transform: uppercase;
font-family:Bernard MT Condensed;
font-size: 32pt; 
letter-spacing: 4px;
width: 800px;
}
.container {
 width:800px;
 padding: 0;
 margin: 0;
}
.win-1 {
 width: 760px;
 padding: 0;
 margin-left: -240px;
 position: fixed;
}
.win-2 {
 width: 320px;
 padding: 0;
 position: fixed;
 left: 387px;
}
.win-3{
 width: 320px;
 padding: 0;
 position: fixed;
 left: 699px;
}
.win-4 {
 width: 470px;
 padding: 0;
 left: 1013px;
 position: fixed;
}
.win-5 {
 width: 550px;
 padding: 0;
 left: 1483px;
 position: fixed;
}
img {
 padding: 1.2px;
}

#img-1{
 width: 150px;
 height: 150px;
}

#img-2 {
 width: 150px;
 height: 150px;
}

#img-3{
 width: 150px;
 height: 150px;
}

#img-4{
 width: 150px;
 height: 150px;
}
 
#img-5{
 width: 150px;
 height: 150px;
}

@media screen and (max-width: 1024px){
media screen {
 left: -595px;
 top: -82px;
} 
.container {
 width: 1600px;
 margin-left: -283px;
}}
@media screen and (min-width: 1124px) and (max-width: 1980px){
.container {
 width: 2000px;
 margin-left: -160px;
}  
</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>
<meta charset="utf-8"> 
<title>Windows 10</title> 
<link href=style/main.css rel=stylesheet> 
</head> <body>    
<h1>WINDOWS 10</h1>
<div id="container" class="container" >
<ul id="scene" class="scene border fill">
<li class="layer expand-width" data-depth="1.00"> <div class="win-1">
<a href="https://www.mozilla.org/id/firefox/new/" target="_blank"> 
<img class="aspect" id="img-4"src="https://sites.google.com/site/sule2010s/icon/Firefox-M2010.png"></a>         
<a href="https://line.me/id/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Line-M2010.png"></a>         
<a href="https://www.google.com/chrome/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Chrome-M2010.png"></a>         
<a href="https://drive.google.com/"target="_blank"> 
<img class="aspect"src="https://sites.google.com/site/sule2010s/icon/Drive-M2010.png"></a>         
<a href="https://www.origin.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/origins-m2010.png"></a>         
<a href="https://github.com/" target="_blank"> 
<img class="aspect"src="https://sites.google.com/site/sule2010s/icon/Github-M2010.png"></a>         
<a href="https://facebook.com/" target="_blank"> 
<img class="aspect"src="https://sites.google.com/site/sule2010s/icon/facebook-M2010.png"></a>         
<a href="https://dribbble.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/dribbble-m2010.png"></a>         
<a href="http://www.deviantart.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Deviant-art-M2010.png"></a>                  
<a href="https://www.instagram.com/myscript2010/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Instagram-M2010.png"></a>          
<a href="https://twitter.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/twitter-M2010.png"></a>          
<a href="https://www.behance.net/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Behance-M2010.png"></a>          
<a href="https://id.pinterest.com/myscript2010/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Pinterest-M2010.png"></a>  
<a href="https://www.tumblr.com/blog/myscript2010s" target="_blank"> 
<img class="aspect" id="img-3"src="https://sites.google.com/site/sule2010s/icon/Tumblr-M2010.png"></a>  
<a href="https://plus.google.com/u/0/101254379497511200564/posts" target="_blank"> 
<img class="aspect" id="img-2"src="https://sites.google.com/site/sule2010s/icon/g-plus-m2010.png"></a>  
<a href="http://www.picnik.com/" target="_blank"> 
<img class="aspect" id="img-1"src="https://sites.google.com/site/sule2010s/lagu/Picnik-M2010.png"></a>        
</div>
</li>
<li class="layer expand-width" data-depth="1.00"> 
<div class="win-2">
<a href="https://www.periscope.tv/w/1RDGlRElzYmxL?channel=trump-protests" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Periscope-M2010.jpg"></a>         
<a href="https://www.nytimes.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Times-M2010.png"></a>          
<a href="http://www.foxnews.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/FoxNews-M2010.png"></a>                 
<a href="https://telegram.org/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Telegram-Mobile-M2010.png"></a>          
<a href="https://www.rss.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/rss-m2010.png"></a>  <a href="https://gplusrss.com/entries" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Gplus-to-rss-M2010.png"></a>          
<a href="https://www.google.com/bookmarks/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Bookmarks-M2010.png"></a>          
<a href="https://web.telegram.org/#/login" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Telegram-web-M2010.png"></a>        
</div>
</li>
<li class="layer expand-width" data-depth="1.00"> <div class="win-3">
<a href="https://www.evernote.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/evernote-m2010.png"></a>          
<a href="http://www.flaticon.com"target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Flaticon_m2010.png"></a>           
<a href="https://www.snapchat.com/download" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Snapchat-Download-M2010.png"></a>    
<a href="https://accounts.snapchat.com/accounts/login" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Snapchat-Login-M2010.png"></a>          
<a href="http://www.bluestacks.com/id/index.html" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Bluestacks-M2010.png"></a>  <a href="http://www.rdio.com" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Rdio-M2010.png"></a>          
<a href="https://vine.co/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Vine-M2010.png"></a>   
<a href="https://www.lightwave3d.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Lightwave-M2010.png"></a>       
</div>
</li>
<li class="layer expand-width" data-depth="1.00"> <div class="win-4">
<a href="https://sites.google.com/site/sule62001/sule2001code/Mylogo-M2010.png"target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Mylogo-M2010s.png"></a>            
<a href="https://www.wikipedia.org/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/wikipedia-m2010.png"></a>            
<a href="http://www.fastpictureviewer.com/downloads/"target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Fast-Picture-M2010s.png"></a>            <a href="https://www.mediafire.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/MediaFire-M2010.png"></a>            
<a href="http://www.crunchyroll.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Crunchyroll-M2010.png"></a>            
<a href="https://www.spotify.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Spotify-M2010.png"></a>             
<a href="https://www.dropbox.com" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Dropbox-M2010.png"></a>            
<a href="http://fontawesome.io/icons/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/The-Icon-M2010.png"></a>  
<a href="https://mail.google.com/tasks/canvas?pli=1" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Tasks-M2010.png"></a>  
<a href="https://www.blogger.com/about/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Blogger-M2010.png"></a>            
<a href="https://flipboard.com/" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/icon/Flipboard-M2010.png"></a>            
<a href="http://www.ubuntu.com/" target="_blank"> 
<img class="aspect" src="https://lh5.googleusercontent.com/8JmuxZUtHLC6cmZm7CQW6-yQLFUsrHFBLDQpEM5x5w=s150-no"></a>         </div>
</li>
<li class="layer expand-width" data-depth="1.00"> <div class="win-5">
<a href="http://www.iminfo.in/post/how-to-generate-create-barcode-using-jquery-plugin"target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Iminfo-M2010.png"></a>            
<a href="https://api.jqueryui.com/"target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Jquery.png"></a>            
<a href="https://www.yahoo.com/" target="_blank"> 
<img class="aspect" src="https://lh3.googleusercontent.com/-8U0UC08oOsY/VFnrWp8TxlI/AAAAAAAADqA/rq5yvMma-hk/s150-no/Yahoo.png"></a>            
<a href="https://developers.google.com/speed/libraries/#jquery"target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Developers-M2010.png"></a>            
<a href="https://www.iconfinder.com" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Icon-M2010.png"></a>            
<a href="http://sule-lagu.blogspot.co.id/2016/12/audio-mp3-playlist.html"target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Music-M2010.png"></a>            
 <a href="https://www.dropbox.com" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Codepen-M2010.png"></a>            
<a href="http://sule-lagu.blogspot.co.id/p/newspaper-style-text.html" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Seo-M2010.png"></a>  
<a href="https://www.youtube.com/user/myscript2010s" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Youtube-M2010.png"></a>  
<a href="https://translate.google.co.id/?hl=id&tab=wT#id/en/M-2010" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Translate-M2010.png"></a>            
<a href="http://sule-lagu.blogspot.co.id/p/statis-home.html" target="_blank"> 
<img class="aspect" src="https://sites.google.com/site/sule2010s/lagu/Sitemap-M2010.png"></a>  
<a href="http://www.mobomarket.co.id/" target="_blank"> 
<img class="aspect" id="img-5"src="https://sites.google.com/site/sule2010s/lagu/Mobomarket-apk-M2010.png"></a>         </div>
</li>
</ul>
</div>
</body>    
<header> 
<a href="http://Link Title" target="_blank" title="Mari Belajar"> <h2>
<span style="color:#f00; font-size:11pt"> <div class="Liplop">
Myscript2010</div>
</a> </h2>
</header>     
<h3 class="M2010-textshadow">
<div class="text-bawah">
</div>
<div class="text-bawah1">
<a href="https://www.timeanddate.com/" target="_blank" title="Timeanddate"> 
<span style="color: #fff; font-size: 26px;">&#9760;</a></div>
<div class="text-bawah2">
<a href="http://sule-parallax.blogspot.co.id/p/wind.html"title="Mari Belajar"> 
<span style="color: #fff; font-size: 26px;"> <span style="cursor:move">&#9760;</a></div>
</h3>
<h3 class="M2010-textshadow">
<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;">&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://codepen.io/Myscript2010/pen/QdJgJp" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp; CODEPEN </a>  </div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/man349719/song/Axel-Rudi-P-Crest4-glory-night-Instru-M2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script> 
<music>    
<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>
/*!
* Animations - Windows 10
* Code css - Parallax.prototype
* Source by. All Sources
* Edited by. M2010 
* Copyright @ 2017
* Visit : http://sample-mys2010.blogspot.co.id
*/
;(function(window, document, undefined) 
{
// Strict Mode
  'use strict';
  // Constants
  var NAME = 'Parallax';
  var MAGIC_NUMBER = 30;
  var DEFAULTS = {
    relativeInput: false,
    clipRelativeInput: false,
    calibrationThreshold: 100,
    calibrationDelay: 500,
    supportDelay: 500,
    calibrateX: true,
    calibrateY: true,
    invertX: true,
    invertY: true,
    limitX: false,
    limitY: false,
    scalarX: 35.0,
    scalarY: 0.0,
    frictionX: 0.1,
    frictionY: 0.1,
    originX: 0.5,
    originY: 0.5
  };
  function Parallax(element, options) 
{
    // DOM Context
    this.element = element;
    this.layers = element.getElementsByClassName('layer');
    // Data Extraction
    var data = {
      calibrateX: this.data(this.element, 'calibrate-x'),
      calibrateY: this.data(this.element, 'calibrate-y'),
      invertX: this.data(this.element, 'invert-x'),
      invertY: this.data(this.element, 'invert-y'),
      limitX: this.data(this.element, 'limit-x'),
      limitY: this.data(this.element, 'limit-y'),
      scalarX: this.data(this.element, 'scalar-x'),
      scalarY: this.data(this.element, 'scalar-y'),
      frictionX: this.data(this.element, 'friction-x'),
      frictionY: this.data(this.element, 'friction-y'),
      originX: this.data(this.element, 'origin-x'),
      originY: this.data(this.element, 'origin-y')
    };
    // Delete Null Data Values
    for (var key in data) {
      if (data[key] === null) delete data[key];
    }
    // Compose Settings Object
    this.extend(this, DEFAULTS, options, data);
    // States
    this.calibrationTimer = null;
    this.calibrationFlag = true;
    this.enabled = false;
    this.depths = [];
    this.raf = null;
    // Element Bounds
    this.bounds = null;
    this.ex = 0;
    this.ey = 0;
    this.ew = 0;
    this.eh = 0;
    // Element Center
    this.ecx = 0;
    this.ecy = 0;
    // Element Range
    this.erx = 0;
    this.ery = 0;
    // Calibration
    this.cx = 0;
    this.cy = 0;
    // Input
    this.ix = 0;
    this.iy = 0;
    // Motion
    this.mx = 0;
    this.my = 0;
    // Velocity
    this.vx = 0;
    this.vy = 0;
    // Callbacks
    this.onMouseMove = this.onMouseMove.bind(this);
    this.onDeviceOrientation = this.onDeviceOrientation.bind(this);
    this.onOrientationTimer = this.onOrientationTimer.bind(this);
    this.onCalibrationTimer = this.onCalibrationTimer.bind(this);
    this.onAnimationFrame = this.onAnimationFrame.bind(this);
    this.onWindowResize = this.onWindowResize.bind(this);
    // Initialise
    this.initialise();}
  Parallax.prototype.extend = function() 
{
if (arguments.length > 1) {
      var master = arguments[0];
      for (var i = 1, l = arguments.length; i < l; i++) {
        var object = arguments[i];
        for (var key in object) {
          master[key] = object[key];
        }
      }
    }
  };
  Parallax.prototype.data = function(element, name) {
    return this.deserialize(element.getAttribute('data-'+name));
  };
  Parallax.prototype.deserialize = function(value) {
    if (value === "true") {
      return true;
    } else if (value === "false") {
      return false;
    } else if (value === "null") {
      return null;
    } else if (!isNaN(parseFloat(value)) && isFinite(value)) {
      return parseFloat(value);
    } else {
      return value;
    }
  };
  Parallax.prototype.camelCase = function(value) {
    return value.replace(/-+(.)?/g, function(match, character){
      return character ? character.toUpperCase() : '';
    });
  };
  Parallax.prototype.transformSupport = function(value) {
    var element = document.createElement('div');
    var propertySupport = false;
    var propertyValue = null;
    var featureSupport = false;
    var cssProperty = null;
    var jsProperty = null;
    for (var i = 0, l = this.vendors.length; i < l; i++) {
      if (this.vendors[i] !== null) {
        cssProperty = this.vendors[i][0] + 'transform';
        jsProperty = this.vendors[i][1] + 'Transform';
      } else {
        cssProperty = 'transform';
        jsProperty = 'transform';
      }
      if (element.style[jsProperty] !== undefined) {
        propertySupport = true;
        break;
      }
    }
    switch(value) {
      case '2D':
        featureSupport = propertySupport;
        break;
      case '3D':
        if (propertySupport) {
          var body = document.body || document.createElement('body');
          var documentElement = document.documentElement;
          var documentOverflow = documentElement.style.overflow;
          if (!document.body) {
            documentElement.style.overflow = 'hidden';
            documentElement.appendChild(body);
            body.style.overflow = 'hidden';
            body.style.background = '';
          }
          body.appendChild(element);
          element.style[jsProperty] = 'translate3d(1px,1px,1px)';
          propertyValue = window.getComputedStyle(element).getPropertyValue(cssProperty);
          featureSupport = propertyValue !== undefined && propertyValue.length > 0 && propertyValue !== "none";
          documentElement.style.overflow = documentOverflow;
          body.removeChild(element);
        }
        break;
    }
    return featureSupport;
  };

  Parallax.prototype.ww = null;
  Parallax.prototype.wh = null;
  Parallax.prototype.wcx = null;
  Parallax.prototype.wcy = null;
  Parallax.prototype.wrx = null;
  Parallax.prototype.wry = null;
  Parallax.prototype.portrait = null;
  Parallax.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera  mini|nexus 7)/i);
  Parallax.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
  Parallax.prototype.motionSupport = !!window.DeviceMotionEvent;
  Parallax.prototype.orientationSupport = !!window.DeviceOrientationEvent;
  Parallax.prototype.orientationStatus = 0;
  Parallax.prototype.transform2DSupport = Parallax.prototype.transformSupport('2D');
  Parallax.prototype.transform3DSupport = Parallax.prototype.transformSupport('3D');
  Parallax.prototype.propertyCache = {};
  Parallax.prototype.initialise = function() 
{
    // Configure Context Styles
    if (this.transform3DSupport) this.accelerate(this.element);
    var style = window.getComputedStyle(this.element);
    if (style.getPropertyValue('position') === 'static') {
      this.element.style.position = 'relative';
    }
    // Setup
    this.updateLayers();
    this.updateDimensions();
    this.enable();
    this.queueCalibration(this.calibrationDelay);
  };
  Parallax.prototype.updateLayers = function() 
{
    // Cache Layer Elements
    this.layers = this.element.getElementsByClassName('layer');
    this.depths = [];
    // Configure Layer Styles
    for (var i = 0, l = this.layers.length; i < l; i++) {
      var layer = this.layers[i];
      if (this.transform3DSupport) this.accelerate(layer);
      layer.style.position = i ? 'absolute' : 'relative';
      layer.style.display = 'block';
      layer.style.left = 0;
      layer.style.top = 0;
      // Cache Layer Depth
      this.depths.push(this.data(layer, 'depth') || 0);
    }
  };
  Parallax.prototype.updateDimensions = function() {
    this.ww = window.innerWidth;
    this.wh = window.innerHeight;
    this.wcx = this.ww * this.originX;
    this.wcy = this.wh * this.originY;
    this.wrx = Math.max(this.wcx, this.ww - this.wcx);
    this.wry = Math.max(this.wcy, this.wh - this.wcy);
  };
  Parallax.prototype.updateBounds = function() {
    this.bounds = this.element.getBoundingClientRect();
    this.ex = this.bounds.left;
    this.ey = this.bounds.top;
    this.ew = this.bounds.width;
    this.eh = this.bounds.height;
    this.ecx = this.ew * this.originX;
    this.ecy = this.eh * this.originY;
    this.erx = Math.max(this.ecx, this.ew - this.ecx);
    this.ery = Math.max(this.ecy, this.eh - this.ecy);
  };
  Parallax.prototype.queueCalibration = function(delay) {
    clearTimeout(this.calibrationTimer);
    this.calibrationTimer = setTimeout(this.onCalibrationTimer, delay);
  };
  Parallax.prototype.enable = function() {
    if (!this.enabled) {
      this.enabled = true;
      if (this.orientationSupport) {
        this.portrait = null;
        window.addEventListener('deviceorientation', this.onDeviceOrientation);
        setTimeout(this.onOrientationTimer, this.supportDelay);
      } else {
        this.cx = 0;
        this.cy = 0;
        this.portrait = false;
        window.addEventListener('mousemove', this.onMouseMove);
      }
      window.addEventListener('resize', this.onWindowResize);
      this.raf = requestAnimationFrame(this.onAnimationFrame);
    }
  };
  Parallax.prototype.disable = function() {
    if (this.enabled) {
      this.enabled = false;
      if (this.orientationSupport) {
        window.removeEventListener('deviceorientation', this.onDeviceOrientation);
      } else {
        window.removeEventListener('mousemove', this.onMouseMove);
      }
      window.removeEventListener('resize', this.onWindowResize);
      cancelAnimationFrame(this.raf);
    }
  };
  Parallax.prototype.calibrate = function(x, y) {
    this.calibrateX = x === undefined ? this.calibrateX : x;
    this.calibrateY = y === undefined ? this.calibrateY : y;
  };
  Parallax.prototype.invert = function(x, y) {
    this.invertX = x === undefined ? this.invertX : x;
    this.invertY = y === undefined ? this.invertY : y;
  };
  Parallax.prototype.friction = function(x, y) {
    this.frictionX = x === undefined ? this.frictionX : x;
    this.frictionY = y === undefined ? this.frictionY : y;
  };
  Parallax.prototype.scalar = function(x, y) {
    this.scalarX = x === undefined ? this.scalarX : x;
    this.scalarY = y === undefined ? this.scalarY : y;
  };
  Parallax.prototype.limit = function(x, y) {
    this.limitX = x === undefined ? this.limitX : x;
    this.limitY = y === undefined ? this.limitY : y;
  };
  Parallax.prototype.origin = function(x, y) {
    this.originX = x === undefined ? this.originX : x;
    this.originY = y === undefined ? this.originY : y;
  };
  Parallax.prototype.clamp = function(value, min, max) {
    value = Math.max(value, min);
    value = Math.min(value, max);
    return value;
  };
  Parallax.prototype.css = function(element, property, value) {
    var jsProperty = this.propertyCache[property];
    if (!jsProperty) {
      for (var i = 0, l = this.vendors.length; i < l; i++) {
        if (this.vendors[i] !== null) {
          jsProperty = this.camelCase(this.vendors[i][1] + '-' + property);
        } else {
          jsProperty = property;
        }
        if (element.style[jsProperty] !== undefined) {
          this.propertyCache[property] = jsProperty;
          break;
        }
      }
    }
    element.style[jsProperty] = value;
  };
  Parallax.prototype.accelerate = function(element) {
    this.css(element, 'transform', 'translate3d(0,0,0)');
    this.css(element, 'transform-style', 'preserve-3d');
    this.css(element, 'backface-visibility', 'hidden');
  };
  Parallax.prototype.setPosition = function(element, x, y) {
    x += 'px';
    y += 'px';
    if (this.transform3DSupport) {
      this.css(element, 'transform', 'translate3d('+x+','+y+',0)');
    } else if (this.transform2DSupport) {
      this.css(element, 'transform', 'translate('+x+','+y+')');
    } else {
      element.style.left = x;
      element.style.top = y;
    }
  };
  Parallax.prototype.onOrientationTimer = function(event) {
    if (this.orientationSupport && this.orientationStatus === 0) {
      this.disable();
      this.orientationSupport = false;
      this.enable();
    }
  };
  Parallax.prototype.onCalibrationTimer = function(event) {
    this.calibrationFlag = true;
  };

  Parallax.prototype.onWindowResize = function(event) {
    this.updateDimensions();
  };
  Parallax.prototype.onAnimationFrame = function() {
    this.updateBounds();
    var dx = this.ix - this.cx;
    var dy = this.iy - this.cy;
    if ((Math.abs(dx) > this.calibrationThreshold) || (Math.abs(dy) > this.calibrationThreshold)) {
      this.queueCalibration(0);
    }
    if (this.portrait) {
      this.mx = this.calibrateX ? dy : this.iy;
      this.my = this.calibrateY ? dx : this.ix;
    } else {
      this.mx = this.calibrateX ? dx : this.ix;
      this.my = this.calibrateY ? dy : this.iy;
    }
    this.mx *= this.ew * (this.scalarX / 100);
    this.my *= this.eh * (this.scalarY / 100);
    if (!isNaN(parseFloat(this.limitX))) {
      this.mx = this.clamp(this.mx, -this.limitX, this.limitX);
    }
    if (!isNaN(parseFloat(this.limitY))) {
      this.my = this.clamp(this.my, -this.limitY, this.limitY);
    }
    this.vx += (this.mx - this.vx) * this.frictionX;
    this.vy += (this.my - this.vy) * this.frictionY;
    for (var i = 0, l = this.layers.length; i < l; i++) {
      var layer = this.layers[i];
      var depth = this.depths[i];
      var xOffset = this.vx * depth * (this.invertX ? -1 : 1);
      var yOffset = this.vy * depth * (this.invertY ? -1 : 1);
      this.setPosition(layer, xOffset, yOffset);
    }
    this.raf = requestAnimationFrame(this.onAnimationFrame);
  };
  Parallax.prototype.onDeviceOrientation = function(event) {   
    if (!this.desktop && event.beta !== null && event.gamma !== null) 
{
     this.orientationStatus = 1;      
      var x = (event.beta  || 0) / MAGIC_NUMBER; //  -90 :: 90
      var y = (event.gamma || 0) / MAGIC_NUMBER; // -180 :: 180 
      var portrait = this.wh > this.ww;
      if (this.portrait !== portrait) {
        this.portrait = portrait;
        this.calibrationFlag = true;
      }      
      if (this.calibrationFlag) {
        this.calibrationFlag = false;
        this.cx = x;
        this.cy = y;
      }     
      this.ix = x;
      this.iy = y;
    }
  };
  Parallax.prototype.onMouseMove = function(event) {     
    var clientX = event.clientX;
    var clientY = event.clientY;    
    if (!this.orientationSupport && this.relativeInput) { 
      if (this.clipRelativeInput) {
        clientX = Math.max(clientX, this.ex);
        clientX = Math.min(clientX, this.ex + this.ew);
        clientY = Math.max(clientY, this.ey);
        clientY = Math.min(clientY, this.ey + this.eh);
      }
      this.ix = (clientX - this.ex - this.ecx) / this.erx;
      this.iy = (clientY - this.ey - this.ecy) / this.ery;
    } else { 
      this.ix = (clientX - this.wcx) / this.wrx;
      this.iy = (clientY - this.wcy) / this.wry;
    }
  };  
  window[NAME] = Parallax;
})(window, document);
;(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];}
  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }
  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
  }
}());
  var scene = document.getElementById('scene');
  var parallax = new Parallax(scene);
</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>      
Code by. All Sources
Edited by. M-2010 in codepen
DEMOSHOW
If you want to directly copy  and  paste you canDownload Here Menu Drop Down styles

Memasang  Menu Drop Down Fixed Responsip
Login ke akun blog klik tataletak dan klik tambah gadged, copy code dibawah ini :
pastekan kedalam gadged tersebut. Klik Pratinjau untuk melihat hasil, dan klik simpan selesai
<style>
#menudropdownstylefixed 
{position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menudropdownstylefixed 
{margin:0 auto; text-align:left;position:relative; height:50px; 
z-index:999; background:#B20000; -moz-perspective: 100px; 
-webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }
body {
  background: #47006B;
  color: #fff;
  font: normal 0.9em/1 Geneva, Tahoma, Verdana, sans-serif;
  padding: 1em 0;
}
a {
font-size:13px;
color: #FF3300;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
} 
a:hover {
font-size:13px;
color:#FF9D5B;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
}
box{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  max-width: 978px;
}
.wrapper {
  float: left;
  padding: 2em 0;
  width: 100%;
}
.content {
  float: right;
  line-height: 1.5;
  margin: 0 5%;
  width: 60%;
}
.complementary {
  float: left;
  width: 30%;
}
nav { 
  position: relative;
  float: left;
  width: 100%;
}
nav ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
}
nav > ul > li { 
  float: left; 
  position: relative; 
}
nav ul li a { 
  display: block;
}
nav > ul > li > a {
  float: left;
}
nav ul ul { 
  left: -9999em;
  position: absolute;
  width: 250px;         
  z-index: 2; 
}
nav ul > li:hover > ul { 
  left: 0; 
  top: 100%; 
  background-position: 0 0; 
}
/* -------------------------------
Menu drop down Styles Fixed
----------------------------------*/
nav ul li li { 
  position: relative; 
}
nav ul ul li:hover ul { 
  left: 100%; 
  top: 0;
}
.side {
  float: none;
}
.side ul > li { 
  clear: both;
  float: none;
  position: relative;
}
.side ul > li > a {
  float: none;
}
.side ul li:hover ul ul { 
  left: -9999px; 
  top: 0; 
}
.side li:hover ul { 
 left: 100%; 
 top:0; 
}
.side li:hover ul li:hover ul {
  left: 100%;
  top: 0;
}
#ie8 nav li { 
  display: inline; 
} 
#ie8 nav li > a { 
  height: auto; 
} 
#ie8 nav li li a { 
  zoom: 1; 
} 

#ie8 li:hover { 
  z-index: 5; 
} 
#ie8 nav li:hover { 
  display: block; 
}
nav {
  background: rgb(32,49,71);
  background: -moz-linear-gradient(top, rgba(32,49,71,1) 0%, rgba(61,97,114,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(32,49,71,1)), color-stop(100%,rgba(61,97,114,1)));
  background: -webkit-linear-gradient(top, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
  background: -o-linear-gradient(top, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
  background: -ms-linear-gradient(top, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
  background: linear-gradient(to bottom, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#203147', endColorstr='#3d6172',GradientType=0 );
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
}
nav > ul > li > a { 
  border-right: 1px solid #273444;
  box-shadow: 3px 0 8px rgba(0,0,0,0.25);
  color:#eeeeee;
  padding: 1.3em 25px;
  text-decoration: none;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
nav ul li:last-child a {
  border: none;
  box-shadow: none;
}
nav > ul > li > a:hover, nav > ul > li > a:focus {
  background: #465A68;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
text-hover {color:menu;}
  color: #660099; 
}
nav ul ul {  
background: -webkit-linear-gradient(bottom right,rgba(204,0,0,1),rgba(204,0,0,0));
background: linear-gradient(to top left,rgba(204,0,0,1),rgba(204,0,0,0));
background: #000000 -webkit-linear-gradient(bottom right,rgba(204,0,0,1),rgba(204,0,0,0));
background: #000000 linear-gradient(to top left,rgba(204,0,0,1),rgba(204,0,0,0));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#465a68', endColorstr='#93a3af',GradientType=0 );
border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}
nav ul ul ul {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 0;
}
text-hover {color:down;}
nav li li a {
  border-bottom: 1px solid #34454C;
  border-top: 1px solid #7A8B8E;
  color: #9370DB; 
  padding: 0.8em 25px;
  text-decoration: none;
}
nav li li a:hover, nav li li a:focus { 
background: #000000 -webkit-radial-gradient(bottom right,rgba(204,0,0,1),rgba(204,0,0,0));
background: #000000 radial-gradient(at bottom right,rgba(204,0,0,1),rgba(204,0,0,0));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );}
nav li li:first-child a {
  border-top: none;
}
nav li li:last-child a {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
nav li li li:first-child a {
  border-top-right-radius: 5px;
}
nav li li li:last-child a {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 0;
}
</style> 
<!doctype html>
<!--[if IE8]><html id="ie8"><![endif]-->
<!--[if IE 9]><html id="ie9"><![endif]-->
<!--[if gt IE 9]><!--><!--<![endif]-->
<div id='menudropdownstylefixed'>
<div class='menudropdownstylefixed'>
<div class="container">
<nav class="main">
<ul>
<li><a href="#">&#10086;</a></li>
<li><a href="#">BERANDA</a></li>
<li><a href="#">MENU : 1</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Hover</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
</li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
<li><a href="#">MENU : 2</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Hover</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
</li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
<li><a href="#">MENU : 3</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Hover</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
</li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
<li><a href="#">MENU : 4</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Hover</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
</li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
<li><a href="#">MENU : 5</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Hover</a>
<ul>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
</li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
</li>
<li><a href="#">FOLLOW</a></li>
<li><a href="#">&#10086;</a></li>
</ul>
</nav>
</div>
</div>
<!!..ending to class='menudropdownstylefixed'..!!>
</!!..ending></div>
<!!..edited by. myscript2010'..!!>
<!!..Copyright @-2017. Cibeber Cimahi'..!!>
<!!..ending to id='menudropdownstylefixed'..!!>
</!!..ending></!!..edited></!doctype>
 Visit Menu Drop Down
 Design code is edited by. M-2010 on codepen
If you want to directly copy  and  paste you canDownload Here Menu Drop Down Fixed R