Memasang Kode Parallax Effect 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
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style class="Mys2010-styles">
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height:98px;
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: #222;
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
/*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:50px;
 -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 #CC0099,
 0 5px 15px #CC0099, 0 0 50px #CC0099,
 0 -10px 2px #CC0099;
  }
 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*/
      
header {
  text-align: center;
  background: #252839;
  color: white;
margin-top:-10px;
}
header .container {
  padding-top: 100px;
  padding-bottom: 50px;
}
header img {
  display: block;
  margin: 0 auto 20px;
}
header .intro-text .name {
  display: block;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2em;
}
header .intro-text .skills {
  font-size: 1.25em;
  font-weight: 300;
}
@media (min-width: 768px) {
  header .container {
    padding-top: 200px;
    padding-bottom: 100px;
  }
  header .intro-text .name {
    font-size: 4.75em;
  }
  header .intro-text .skills {
    font-size: 1.75em;
  }
}
.navbar-custom {
  background: #2C3E50;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
}
.navbar-custom a:focus {
  outline: none;
}
.navbar-custom .navbar-brand {
  color: white;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-brand:active,
.navbar-custom .navbar-brand.active {
  color: white;
}
.navbar-custom .navbar-nav {
  letter-spacing: 1px;
}
.navbar-custom .navbar-nav li a {
  color: white;
}
.navbar-custom .navbar-nav li a:hover {
  color: #677077;
  outline: none;
}
.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
  color: white;
}
.navbar-custom .navbar-nav li.active a {
  color: white;
  background: #252839;
}
.navbar-custom .navbar-nav li.active a:hover,
.navbar-custom .navbar-nav li.active a:focus,
.navbar-custom .navbar-nav li.active a:active {
  color: white;
  background: #252839;
}
.navbar-custom .navbar-toggle {
  color: white;
  text-transform: uppercase;
  font-size: 10px;
  border-color: white;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #252839;
  color: white;
  border-color: #252839;
}
@media (min-width: 768px) {
  header .container {
    padding-top: 200px;
    padding-bottom: 100px;
  }
  header .intro-text .name {
    font-size: 4.75em;
  }
  header .intro-text .skills {
    font-size: 1.75em;
  }
}
.navbar-custom {
  background: #2C3E50;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
}
.navbar-custom a:focus {
  outline: none;
}
.navbar-custom .navbar-brand {
  color: yellow;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-brand:active,
.navbar-custom .navbar-brand.active {
  color: blue;
}
.navbar-custom .navbar-nav {
  letter-spacing: 1px;
}
.navbar-custom .navbar-nav li a {
  color: #dad;
}
.navbar-custom .navbar-nav li a:hover {
  color: #18BC9C;
  outline: none;
}
.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
  color: #eee;
}
.navbar-custom .navbar-nav li.active a {
  color: white;
  background: #f00;
}
.navbar-custom .navbar-nav li.active a:hover,
.navbar-custom .navbar-nav li.active a:focus,
.navbar-custom .navbar-nav li.active a:active {
  color: white;
  background: #ff0;
}
.navbar-custom .navbar-toggle {
  color: white;
  text-transform: uppercase;
  font-size: 10px;
  border-color: #eee;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #18BC9C;
  color: #eee;
  border-color: #f00;
}
@media (min-width: 768px) {
  .navbar-custom {
    padding:5px 0;
    -webkit-transition: padding 2.3s;
    -moz-transition: padding 2.3s;
    transition: padding 2.3s;
  }
  .navbar-custom .navbar-brand {
    font-size: 2em;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .navbar-custom.affix {
    padding: 10px 0;
  }
  .navbar-custom.affix .navbar-brand {
    font-size: 1.5em;
  }
}
section {
  padding: 100px 0;
}
section h2 {
  margin: 0;
  font-size: 3em;
}
section.success {
  background: #18BC9C;
  color: #eee;
}
@media (max-width: 767px) {
  section {
    padding: 75px 0;
  }
  section.first {
    padding-top: 75px;
  }
}
#parallax .parallax-item {
  margin: 0 0 15px;
  right: 0;
}
#parallax .parallax-item .parallax-link {
  display: block;
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}
#parallax .parallax-item .parallax-link .caption {
  background: rgba(24, 188, 156, 0.9);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}
#parallax .parallax-item .parallax-link .caption:hover {
  opacity: 1;
}
#parallax .parallax-item .parallax-link .caption .caption-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 50%;
  margin-top: -12px;
  color: #eee;
}
#parallax .parallax-item .parallax-link .caption .caption-content i {
  margin-top: -12px;
}
#parallax .parallax-item .parallax-link .caption .caption-content h3,
#parallax .parallax-item .parallax-link .caption .caption-content h4 {
  margin: 0;
}
#parallax * {
  z-index: 2;
}
@media (min-width: 767px) {
  #parallax .parallax-item {
    margin: 0 0 30px;
  }
}
.floating-label-form-group {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #eeeeee;
}
.floating-label-form-group input,
.floating-label-form-group textarea {
  z-index: 1;
  position: relative;
  padding-right: 0;
  padding-left: 0;
  border: none;
  border-radius: 0;
  font-size: 1.5em;
  background: none;
  box-shadow: none !important;
  resize: none;
}
.floating-label-form-group label {
  display: block;
  z-index: 0;
  position: relative;
  top: 2em;
  margin: 0;
  font-size: 0.85em;
  line-height: 1.764705882em;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
  -webkit-transition: top 0.3s ease, opacity 0.3s ease;
  -moz-transition: top 0.3s ease, opacity 0.3s ease;
  -ms-transition: top 0.3s ease, opacity 0.3s ease;
  transition: top 0.3s ease, opacity 0.3s ease;
}
.floating-label-form-group:not(:first-child) {
  padding-left: 14px;
  border-left: 1px solid #eeeeee;
}
.floating-label-form-group-with-value label {
  top: 0;
  opacity: 1;
}
.floating-label-form-group-with-focus label {
  color: #18BC9C;
}
form .row:first-child .floating-label-form-group {
  border-top: 1px solid #eeeeee;
}
footer {
  color: white;
}
footer h3 {
  margin-bottom: 30px;
}
footer .footer-above {
  padding-top: 50px;
  background-color: #2C3E50;
}
footer .footer-col {
  margin-bottom: 50px;
}
footer .footer-below {
  padding: 25px 0;
  background-color: #233140;
}
.btn-outline {
  color: white;
  font-size: 20px;
  border: solid 2px white;
  background: transparent;
  transition: all 0.3s ease-in-out;
  margin-top: 15px;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
  color: #18BC9C;
  background: white;
  border: solid 2px white;
}
.btn-primary {
  color: white;
  background-color: #2C3E50;
  border-color: #2C3E50;
  font-weight: 700;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: white;
  background-color: #1a242f;
  border-color: #161f29;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #2C3E50;
border-color: #2C3E50;
}
.btn-primary .badge {
  color: #2C3E50;
  background-color: white;
}
.btn-success {
  color: white;
  background-color: #18BC9C;
  border-color: #18BC9C;
  font-weight: 700;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  color: white;
  background-color: #128f76;
  border-color: #11866f;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #18BC9C;
border-color: #18BC9C;
}
.btn-success .badge {
  color: #18BC9C;
  background-color: white;
}
.btn-social {
  display: inline-block;
  height: 50px;
  width: 50px;
  border: 2px solid white;
  border-radius: 100%;
  text-align: center;
  font-size: 20px;
  line-height: 45px;
}
.btn:focus,
.btn:active,
.btn.active {
  outline: none;
}
.scroll-top {
  position: fixed;
  right: 2%;
  bottom: 2%;
  width: 50px;
  height: 50px;
  z-index: 1049;
}
.scroll-top .btn {
  font-size: 20px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  line-height: 28px;
}
.scroll-top .btn:focus {
  outline: none;
}
.parallax-modal .modal-content {
  border-radius: 0;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  min-height: 100%;
  padding: 100px 0;
  text-align: center;
}
.parallax-modal .modal-content h2 {
  margin: 0;
  font-size: 3em;
}
.parallax-modal .modal-content img {
  margin-bottom: 30px;
}
.parallax-modal .modal-content .item-details {
  margin: 30px 0;
}
.parallax-modal .close-modal {
  position: absolute;
  width: 75px;
  height: 75px;
  background-color: transparent;
  top: 25px;
  right: 25px;
  cursor: pointer;
}
.parallax-modal .close-modal:hover {
  opacity: 0.3;
}
.parallax-modal .close-modal .lr {
  height: 75px;
  width: 1px;
  margin-left: 35px;
  background-color: #2C3E50;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1051;} 
.M2010 > sosial {}
.intro > h1 {
  margin-top:-3%;
  text-align: center;
  font-size: 5em;
  font-family: agency fb;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 1px 5px 2px #222;
}
.intro > h3 {
  text-align: center;
  color: rgba(5, 5, 5, 0.7);
  text-shadow: 1px 1px 1px #222;
}
ul.intro-social-buttons > li {
  margin-bottom: 20px;
}
.intro-social-buttons {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}
@media(max-width:767px) {
  .intro {
    padding-bottom: 15%;
  }
  .intro > h1 {
    font-size: 3em;
  }
  ul.intro-social-buttons > li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }
  ul.intro-social-buttons > li:last-child {
    margin-bottom: 0;
  }
  .intro-divider {
    width: 100%;
  }
}
.btn {
  display: inline-block;
  color: #000;
  border: 2px outset rgba(0, 0, 0, 20);
  background: #111;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 20);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  transition: 0.5s;
}
.btn:hover {
  color: #000;
  background: #f00;
  transform: scale(1.2);
}
#Box Menu{M-2010}
 .btn {
      padding: 10px 20px;
      background-color: #333;
      color: #f1f1f1;
      border-radius: 0;
      transition: .2s;
  }
  .btn:hover, .btn:focus {
      border: 1px solid #333;
      background-color: #fff;
      color: #000;
  }
 .modal-header, h4, .close {
      background-color: #333;
      color: #fff !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-header, .modal-body {
      padding: 40px 50px;
  }
  .nav-tabs li a {
      color: #777;
  }
.navbar {
      margin-bottom: 0;
      background-color: #2d2d30;
      border: 0;
      font-size: 11px !important;
      letter-spacing: 4px;
      opacity: 0.9;
  }
  .navbar li a, .navbar .navbar-brand { 
      color: #d5d5d5 !important;
  }
  .navbar-nav li a:hover {
      color: #fff !important;
  }
  .navbar-nav li.active a {
      color: #fff !important;
      background-color: #29292c !important;
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
  }
  .open .dropdown-toggle {
      color: #fff;
      background-color: #555 !important;
  }
  .dropdown-menu li a {
      color: #000 !important;
  }
  .dropdown-menu li a:hover {
      background-color: #222; !important;
  }
#poto-circle{
  background-color: rgba(0, 0, 255, .15);
  width:170px;
  height:170px;
  border-width:6px; 
  border-style: inset;
  border-radius: 60%;
  border-color: #12127D #FFFF00;
} 
</style>
<!-- Fixed navbar -->
  <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
        <a class="navbar-brand" href="http://sule-parallax.blogspot.co.id/2017/04/quote-share.html"target="_blank"title="Quote share"> <i class="fa fa-share-square-o"style="font-size:19px;color:#dad">&nbsp;QUOTE</a></i></li>
    <a class="navbar-brand" href="http://Link Judul"title="Mari Belajar"> <i class="fa fa-home" style="font-size:19px;color:red">&nbsp;HOME</a></i></li>
      </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="http://Link Judul"title="Parallax effect Shine "> 
<i class="fa fa-folder-open-o" style="font-size:14px;color:red">&nbsp;FILES </a></i></li>
        <li><a href="http://codepen.io/hello"target="_blank" title="Codepen Hello"> 
<i class="fa fa-codepen" style="font-size:14px;color:red">&nbsp;HELLO</a></i></li>
                <li><a href="https://github.com/Myscript2010/freeCodeCamp-1"target="_blank"title="Github"> 
<i class="fa fa-github-alt"style="font-size:14px;color:#dad">&nbsp;GITHUB</a></i></li>

          <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-rotate-right"style="font-size:14px;color:red">&nbsp;MORE</i>
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
<li><a href="http://sule-entertainment.blogspot.co.id/2017/04/search-engine-optimization.html"target="_blank"title="Visit Links">Seo</a></li> 
            <li><a href="http://sule-parallax.blogspot.co.id/2017/04/sitemap-diagrams.html"target="_blank"title="Sitemap Diagrams"> Sitemap</a></li>
            <li><a href="https://codquest.com/Myscript2010"target="_blank"title="Edit Kode"> Codequest</a></li>
            <li><a href="http://sule-parallax.blogspot.co.id/2017/02/animations-windows-10.html"target="_blank"title="Animations windows"> Windows 10</a></li>            
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-search"style="font-size:14px;color:#dad"></span></a></li>
      </ul>
    </div>
  </div>
</nav>

  <header>
    <div class="container">
      <div class="row">
        <div class="col-lg-12"><div align="center" style="margin-top:-115px">
          <div class="poto-circle">
<img id="poto-circle"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8xA2GhqHehoSxAGz9M9EUgGiUgA03-7L9rurSKnaeR_-qvPZ7EdAhNlgyVPxZm_7wib6vv6CZx-pDlIZWgkVkKTr8-PQZsxu4kUeohBjm_c0Z9P40U7s7vTjMoDJTYaJ8ULXNOGCyc0en/s1600-r/Myfrofile.gif" name="e902" border="0" width=" 50" height="50" /></a></div>
        </div>
      </div>
          <div class="intro-text">
            <span class="name">PARALLAX </div>
      </div>
        </span>
     <a rel="nofollow" rel="noreferrer"href="https://plus.google.com/u/0/+suleman101254379497511200564"style="text-decoration:none"target="_blank"title="M-2010"class="btn btn-default btn-lg">
<span class="fa fa-google-plus-official"style="font-size:18px;color:silver">&nbsp;</span>Google-Plus</a> 
    
     <a rel="nofollow" rel="noreferrer"href="https://id.pinterest.com/myscript2010"style="text-decoration:none"target="_blank"title="Pinterest"class="btn btn-default btn-lg">
<span class="fa fa-pinterest"style="font-size:18px;color:silver">&nbsp;</span>Pinterest</a>      

    <a rel="nofollow" rel="noreferrer"href="https://www.facebook.com/learn.editing.myscript2010"style="text-decoration:none"target="_blank"title="Facebook"class="btn btn-default btn-lg">
<span class="fa fa-facebook-official"style="font-size:18px;color:silver">&nbsp;</span>Facebook</a> 

<a rel="nofollow" rel="noreferrer"href="https://www.freecodecamp.com/signin"style="text-decoration:none"target="_blank"title="freecodecamp"class="btn btn-default btn-lg">
<span class="fa fa-free-code-camp" style="font-size:18px;color:silver">&nbsp;</span>Codecamp</a> 
    </p>
            <hr class="star-light">
            <span class="skills"><h2>PARALLAX EFFECT SHINE</h2></span>
<h3>Mari belajar mendesain webblog menggunakan kode parallax effect shine 
<a href="https://Link Download"title="Get Code">
<font size="5"color="silver"face="agency fb">Download</font></a>
kode parallax <br>edit kode  sesuai keinginan, login ke akun blog  klik entri halaman baru HTML copy kode tersebut <br>terapkan kedalam entri halaman baru HTML - klik pratinjau untuk melihat hsil dan klik simpan selesai</p>
      </div>
    </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <section id="parallax">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
<font size="7"color="#333"face="agency fb">Let's share <br>Website design knowledge sharing for everyone</font>
<h4><i class="fa fa-crosshairs" style="font-size:48px;color:red"> </i></h4>
          <hr class="star-primary">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal1" id="m1" class="parallax-link">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>

        <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal2" id="m2" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
               <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>
        <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal3" id="m3" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>
        <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal4" id="m4" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>
        <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal5" id="m5" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>
        <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal6" id="m6" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>

 <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal6" id="m6" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>
 <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal6" id="m6" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
              <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>
 <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal6" id="m6" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
              <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>

<div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal6" id="m6" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
               <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>
 <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal6" id="m6" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>
 <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal6" id="m6" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>

<div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal6" id="m6" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
               <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>
 <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal6" id="m6" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>
 <div class="col-sm-4 parallax-item">
          <a rel="nofollow" rel="noreferrer"href="#parallaxModal6" id="m6" class="parallax-link" data-toggle="modal">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"style="font-size:30px;color:orange"> Mari Belajar</i>
              </div>
            </div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
          </a>
        </div>

      </div>
    </div>
  </section>        
        <div class="col-lg-8 col-lg-offset-2 text-center">
        </div>
      </div>
    </div>
  </section> 

  <footer class="text-center">
    <div class="footer-above">
      <div class="container">
        <div class="row">
          <div class="footer-col col-md-4">
            <h3>Source code  </h3>
            <p>Supported by. W3School
              <br>bootstrap, codepen and all Sources</p>
          </div>
          <div class="footer-col col-md-4">
            <h3>Developers</h3>             
<p>Powered by <a href="https://www.blogger.com/about/?r=1-null_user"target="_blank" title="Mari Belajar"> blogger</a> com
              <br>beautiful blog, It’s easy and free.</p</a>          
             </li>
            </ul>
          </div>
          <div class="footer-col col-md-4">
            <h3>Designed by</h3>             
                <p>Beginners create blogs
              <br>Myscript2010 Cibeber Cimahi</p>
            </a>              
          </div>
        </div>
      </div>
    </div>
    <div class="footer-below">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
<p>W3school <a href="https://www.w3schools.com/"target="_blank" title="Mari Belajar"> Tutor </a> Html Css 
| Editor <a href="https://blog.codepen.io/documentation/"target="_blank" title="Mari Belajar"> View  </a> Codepen
| Bootstrap <a href="http://getbootstrap.com/getting-started/"target="_blank" title="Mari Belajar"> Getting  </a> Started</p>
          </div>
        </div>
      </div>
    </div>
</footer>
<div align="center">
<div class="ap" id="ap">
<div id="dibawah">
<span style="font-family:arial;font-size:11px; 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"target="_blank" title="Mari Belajar"><span style="color:#FFFF00;font-size:14px;">&nbsp; &copy; - 2017</a>&nbsp; CODEPEN </a> 
</div>
<h2><div align="center" style="margin-top:-1px">
<audio id="mys2010" src="https://sites.google.com/site/nusulestudy/lagu/tifa-M2010.mp3"controls="controls"></audio></a></h2>
 </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css'>
<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='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css'>
<script src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js'>
</script>
<script>
$('#nav').affix({
offset: {
top: $('header').height()-$('#nav').height()
}}); 
$('body').scrollspy({ target: '#nav' }) 
$('.scroll-top').click(function(){  $('body,html').animate({scrollTop:0},1000);
}) 
$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;  
$('body,html').animate({scrollTop:posi},700);}) 
google.maps.visualRefresh = true;
var map;
function initialize() {
var mapOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);    
  if(navigator.geolocation) {    navigator.geolocation.getCurrentPosition(function(position) {
    var pos = new google.maps.LatLng
    (position.coords
     .latitude,position.coords.longitude);
      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.' });
      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {  
    handleNoGeolocation(false);
  }
}
function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }
  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
content: content };
  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);}
google.maps.event.addDomListener(window, 'load', initialize); 
$(document).ready(function() 
{$('#quote-carousel').carousel({
    pause: true,
    interval: false,
  });
});
</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> 
Code by. All Source
Edited by. Mys2010 On Codepen
If you want to directly copy  and  paste you canDownload Here  Parallax Effect Shine

Memasang Kode Parallax Website Template
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 type="text/css">
header1 {
  -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:-13px;
  width: 100%;
height:70px;
text-align: center;
font-size:  6px;
background:#222;  
-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:78px;
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: #222;
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
/*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:38px;
 -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 #CC0099,
 0 5px 15px #CC0099, 0 0 50px #CC0099,
 0 -10px 2px #CC0099;
  }
 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*/
.M2010 > sosial {}
.intro > h1 {
  margin-top:-3%;
  text-align: center;
  font-size: 5em;
  font-family: agency fb;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 1px 5px 2px #222;
}
.intro > h3 {
  text-align: center;
  color: rgba(5, 5, 5, 0.7);
  text-shadow: 1px 1px 1px #222;
}
ul.intro-social-buttons > li {
  margin-bottom: 20px;
}
.intro-social-buttons {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}
@media(max-width:767px) {
  .intro {
    padding-bottom: 15%;
  }
  .intro > h1 {
    font-size: 3em;
  }
  ul.intro-social-buttons > li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }
  ul.intro-social-buttons > li:last-child {
    margin-bottom: 0;
  }
  .intro-divider {
    width: 100%;
  }
}
.btn {
  display: inline-block;
  color: #000;
  border: 2px outset rgba(0, 0, 0, 0.9);
  background: #CFC0C0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 20);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  transition: 0.5s;
}
.btn:hover {
  color: #000;
  background: #0F0;
  transform: scale(1.2);
}
#poto-circle{
  background-color: rgba(0, 0, 255, .15);
  width:90px;
  height:90px;
  border-width:6px; 
  border-style: inset;
  border-radius: 60%;
  border-color: #12127D #FFFF00;
}
@import url(https://blogger.googleusercontent.com/img/proxy/AVvXsEhEnkVVB-FZ5nozA_eDeYlet-Ix4jWnAZjURHbsXi_fB7-pUKFsibqgr2UOs1fSiji_fVtEVYbunAh9GyLNyACyrLppVwU6uihfwRti_2qAgm48olnyvmQiqGVycCJY4t0P5aTKjko1x5voPEtYBF2-JLC-_LBS6w=s0-d);
html,
body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  font: normal 14px arial,sans-serif;
}
.row {
  margin-left:0px;
  margin-right:0px;
}
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
  padding: 0 0 60px;
}
h1,h2,h3,h4 {
  font-family: 'Orbitron', serif;
  vertical-align:middle;
}header {
  background: #000;
  height:350px;
  color:#000000;
}
header h1,header h2,header h3 a,header a,header a:hover {
  font-family: 'Helvetica', sans-serif;
  color:#fff;
  text-decoration:none;
}
header h3 {
  font-family: 'Orbitron', serif;
  background: #ffcc33;
  padding:10px;
  border-radius:3px;
  font-size:34px;
  padding:12px 10px 6px 10px;
}
header .dropdown-menu {
  top:74px;
  background: #ffcc33;
  border-width:0;
}
h1 {
  font-size:400%;
}
h5 {
  font-size:150px;
  font-family: 'Orbitron', serif;
  vertical-align:middle;
}
#nav {
  width: 100%;
  position:static;
  top:-32px;
}
#nav.affix {
   position: fixed;
   top: 0;
   z-index:10;
   -webkit-transition: all .6s ease-in-out;
}
.navbar-nav.nav-justified > li{
float:none;}}
.navbar-nav {
  margin: 1px 1px; 
}  
.navbar-custom {
    background-color: #2e2e2e;
    font-weight:700;
    text-transform:uppercase;
    border-width:0;
}
.navbar-custom  .navbar-nav>li>a {
color: #ddd;}
.navbar-custom  .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom .navbar-nav .active a  {
background-color: #000;}
.navbar-custom .dropdown-menu{
right:0;}
.navbar-custom .navbar-nav>.dropdown>a .caret {
border-top-color: #999;
border-bottom-color: #999;}
.navbar-collapse.in { 
overflow-y: visible;}
.navbar-toggle {
outline:0;}
.divider {
height:100px;}
.panel {
border-width:0;}
@media (max-width: 768px)
{header {height: 135px;}}
#map-canvas {
width: 100%; 
height: 300px;
margin: 0;
padding: 15px;}
.scroll-top {
position:fixed;
bottom:0;
right:6%;
z-index:100;
background: #ffcc33;
font-size:24px;
border-top-left-radius:3px;
border-top-right-radius:3px;}
.scroll-top a:link,
.scroll-top a:visited 
{  color:#222;} 
section {
color: #ffffff;
min-height: 400px;
height: auto !important;
height: 100%;
padding-top:100px;}
.bg-1 {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyE9sqOzGVTWiFRyu8o828JJeDiVxBdZZRQf3IGhshM_HYQVgMBfSYgtJsih8HI6YZXixmE9m__eY8ggg73zSlpK4KfRwfa0YktpdhNdB7nxl-Z7AndIaczHpB6XWxrkbZ1h8SVapieHY/s1600/Design2-M2010.jpg') no-repeat center center fixed;
background-size: cover;}
.bg-2 {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTRToOhQrLhqr0-xdjWpArNv3dAI3Vp2LPlWhXpEu1AyS-QlCn0h1q5O452RtZ2q1YE-bjzRkwGSX4Y1VvW6R1YwutlhASGyjkysWmQHB_O7LQWtFy8C4l7soe0Dr4SbXhjPinP-aITUQ/s1600/Design-M2010.png') no-repeat center center fixed;
background-size: cover;}
.bg-3 {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1lQbgQ2T2kBimOFN5tikAVd0n4-i8YJ2to7N95CQEBduhMl3fm_fjsyNEuHW42jhOxYwQGGoro-EscKF4GM_WzwS9XA0QRGy9LL6piyUseshKLlQTT2kZNxVBAaUa_DRUUJtxDac7W8I/s1600/Design3-M2010.png') no-repeat center center fixed;
background-size: cover;}
.bg-4 {
padding-top:10px;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(20,20,20,0.2)),to(rgba(255,255,255,0)), color-stop(1,#000));}
#quote-carousel{
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;}
#quote-carousel .carousel-control
{background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;}
#quote-carousel 
.carousel-control.left{
left: -12px;}
#quote-carousel 
.carousel-control.right
{right: -12px !important;}
#quote-carousel 
.carousel-indicators{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;}
#quote-carousel 
.carousel-indicators li{
background: #c0c0c0;}
#quote-carousel 
.carousel-indicators 
.active{
background: #333333;}
#quote-carousel img{
width: 250px;
height: 100px
}
.item blockquote {
border-left: none; 
margin: 0;}
.item blockquote img {
margin-bottom: 10px;}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;}
@media (min-width: 768px) { 
#quote-carousel{
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;}}
@media (max-width: 768px){
#quote-carousel .carousel-indicators {
bottom: -20px !important;}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;}}
footer {
  color: white;
}
footer h3 {
  margin-bottom: 30px;
}
footer .footer-above {
  padding-top: 50px;
  background-color: #2C3E50;
}
footer .footer-col {
  margin-bottom: 50px;
}
footer .footer-below {
  padding: 25px 0;
  background-color: #233140;
}
</style> 
<div id="wrap">  
<header class="masthead">
    <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h1><a rel="nofollow" rel="noreferrer"href="http://blog.getbootstrap.com/2014/01/30/bootstrap-3-1-0-released/"target="_blank" title="Myscript2010s"><strong>BOOTSTRAP</strong></a>
          <p class="lead">
Parallax Website Template</p></h1>
      </div>
      <div class="col-sm-6"><br>
        <div class="pull-right  hidden-xs">    
          <div class="poto-circle">
<img id="poto-circle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8xA2GhqHehoSxAGz9M9EUgGiUgA03-7L9rurSKnaeR_-qvPZ7EdAhNlgyVPxZm_7wib6vv6CZx-pDlIZWgkVkKTr8-PQZsxu4kUeohBjm_c0Z9P40U7s7vTjMoDJTYaJ8ULXNOGCyc0en/s1600-r/Myfrofile.gif" name="e902" border="0" width=" 50" height="50"></a></div>
        </div>
      </div>
    </div>
    </div>
</header> 
 
<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav nav-justified">
         <li class="active">
<a rel="nofollow" rel="noreferrer"href="http://Link Judul"style="text-decoration:none"title="Visit Links"><strong>HOME</strong></a></li>
<li><a rel="nofollow" rel="noreferrer"href="http://sample-mys2010.blogspot.co.id/2017/04/parallax-website-template.html"style="text-decoration:none"target="_blank"title="Visit Links">LINKS</a></li>
<li><a rel="nofollow" rel="noreferrer"href="http://Link Judul"style="text-decoration:none"title="Visit Links">MENU 2</a></li>
<li><a rel="nofollow" rel="noreferrer"href="http://Link Judul"style="text-decoration:none"title="Visit Links">MENU 2</a></li>        
<li><a rel="nofollow" rel="noreferrer"href="http://Link Judul"style="text-decoration:none"title="Visit Links">MENU 2</a></li>
<li><a rel="nofollow" rel="noreferrer"href="http://Link Judul"style="text-decoration:none"title="Visit Links">MENU 2</a></li>
        </ul>
      </div>
    </div>
</div>  

<div class="divider" id="section1"></div>  
<div class="container">
                <div class="row">
              <div class="col-xs-12 intro">
            <h1 class="intro-message">PARALLAX WEB TEMPLATE</h1>  
        </div>
      </div>
   </div>
</div>
    <p class="lead text-center">     
     <a rel="nofollow" rel="noreferrer"href="https://id.pinterest.com/myscript2010"style="text-decoration:none"target="_blank"title="Pinterest"class="btn btn-default btn-lg">
<span class="fa fa-pinterest"style="font-size:18px;color:silver">&nbsp;</span>Pinterest</a> 

    <a rel="nofollow" rel="noreferrer"href="https://plus.google.com/u/0/+suleman101254379497511200564"style="text-decoration:none"target="_blank"title="G-Plus"class="btn btn-default btn-lg">
<span class="fa fa-google-plus-official"style="font-size:18px;color:silver">&nbsp;</span>G-Plus</a> 

    <a rel="nofollow" rel="noreferrer"href="https://www.facebook.com/learn.editing.myscript2010"style="text-decoration:none"target="_blank"title="Facebook"class="btn btn-default btn-lg">
<span class="fa fa-facebook-official"style="font-size:18px;color:silver">&nbsp;</span>Facebook</a> 

<a rel="nofollow" rel="noreferrer"href="https://www.freecodecamp.com/signin"style="text-decoration:none"target="_blank"title="freecodecamp"class="btn btn-default btn-lg">
<span class="fa fa-free-code-camp" style="font-size:18px;color:silver">&nbsp;</span>Codecamp</a> 
    </p>
    <p class="text-center">
Mari belajar mendesain website dengan  menggunakan kode parallax Web Templates 
<a href="https://Link Download"title="Get Code">
<font size="5"color="red"face="agency fb">Download</font></a> 
kode parallax edit kode  sesuai keinginan <br>login ke akun blog  klik entri halaman baru  HTML - copy kode tersebut terapkan kedalam  entri halaman baru HTML - klik pratinjau  untuk melihat hsil dan klik simpan selesai</p>
      </div>
   <header1>
</header1>

<div class="divider" id="section2"></div> 
<section class="bg-1">
<!-- fourth section - Information -->
<div id="bgbawah" class="desain1">
  <div class="container">
    <div class="row"> 
<div align="center" style="margin-top:-89px">
 <h2 align="center">
<p><img src="https://sites.google.com/site/sule62001/sule2001code/W-M-2010.png" width="328px" height="328px"></p>
 </p>
  <div class="col-sm-6 col-sm-offset-3 text-center">
Website design <br>knowledge sharing for everyone
 </div> 
</section>  

<div class="divider"></div>   
<div class="container" id="section3">
      <div class="container">  
   <div class="row">
    <div class="col-md-offset-2 col-md-8">
      <div class="carousel slide" data-ride="carousel" id="quote-carousel">
        <!-- Bottom Carousel Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
          <li data-target="#quote-carousel" data-slide-to="1"></li>
          <li data-target="#quote-carousel" data-slide-to="2"></li>
          <li data-target="#quote-carousel" data-slide-to="3"></li>
          <li data-target="#quote-carousel" data-slide-to="4"></li>
          <li data-target="#quote-carousel" data-slide-to="5"></li>
        </ol>   
        <div class="carousel-inner">      
        <div class="item active">            
              <div class="row">
                <div class="col-sm-12 text-center">
                  <h1>Invitation</h1>
                </div>
                <div class="col-sm-12 text-center">
                  <p>Let us learn to design a good and useful blog together with my M-2010</p>
                </div>
              </div>            
          </div>
         
          <div class="item">            
              <div class="row">
                <div class="col-sm-12 text-center">
                  <h1>Initial step</h1>
                </div>
                <div class="col-sm-12 text-center">
                  <p>what is learned is about the understanding of HTML and CSS</p>
                </div>
              </div>            
          </div>  
       
          <div class="item">            
              <div class="row">
                <div class="col-sm-12 text-center">
                  <h1>About content</h1>
                </div>
                <div class="col-sm-12 text-center">
<p>there are many things that we can apply to blog<br>
whether it is a way of writing accompanied by a text identifier that must be known</p>
                </div>
              </div>            
          </div>   
     
          <div class="item">            
              <div class="row">
                <div class="col-sm-12 text-center">
                  <h1>Entertainment</h1>
                </div>
                <div class="col-sm-12 text-center">
                  <p>we can apply a variety of entertainment in a blog<br>
be it music or videos from a wide variety of formats</p>
                </div>
              </div>           
          </div>
       
          <div class="item">            
              <div class="row">
                <div class="col-sm-12 text-center">
                  <h1>Learn</h1>
                </div>
                 <div class="col-sm-12 text-center">
<p>how to design a blog quickly and easily we can <br> visit the link partner which contains a tutorial blog</p>
                </div>
              </div>           
          </div>
       
          <div class="item">            
              <div class="row">
                <div class="col-sm-12 text-center">
                  <h1>Let's share</h1>
                </div>
                <div class="col-sm-12">
                  <p>@2017</p>
                </div>
              </div>
          </div>
        </div>
        
        <!-- Carousel Buttons Next/Prev -->
        <a rel="nofollow" rel="noreferrer"data-slide="prev" href="#quote-carousel" class="left carousel-control">
<i class="fa fa-chevron-circle-left" style="font-size:48px;color:red"></i></a>
        <a rel="nofollow" rel="noreferrer"data-slide="next" href="#quote-carousel" class="right carousel-control">
<i class="fa fa-chevron-circle-right" style="font-size:48px;color:red"></i></a>
      </div>   
    </div>
  </div>
</div>

<div class="divider">
</div>  
<section class="bg-3" id="section4">
  <div class="col-sm-6 col-sm-offset-3 text-center"><h2 style="padding:20px;background-color:rgba(5,5,5,.8)">I LEARNED BASIC SKILLS</h2></div>
</section> 
 <div class="divider">
</div>

<div class="continer bg-4">
 <div class="row">
 <div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo </p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div>                        
                  
      <div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo</p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div> 

      <div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo  </p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div> 

<div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo </p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div>                        
                  
      <div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo</p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div> 

      <div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo  </p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div> 

<div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo </p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div>                        
                  
      <div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo</p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div> 

      <div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo  </p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div> 

<div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo </p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div>                        
                  
      <div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo</p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div> 

      <div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo  </p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div> 

<div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo </p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div>                        
                  
      <div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo</p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div> 

      <div class="col-sm-4 col-xs-6">      
       <div class="panel panel-default">
          <div class="panel-thumbnail">
 <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg" width="358px" height="230px">
      </p> </div>
          <div class="panel-body">            
<p>Parallax <a href="https://LINK JUDUL"style="text-decoration:none"target="_blank"title="M-2010">Templates </a>Demo  </p>
 <p class="lead">GET THE CODE FOR DESIGN </a></p>           
            <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0nNZCARgimLXoThohyThLwTjBuZkEWX2qkilNaGGUpv_DWr5kZvyL3Ngnmp-Y2ghk4AYpfulOWuxO3GaTEkuo0nmIfkT4AfnKxC4OBXoJrca0Rr8_Y_wx7Md9heqj2XCQvvh8sXctHe5/s1600/loves-M2010.gif" width="28px" height="28px"></p>
 </div>
       </div>
            </div> 
 <footer class="text-center">
    <div class="footer-above">
      <div class="container">
        <div class="row">
          <div class="footer-col col-md-4">
            <h3>Source code  </h3>
            <p>Supported by. W3School
              <br>bootstrap, codepen and all Sources</p>
          </div>
          <div class="footer-col col-md-4">
            <h3>Developers</h3>             
<p>Powered by <a href="https://www.blogger.com/about/?r=1-null_user"target="_blank" title="Mari Belajar"> 
blogger</a> com
              <br>beautiful blog, It&#8217;s easy and free.</p</a>          
             </li>
            </ul>
          </div>
          <div class="footer-col col-md-4">
            <h3>Designed by</h3>             
                <p>Beginners create blogs
              <br>Myscript2010 Cibeber Cimahi</p>
            </a>              
          </div>
        </div>
      </div>
    </div>
    <div class="footer-below">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
<p>W3school <a href="https://www.w3schools.com/"target="_blank" title="Mari Belajar"> Tutor </a> Html Css 
| Editor <a href="https://blog.codepen.io/documentation/"target="_blank" title="Mari Belajar"> View  </a> Codepen
| Bootstrap <a href="http://getbootstrap.com/getting-started/"target="_blank" title="Mari Belajar"> Getting  </a> Started</p>
          </div>
        </div>
      </div>
    </div>
  </footer>
<div align="center">
<div class="ap" id="ap">
<div id="dibawah">
<span style="font-family:arial;font-size:11px; 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/VbaRJV"target="_blank" title="Mari Belajar"><span style="color:#FFFF00;font-size:14px;">&nbsp; &copy; - 2017</a>&nbsp; CODEPEN </a> 
</div>
<h2><div align="center" style="margin-top:-8px">
<audio id="mys2010" src="https://sites.google.com/site/nusulestudy/lagu/tifa-M2010.mp3"controls="controls"></audio></h2>
  </div>
      </div>
<!--DOCTYPE html-->
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<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> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css'>
<script src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js'>
</script>
<script>
$('#nav').affix({
offset: {
top: $('header').height()-$('#nav').height()
}}); 
$('body').scrollspy({ target: '#nav' }) 
$('.scroll-top').click(function(){  $('body,html').animate({scrollTop:0},1000);
}) 
$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;  
$('body,html').animate({scrollTop:posi},700);}) 
google.maps.visualRefresh = true;
var map;
function initialize() {
var mapOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);    
  if(navigator.geolocation) {    navigator.geolocation.getCurrentPosition(function(position) {
    var pos = new google.maps.LatLng
    (position.coords
     .latitude,position.coords.longitude);
      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.' });
      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {  
    handleNoGeolocation(false);
  }
}
function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }
  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
content: content };
  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);}
google.maps.event.addDomListener(window, 'load', initialize); 
$(document).ready(function() 
{$('#quote-carousel').carousel({
    pause: true,
    interval: false,
  });
});
</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>
Code by. All Source
Edited by. Mys2010 On Codepen
If you want to directly copy  and  paste you canDownload Here  Parallax Web Template

Memasang Kode Video Volume Ogv
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  berikutGet 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
<video id="myVideo" width="690" height="570" controls>
<source src="https://sites.google.com/site/nusulestudy/cinema/Raya-Iwan-Fals-M2010s.mp4" type="video/mp4">
<source src="https://sites.google.com/site/nusulestudy/cinema/Address-M1010.ogv" type="video/ogg">
</video>
<p>Set volume</p>
<button onclick="getVolume()" type="button">Cibeber Cimahi</button>
<button onclick="setHalfVolume()" type="button">Set volume to 0.2</button>
<button onclick="setFullVolume()" type="button">Set volume to 1.0</button>
<script>
var x = document.getElementById("myVideo");
function getVolume() 
{alert(x.volume);} 
function setHalfVolume() 
{x.volume = 0.2;} 
function setFullVolume() 
{x.volume = 1.0;} 
</script> 
2- video without a set volume
<video controls>
<source src="https://sites.google.com/site/m2010sule/lagu/Donwilliam-iwould-M2010.mp4"
         type='video/mp4; codecs="avc1, mp4a"'>
<source src="https://sites.google.com/site/nusulestudy/cinema/Donwilliam-iwould-M2010.ogv"
       " controls="controls"> 
<p>Cibeber Cimahi</p></video>
* Show Videowithaout a set Volume - ShowVideo to set volume Download   Full Code 
Designed by. M-2010
Source Code by. W3School

Memasang Kode Horizontal Scroll Slider
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 pratinjau  untuk melihat hasil  dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini,  pastekan kedalam  Entri halaman baru HTML  dan  klik simpan selesai
<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
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,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
  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,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h6 {
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:35px;
 -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;
}
/*slider*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@-webkit-keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
@keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}
body {
  overflow: hidden;
  font-size: 100%;
}
nav {
  text-align: center;
  background: rgba(no color);
  position: fixed;
  z-index: 100;
  height:100px;
  left: 0;
  width: 10vw;
  margin-top:51px;
  font-weight: 300;
  font-size: 1rem;
}
nav ul {
list-style-type: none;
height:80vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
}
nav a, nav a:visited, nav a:active {
  text-decoration: none;
  color: #f00px;
}
nav a {
  -webkit-transition: color 2s, background 1s;
  transition: color 2s, background 1s;
  padding: 10px;
  position: relative;
  z-index: 0;
}
nav a.active {
  background: rgba(0, 0, 0, 0.9);
}
nav a::before {
  content: "";
  position: absolute;
  height: 0%;
  width: 0%;
  bottom: 0;
  left: 0;
  opacity: 1;
  background: #555;
  z-index: -1;
}
nav a:hover {
-webkit-animation: fillColour 0.7s forwards ease-in-out;
animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
-webkit-animation: fill 0.7s forwards ease-in-out;
animation: fill 0.7s forwards ease-in-out;
  opacity: 1;
}
.slides {
  width: 500vw;
  height: 100vh;
  -webkit-transition: -webkit-transform 0.8s ease;
  transition: -webkit-transform 0.8s ease;
  transition: transform 0.8s ease;
  transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
  height: 100vh;
  width: 100vw;
  background: pink;
  float: left;
  text-align: center;
  background-size: cover;
}
.slides .slide .content {
  width: 80vw;
  padding: 220px;
   background: rgba(No Color);
  margin: 35vh 0 0 15vw;
  border-radius: 5px;
}
.slides .slide .content p {
  padding: 10px 0;
  border-bottom: 1px solid black;
}
.slides .slide:nth-child(1) {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9kl6QsINcFqmlr7Q0VTDrKfHgEbd0jBl-H9w44biJFIYPSDc9wIF7MdqRXROaR5gzzLz7x0PcDWxOCH5MN3_PKN5dzVjGIRRfDOyHciClHi_9uTwJ_znq-4PoUMj8Sf_Xp_aeu-0LWw9V/s1600/Edit-M2010.jpg);
}
.slides .slide:nth-child(2) {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9kl6QsINcFqmlr7Q0VTDrKfHgEbd0jBl-H9w44biJFIYPSDc9wIF7MdqRXROaR5gzzLz7x0PcDWxOCH5MN3_PKN5dzVjGIRRfDOyHciClHi_9uTwJ_znq-4PoUMj8Sf_Xp_aeu-0LWw9V/s1600/Edit-M2010.jpg);
}
.slides .slide:nth-child(3) {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9kl6QsINcFqmlr7Q0VTDrKfHgEbd0jBl-H9w44biJFIYPSDc9wIF7MdqRXROaR5gzzLz7x0PcDWxOCH5MN3_PKN5dzVjGIRRfDOyHciClHi_9uTwJ_znq-4PoUMj8Sf_Xp_aeu-0LWw9V/s1600/Edit-M2010.jpg);
}
.slides .slide:nth-child(4) {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9kl6QsINcFqmlr7Q0VTDrKfHgEbd0jBl-H9w44biJFIYPSDc9wIF7MdqRXROaR5gzzLz7x0PcDWxOCH5MN3_PKN5dzVjGIRRfDOyHciClHi_9uTwJ_znq-4PoUMj8Sf_Xp_aeu-0LWw9V/s1600/Edit-M2010.jpg);
}
.slides .slide:nth-child(5) {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9kl6QsINcFqmlr7Q0VTDrKfHgEbd0jBl-H9w44biJFIYPSDc9wIF7MdqRXROaR5gzzLz7x0PcDWxOCH5MN3_PKN5dzVjGIRRfDOyHciClHi_9uTwJ_znq-4PoUMj8Sf_Xp_aeu-0LWw9V/s1600/Edit-M2010.jpg);
}
.slides .slide img {
  width: 100%;
}
h2 {
  font-family: 'Rye', cursive;
  text-transform: uppercase;
  text-align: left; 
  font-weight: 400 px;
  line-height: 1.5;
  text-shadow: 1px 1px 0px red;
  -webkit-transition: all 0.8s;
  transition: all 0.8s; }
h2 {
  padding: 10px;
  font-size: 2.5em;
  color: RGBA(51, 61, 61, 1); }
  @media all and (min-width: 50em) {
h2 {
  padding: 5px;
  font-size: 2.5em; } }
</style>  
<div align="center" style="margin-top:110px">
<div id="M2010-shadow-atas">
</div> 
<div class="shadow-atas">
</div>
<div class="shadow-bawah">
</div> 
<nav>
  <ul>
    <li><a rel="nofollow" rel="noreferrer"href="#1">Slide 1</a></li>
    <li><a rel="nofollow" rel="noreferrer"href="#2">Slide 2</a></li>
    <li><a rel="nofollow" rel="noreferrer"href="#3">Slide 3</a></li>
    <li><a rel="nofollow" rel="noreferrer"href="#4">Slide 4</a></li>
    <li><a rel="nofollow" rel="noreferrer"href="#5">Slide 5</a></li>
    </ul>
</nav>
<div class="slides"> 
  <div class="slide" id="1">
    <div class="content">
      <h2>&#10086;</h2>

    </div>
  </div>
  <div class="slide" id="2">
    <div class="content">
      <h2>Slide 2</h2>
      
    </div>
  </div>
  <div class="slide" id="3">
    <div class="content">
      <h2>Slide 3</h2>

    </div>
  </div>
  <div class="slide" id="4">
    <div class="content">
      <h2>Slide 4</h2>
   
    </div>
  </div>
  <div class="slide" id="5">
    <div class="content">
       <h2>Slide 5</h2>
    </div>
  </div>
</div>
<header>
<a href="http://Link Judul" target="_blank" title="Mari Belajar">
<h6>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h6>
</a>  
</div>
</header>
<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 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="http://Link Judul"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp; CODEPEN </a> 
</div>
<h6><div align="center" style="margin-top:-5px">
 <audio id="player" preload="auto">
  <source src="https://sites.google.com/site/nusulestudy/lagu/tifa-M2010.mp3">
  </source></h6>
</a></div>
</div>
<link Slider>
<link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>
<text Bold>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link Audio mp3>
<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>
<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() {  
    function showSlide(n) {
        // n is relative position from current slide      
        // unbind event listener to prevent retriggering
        $body.unbind("mousewheel");      
        // increment slide number by n and keep within boundaries
        currSlide = Math.min(Math.max(0, currSlide + n), $slide.length-1);        
        var displacment = window.innerWidth*currSlide;
        // translate slides div across to appropriate slide
        $slides.css('transform', 'translateX(-' + displacment + 'px)');
        // give small delay before rebinding event to prevent retriggering
        setTimeout(bind, 250);        
        // change active class on link
        $('nav a.active').removeClass('active');
        $($('a')[currSlide]).addClass('active');}  
    function bind() {
         $body.bind('mousewheel', mouseEvent);}  
    function mouseEvent(e, delta) {
        // On down scroll, show next slide otherwise show prev slide
        showSlide(delta >= 0 ? -1 : 1);
        e.preventDefault();}    
    $('nav a').click(function(e) {
        // When link clicked, find slide it points to
        var newslide = parseInt($(this).attr('href')[1]);
        // find how far it is from current slide
        var diff = newslide - currSlide - 1;
        showSlide(diff); // show that slide
        e.preventDefault();});  
    $(window).resize(function(){
      // Keep current slide to left of window on resize
      var displacment = window.innerWidth*currSlide;
      $slides.css('transform', 'translateX(-'+displacment+'px)');});    
    // cache
    var $body = $('body');
    var currSlide = 0;
    var $slides = $('.slides');
    var $slide = $('.slide');  
    // give active class to first link
    $($('nav a')[0]).addClass('active');    
    // run da ting
    //add event listener for mousescroll
    $body.bind('mousewheel', mouseEvent);})
  </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. Audio Mp3 M2010
Show Code. Horizontal Scroll
Design code is edited by. M-2010 on Codepen
If you want to directly copy and paste you canDownload  quote share about websites