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