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