Memasang kode Tabel Menu
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 templateyang tersedia pada sumber  berikut ini   :   Blank Template  edit background warna sesuai keinginan dan 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 href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style class="Mys2010-styles">
body {);color:red;height:10%;overflow:hidden;}
<link rel='stylesheet' id='bootstrap-style-css'  href='https://oneengine.enginethemes.com/wp-content/themes/oneengine/css/bootstrap.css?ver=4.5.7' type='text/css' media='all' />
<style class="Mys2010-styles">
body {);color:blue;height:10%;overflow:hidden;} 
 body {  
  background-color: rgba(82, 66, 135, 0.9); 
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top:-2px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,rgba(82, 66, 135, 0.9), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(82, 66, 135, 0.9));
  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: -14px;
left: 0;
height: 60px;
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,rgba(82, 66, 135, 0.9), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(82, 66, 135, 0.9));
  border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
h4 {
padding:5px; 
} 
#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: 23px;
}  
 body {  
  background-color: rgba(82, 66, 135, 0.9); 
}  
.tg  {border-collapse:collapse;border-spacing:0;margin:110px auto;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style> 
<table class="tg" border=10> 
  <tr>
    <td class="tg-031e" colspan="3">
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJUTDnsQbHpDVmHA41Fh8fr_Q-VlvSvLs5k02oxLutxZYOvYHSdLs9Vav_V-UCXUjtq-e1x5TRyf8Upmiyl86FYZJ5hYx6sxwS-88Fb5v6sxGaFe1qs7kEGBpE3eh51T2Ovp64Oz49EH5E/s1600/Menu-M2010.png"width="250" height="120"></a></center></td>
  </tr>
  <tr>
    <td class="tg-031e"><img src="https://sites.google.com/site/sule30708/foto/1Html-M2010.png"></a></td>
    <td class="tg-031e" rowspan="4"><center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgavW0mbl2Kb63sD7OpaWv706GFB00NmIncrQhytdstkoZ92VSktS-mU0LJK6MIq0T2nRtl_q4vsPU36x1VG5HzwyrYoYOZoN24feSGBxeVObd97HH4p2JIGiuPM_0LbCLH43HjorgJB1Qc/s1600/Lingkar-M2010.jpg" border="0" alt="M2010"></a></center><p><center>
 <a href="https://Link Judul"style="text-decoration:none"target="_blank"title="M-2010"class="btn btn-large btn-block btn-info">teks anda</a>
</td>
    <td class="tg-031e"><img src="https://sites.google.com/site/sule30708/foto/1Html-M2010.png"></a></td>
  </tr>
    <tr>
    <td class="tg-031e"> <a href="https://Link Judul"style="text-decoration:none"target="_blank"title="M-2010"class="btn btn-large btn-block btn-info">teks anda</a> </td>
    <td class="tg-031e"> <a href="https://Link Judul"style="text-decoration:none"target="_blank"title="M-2010"class="btn btn-large btn-block btn-info">teks anda</a> </td>
  </tr>
   <tr>
    <td class="tg-031e"> <a href="https://Link Judul"style="text-decoration:none"target="_blank"title="M-2010"class="btn btn-large btn-block btn-info">teks anda</a> </td>
    <td class="tg-031e"> <a href="https://Link Judul"style="text-decoration:none"target="_blank"title="M-2010"class="btn btn-large btn-block btn-info">teks anda</a> </td>
  </tr>
  <tr>
    <td class="tg-031e"> <a href="https://Link Judul"style="text-decoration:none"target="_blank"title="M-2010"class="btn btn-large btn-block btn-info">teks anda</a> </td>
    <td class="tg-031e"> <a href="https://Link Judul"style="text-decoration:none"target="_blank"title="M-2010"class="btn btn-large btn-block btn-info">teks anda</a> </td>
  </tr>
</table>
   </div>
      </div>
<header>
<a href="http://Link Judul"title="Mari Belajar">
<h2>
<span style="color:orange;font-size:10pt">M-2010</a>  </h2>
</a>  
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family:arial;font-size:12px;color:#fff;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><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:#fff;"> COPYRIGHT <a href="http://www.lakako.com/photos/myscript2010"target="_blank"title="www.lakako.com"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp; INSLAKAKO </a> 
</div>
<h4>
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Visit Website"><img class="expando" border="0" src="https://sites.google.com/site/code6916/file/M-2010.png" width="140"height="10"></h4>
</a></div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        window.alert = function(){};
        var defaultCSS = document.getElementById('bootstrap-css');
        function changeCSS(css){
            if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); 
            else $('head > link').filter(':first').replaceWith(defaultCSS); 
        }
        $( document ).ready(function() {
          var iframe_height = parseInt($('html').height()); 
          window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
        });
    </script>
</body>
</html>
Code by. Bootstrap/snipp
Design Code is Edited by. M-2010
* If you want to directly copy and paste you canDownload  Tabel Menu

Memasang kode Full Screen Background
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 templateyang tersedia pada sumber  berikut ini   :   Blank Template  edit background warna sesuai keinginan dan 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
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style class="Mys2010-styles">
@import url(https://fonts.googleapis.com/css?family=Satisfy|Pathway+Gothic+One);
body {background-image: url();color:red;height:100%;overflow:hidden;}
.ap {
position: fixed;
right: 0;
bottom: -4px;
left: 0;
height: 60px;
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:#060;
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:-7px; 
background: -webkit-linear-gradient(#000; 10%,#4f9bb5;50%, transparent 90%); 
background: linear-gradient(transparent 10%, #161; 50%, transparent 90%); 
} 
#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:24px;
}/*end*/
body {
/*css for full size background image*/
  background: url(http:/Link Gambar) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  
  height: 100%;
  background-color: #060;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5); 
}
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
          box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}
.inner {
  padding: 30px;
}
* Header*/
.masthead-brand {
  margin-top: 10px;
  margin-bottom: 10px;
}
.masthead-nav > li {
  display: inline-block;
}
.masthead-nav > li + li {
  margin-left: 20px;
}
 
@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 700px;
  }
}
/*text*/
h1 {
  font-family: 'Satisfy', 'cursive';
  font-size: 2.5em;
}

h2, p {
  font-family: 'Pathway Gothic One', 'sans-serif';
  font-size: 2em;
}

h1, h2, p {
  text-align: center;
  display: block;
  width: auto;
  margin: 1%;
}
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button1 {background-color: #808;}
.button2 {background-color: #888;} 
.button3 {background-color: #669;} 
.button4 {background-color: #777;}  
</style>
<div class="site-wrapper">
  <div class="site-wrapper-inner">
    <div class="cover-container">
      <div class="masthead clearfix">
        <div class="inner">
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family:arial;font-size:12px;color:#eae;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><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:#eae;"> COPYRIGHT <a href="https://www.instagram.com/myscript2010/"target="_blank"title="InstanG"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp; INSTAGRAM </a> 
</div>
<h2>
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Visit Website"><img class="expando" border="0" src="https://sites.google.com/site/code6916/file/M-2010.png" width="140"height="10"></h2>
</a></div>
</div>
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<body data-spy="scrolll" data-target=".navbar" data-offset="150">
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color:#060;">
          <div class="container-fluid">
              <div class="navbar-header">                 
                 <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:14px;color:#dad">&nbsp;QUOTE</a></i></li>
    <a class="navbar-brand" href="http://sample-mys2010.blogspot.co.id"target="_blank"title="Mari Belajar"> 
<i class="fa fa-chain"style="font-size:14px;color:ff0">&nbsp;VISIT</a></i></li>
<a class="navbar-brand" href="http://sule-parallax.blogspot.co.id/2017/04/don-williams-i-would-like-to-see-you.html"target="_blank"title="My Music"> 
<i class="fa fa-music"style="font-size:14px;color:#ff0;">&nbsp; MUSIC</a></i></li>
      </div>
<div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
<!-- Tr-2010 -->
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
<a class="navbar-brand" href="https://Link Download"title="Download Full Code"> 
<i class="fa fa-download"style="font-size:14px;color:#eee"> &nbsp;GETCODE</a></i></li>
<a class="navbar-brand" href="http://sule-tema.blogspot.co.id/2017/06/ada-apa-dengan-web.html"target="_blank"title="Behind the future"> 
<i class="fa fa-user-md"style="font-size:14px;color:ff0"> &nbsp;FUTURE</a></i></li>
<a class="navbar-brand" href="http://sule-hiburan.blogspot.co.id/2017/04/connie-cover.html"target="_blank"title="Music Cover"> 
<i class="fa fa-headphones"style="font-size:14px;color:#dad"> &nbsp;COVER</a></i></li>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-search"style="font-size:14px;color:#ff0"></span></a></li>
      </ul>
          </div>
        </div>
     </div>
 </nav> 
<div class="inner cover">
<h1 class="cover-heading">Sitemap </h1>  
<h1 class="cover-heading">Full screen background </h1>
<p class="lead">Select the menu available as you like, get the code provided
<small> 
<br> 
 <br>
  <br>
    <br>
<a href="https://Link Judul"target="_blank" title="Myscript2010">
<button class="button button1">Read More </button></a> 

<a href="https://Link Judul"target="_blank" title="Myscript2010">
<button class="button button2">Read More </button></a> 

<a href="https://Link Judul"target="_blank" title="Myscript2010">
<button class="button button3">Read More </button></a> 

<a href="https://Link Judul"target="_blank" title="Myscript2010">
<button class="button button4">Read More </button></a> 
 </p>
</div>
  <div class="mastfoot">
    <div class="inner"> 
          <!-- Validation -->
<p><a href="http://Link Judul"target="_blank">
<small>M-2010</small><sup>@</sup></a></p>
  
        </div>
      </div>
    </div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</body>
</html> 
Code by. Bootstrap/snipp
Design Code is Edited by. M-2010
* If you want to directly copy and paste you canDownload  Full Screen Background

Memasang kode Accordion menu
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 templateyang tersedia pada sumber  berikut ini   :   Blank Template  edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="M2010">
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:-8px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  #333, #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(46, 56, 79, 0.85)); 
} 
.ap {
position: fixed;
right: 0;
bottom: -10px;
left: 0;
height: 60px;
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;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background: linear-gradient(270deg,  rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h3 {
padding:1px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
} 
#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: 39px;
} 
/*end*/
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Montserrat', sans-serif;
  background: #388E3C;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
h2 {
  text-align: center;
  margin: 20px auto;
  color: #fff;
}
.accordion-menu {
  width: 100%;
  max-width: 350px;
  margin: 60px auto 20px;
  background: #fff;
  border-radius: 4px;
}
.accordion-menu li.open .dropdownlink {
  color: #CDDC39;
}
.accordion-menu li.open .dropdownlink .fa-chevron-down {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.accordion-menu li:last-child .dropdownlink {
  border-bottom: 0;
}
.dropdownlink {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 45px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  color: #212121;
  position: relative;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.dropdownlink i {
  position: absolute;
  top: 17px;
  left: 16px;
}
.dropdownlink .fa-chevron-down {
  right: 12px;
  left: auto;
}
.submenuItems {
  display: none;
  background: #C8E6C9;
}
.submenuItems li {
  border-bottom: 1px solid #B6B6B6;
}
.submenuItems a {
  display: block;
  color: #727272;
  padding: 12px 12px 12px 45px;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.submenuItems a:hover {
  background-color: #CDDC39;
  color: #fff;
}
</style>
<h2>Creative Ideas</h2>
<ul class="accordion-menu">
  <li>
    <div class="dropdownlink"><i class="fa fa-diamond"aria-hidden="true"></i> Menu 1
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Your Content</a></li>
      <li><a href="#">Your Content</a></li>
      <li><a href="#">Your Content</a></li>
    </ul>
  </li>
  <li>
     <div class="dropdownlink"><i class="fa fa-diamond"aria-hidden="true"></i> Menu 2
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Your Content</a></li>
      <li><a href="#">Your Content</a></li>
      <li><a href="#">Your Content</a></li>
    </ul>
  </li>
  <li>
     <div class="dropdownlink"><i class="fa fa-diamond"aria-hidden="true"></i> Menu 3
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Your Content</a></li>
      <li><a href="#">Your Content</a></li>
      <li><a href="#">Your Content</a></li>
    </ul>
  </li>
  <li>
     <div class="dropdownlink"><i class="fa fa-diamond"aria-hidden="true"></i> Menu 4
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Your Content</a></li>
      <li><a href="#">Your Content</a></li>
      <li><a href="#">Your Content</a></li>
    </ul>
  </li>
  <li>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family:arial;font-size:12px;color:#fff;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><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:#fff;"> COPYRIGHT <a href="http://tools-gradiend.blogspot.co.id/2017/02/building-bditor.html"target="_blank"title="Edit Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp; BUILDING </a>  
</div>
<h2>
<h3>&clubs;</h3>
</a></div>
<header> 
<a href="https://Link Judul"target="_blank" title="Mari Belajar"> <h2>
<span style="color:orange; font-size: 10pt">Myscript2010</a>  </h2>
</a>   
</div>
</header>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'>
</script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'>
</script>
<script>$(function() {
  var Accordion = function(el, multiple) {
    this.el = el || {};
    // more then one submenu open?
    this.multiple = multiple || false;
    
    var dropdownlink = this.el.find('.dropdownlink');
    dropdownlink.on('click',
                    { el: this.el, multiple: this.multiple },
                    this.dropdown);
  };  
  Accordion.prototype.dropdown = function(e) {
    var $el = e.data.el,
        $this = $(this),
        //this is the ul.submenuItems
        $next = $this.next();
    
    $next.slideToggle();
    $this.parent().toggleClass('open');
    
    if(!e.data.multiple) {
      //show only one menu at the same time
      $el.find('.submenuItems').not($next).slideUp().parent().removeClass('open');
    }
  }  
  var accordion = new Accordion($('.accordion-menu'), false);
})
</script>
</body></html>
Code by. Allsources
Design Code is Edited by. M-2010
* If you want to directly copy and paste you canDownload  Accordion menu dropdown

Memasang kode Single Page 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 templateyang tersedia pada sumber  berikut ini   :   Blank Template  edit background warna sesuai keinginan dan 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<style class="Mys2010-styles">
body {
  background-color: #EF5C54;
  color: white;
}
.footer-bottom-layout {
  background: #222222 none repeat scroll 0 0;
  padding: 20px 0;
  text-align: center;
} 
.socialMedia-footer {
  margin-bottom: 20px;
}
.socialMedia-footer > a {
  display: inline-block;
  margin: 0 8px;
}
/*Teks Vita*/
 h5 {
  color: #e7d37b;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.65);
  padding-left: 16px;
  -webkit-font-smoothing: antialiased;
  font-family: 'Francois One', sans-serif;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfTj_7ex0o6oj5qNUQrY2rubq1qb1-wRpljEDJqqjZyY9cmN0pK8z828es4z8ya1acF2AM7ZIlvW1kdJ2MMQQmgunWq6r9sN_qCdX157MFeROvU4P_j2umwakcITF0xAd8WHtIbUZxhCq/s1600/Vita-M2010.png");
  background-repeat: no-repeat;
  min-width: 1232px;
  height: 80px;
  line-height: 64px;
  margin-bottom: 0px;
  margin-top: 40px;
  font-size: 24px;
}
/*Slider auto bawahteks li*/
li{lobster }
li{  
font-family: lobster;  
}
a{  
font-family: lobster;  
}
h1{  
  font-family:lobster;
  color:blue;
}
h3 {  
  position: relative;
  margin-top: 22px;
  font-family: lobster;
  color: #808;
}
.teks {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.teks h1 {
    font-size: 6em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}
@media screen and (min-width: 980px){
    .teks { width: 980px; }    
}
@media screen and (max-width: 640px){
    .hero h1 { font-size: 4em; }    
}
hr { 
    display: block;
    background:#444; 
    height:30px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width:1px;
}
/*end*/
body {
background: #666;  
}
    body
{
    padding-top: px;
}
#myCarousel .nav a small
{
    display: block;
}
#myCarousel .nav
{
    background: #808;
}
.nav-justified > li > a
{
border-radius: 0px; 
}
.nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; }
.nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; }
.nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; }
.nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; }    
 
/*Menu*/
body {
 background-color: #4f9bb5;
 padding-bottom: 0px;
}
.btn-primary {
 background-color: #4f9bb5 !important;
 background-image: none;
 border-color: none;
}
.btn-primary:hover, .btn-primary:focus {
 background-color: #1f1c1d !important;
}
.carousel-caption p {
 color: #fff;
}
.col-md-4 {
 border-radius: 5px;
 margin: 25px 0px;
}
/*end*/
.bg-4 {
  background-image: url(//---M2010------);
  background-color: #6aa;
  padding-bottom: 30px;
}
.pricingh {
  margin: 0px;
  color: black;
}
.pricingi {
  background-color: #374047;
  color: white;
}
.btn {
  color: black;
}
.greenbg {
  background-color: #65e679;
}
.pricingr {
  color: #F57979;
}
.pricingri {
  background-color: #F57979;
}
.row-5 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC655g3VPxVmE8Mw_I2xWBxd7qDMZbd7RhpoKOHdezJ2nogpMOVyWK74fMXs73sevIFjIiyzAdmYjufJiyvkrEJ4gbN1lnt5GYO0ipLPPxQTsKQJ10ZMDK5dz_mqHwA4oagPpvJN24aWrt/s1600/Ppattern-M2010.jpg);
  background-repeat: repeat-x;
  max-height: 167px;
  padding-top: 70px;
}
.no-padding {
  padding-left: 0;
  padding-right: 0;
}
.bg-5 {
  background-color: white;
}
.row-6 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhECO6uTD0vGm3nea7jHtydO2dPUle8Dfj4QBud9ayBfPDBBbi0XEyL1UANm_emL8JE4kBL8RS2F_lXizjsfOoxHrcjFgxZfhRTepCLbxj1SR8xb5uVnLTzxM6hsOgSaRTxOwy9OYUA5X2q/s1600/Bgred-M2010.jpg);
  background-repeat: repeat-x;
  height: 250px;
}
footer {
  background-color: green;
}
.bg-0 {
  border: none;
  background-color: #FF6861;
  height: 90px;
  padding-top: 20px;
}
.black {
  background-color: black;
}
.bt {
  color: black;
}
@media(min-width:992px) {
  .row {
    width: 68%;
    margin: 0 auto;
  }
  .navbar-brand {
    margin-left: 300px;
    font-size: 20px;
  }
  .nav-pills {
    margin-right: 300px;
  }
}
@media(max-width:767px) {
  .col-sm-3 {
    margin: 5px auto;
  }
  .col-sm-4 {
    width: 220px;
    margin: 5px auto;
  }
  .navbar-brand {
    margin-left: 20%;
    font-size: 20px;
    margin-bottom: 10%;
    text-align: center;
  }
  .nav-pills {
    margin-left: 10%;
  }
}
hr { 
    display: block;
    background:#868; 
    height:30px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width:1px;
}
#poto-circle{
  background-color: rgba(0, 0, 255, .15);
  width:160px;
  height:160px;
  border-width:6px; 
  border-style: inset;
  border-radius: 60%;
  border-color: #FFFF00  #00248E;
}
/*box Footer*/
html,body {
 width:100%;
 height:126%;
}
a {
 color:#f05f40;
 -webkit-transition:all .35s;
 -moz-transition:all .35s;
 transition:all .35s;
}
a:hover,a:focus {
 color:#eb3812;
}
.bg-primary {
 background-color:#808;
}
.bg-dark {
 color:#ccc;
 background-color:#222;
}
.bg-gray {
 background-color:#f4f4f4;
}
.bg-darkgray {
 background-color:#eaeaea;
}
.equal-heights .col-md-4 {
 padding-left:0;
 padding-right:0;
}
.equal-heights .box {
 padding:60px;
}
.w-middle {
 transform-style:preserve-3d;
}
@media(min-width:180px) {
  .w-middle .box {
   position:relative;
   top:50%;
   -webkit-transform:translateY(-50%);
   -ms-transform:translateY(-50%);
   transform:translateY(-50%);
 }
}
.box h2 {
 font-size:26px;
 margin-bottom:20px;
 margin-top:0;
}
.equal-heights img {
 max-width:100%;
 height:auto;
 width:100%;
 display:block;
}
.iconbox {
 display:inline-block;
 width:80px;
 height:80px;
 color:#fff;
 border-radius:50%;
 line-height:90px;
}
.teambox h2 {
 margin:0;
 font-size:17px;
 font-weight:600;
 text-transform:uppercase;
 letter-spacing:1px;
 padding:20px 20px 5px 20px;
 text-align:center;
}
.teambox p {
 margin:0;
 padding:0px 20px 15px 20px;
 font-size:14px;
 text-transform:uppercase;
 font-weight:300;
 text-align:center;
}
.team-social {
 padding:0 20px 20px 20px;
 text-align:center;
}
.overlay-image {
 width:100%;
 height:30%;
 overflow:hidden;
 position:relative;
 text-align:center;
 background:#222;
}
.port-zoom-link p {
 width:100%;
}
.overlay-image .mask,.overlay-image .content {
 width:100%;
 height:100%;
 position:absolute;
 overflow:hidden;
 top:0;
 left:0
}
.view-overlay img {
 -webkit-transform:scaleY(1);
 -moz-transform:scaleY(1);
 -o-transform:scaleY(1);
 -ms-transform:scaleY(1);
 transform:scaleY(1);
 -webkit-transition:all .7s ease-in-out;
 -moz-transition:all .7s ease-in-out;
 -o-transition:all .7s ease-in-out;
 -ms-transition:all .7s ease-in-out;
 transition:all .7s ease-in-out
}
.view-overlay .mask {
 -webkit-transition:all .5s linear;
 -moz-transition:all .5s linear;
 -o-transition:all .5s linear;
 -ms-transition:all .5s linear;
 transition:all .5s linear;
 -ms-filter:"alpha(opacity=0)";
 filter:alpha(opacity=0);
 opacity:0
}
.port-zoom-link {
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 margin:auto;
 padding:0 20px;
 align-items:center;
 display:flex;
}
.view-overlay:hover img {
 -webkit-transform:scale(10);
 -moz-transform:scale(10);
 -o-transform:scale(10);
 -ms-transform:scale(10);
 transform:scale(10);
 -ms-filter:"alpha(opacity=0)";
 filter:alpha(opacity=0);
 opacity:0
}
.view-overlay:hover .mask {
 -ms-filter:"alpha(opacity=100)";
 filter:alpha(opacity=100);
 opacity: 1
} 
.clearfix-sosial {
}
.wrapsection {
 padding:0px 0;
 position:relative;
 margin:0px 0;
}
.parallax-content {
 position:relative;
 z-index:4;
 padding:80px 0;
} 
/* sosial */
.funfacts .icon {
 font-size:40px;
 display:inline-block;
 width:80px;
 height:80px;
 line-height:80px;
 text-align:center;
 border-radius:50%;
 margin-top:10px;
 clear:both;
 color:#fff;
 border:0;
}
.carousel-control {
  position: absolute;
  top: 0%;
  width: 40px;
  height: 100%;
  font-size: 30px;
  padding-top:10px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: none;
  border: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
 }
 .carousel-control i{
  position: absolute;
  top: 40%;
  z-index: 5;
  display: inline-block;
 }
 .thumbnail.product-item{
  border-top:0px;
  border-left:0px;
  border-right:0px;
  overflow:hidden;
  max-height:300px;
  padding-top:20px;
  background:none;
  border-bottom:4px solid rgba(0,0,0, 0.1);
  -moz-box-shadow:none;
  box-shadow:none;
  -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
    box-sizing:border-box;
  -webkit-border-radius:0px;
   -moz-border-radius:0px;
    border-radius:0px;
 } 
 .btn {
   border: none;
   background: #34495e;
   color: white;
   font-size: 16.5px;
   text-decoration: none;
   text-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   -webkit-transition: 0.25s;
   -moz-transition: 0.25s;
   -o-transition: 0.25s;
   transition: 0.25s;
   -webkit-backface-visibility: hidden; 
 } 
  .btn:hover, 
  .btn:focus {
    background-color: #4e6d8d;
    color: white;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden; 
 }
  .btn:active, .btn.active {
  background-color: #2c3e50;
  color: rgba(255, 255, 255, 0.75);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
 }
  .btn.disabled, 
  .btn[disabled] {
  background-color: #95a5a6;
  color: white; 
 } 
  .btn.btn-large {
  padding-bottom: 12px;
  padding-top: 13px; 
 }
  .btn.btn-primary {
  background-color: #1abc9c; 
 }
    .btn.btn-primary:hover, 
 .btn.btn-primary:focus {
      background-color: #2fe2bf; 
 }
    .btn.btn-primary:active, 
 .btn.btn-primary.active {
      background-color: #16a085;
  }
 .btn.btn-info {
  background-color: #3498db; 
 }
    .btn.btn-info:hover, 
 .btn.btn-info:focus {
      background-color: #5dade2; 
  }
    .btn.btn-info:active, 
 .btn.btn-info.active {
      background-color: #2383c4; 
 }
  .btn.btn-danger {
  background-color: #e74c3c; 
 }
    .btn.btn-danger:hover, 
 .btn.btn-danger:focus {
      background-color: #ec7063; 
 }
    .btn.btn-danger:active, 
 .btn.btn-danger.active {
      background-color: #dc2d1b; 
 }
  .btn.btn-success {
    background-color: #2ecc71; 
 }
    .btn.btn-success:hover, 
 .btn.btn-success:focus {
      background-color: #55d98d; 
  }
    .btn.btn-success:active, 
 .btn.btn-success.active {
      background-color: #27ad60; 
 }
  .btn.btn-warning {
  background-color: #FFAA49; 
 }
    .btn.btn-warning:hover, 
 .btn.btn-warning:focus {
      background-color: #f4d03f; 
 }
    .btn.btn-warning:active, 
 .btn.btn-warning.active {
      background-color: #cea70c; 
  } 
</style> 
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<body data-spy="scrolll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #663399;">
          <div class="container-fluid">
              <div class="navbar-header">                 
                 <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:14px;color:#dad">&nbsp;QUOTE</a></i></li>
    <a class="navbar-brand" href="http://sample-mys2010.blogspot.co.id/2017/06/single-page-template.html"target="_blank"title="Mari Belajar"> 
<i class="fa fa-chain"style="font-size:14px;color:red">&nbsp;VISIT</a></i></li>
<a class="navbar-brand" href="http://sule-parallax.blogspot.co.id/2017/04/don-williams-i-would-like-to-see-you.html"target="_blank"title="My Music"> 
<i class="fa fa-music"style="font-size:14px;color:red">&nbsp; MUSIC</a></i></li>
      </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
<a class="navbar-brand" href="https://Link Download"title="Download Full Code"> 
<i class="fa fa-download"style="font-size:14px;color:#eee"> &nbsp;GETCODE</a></i></li>
<a class="navbar-brand" href="http://sule-tema.blogspot.co.id/2017/06/ada-apa-dengan-web.html"target="_blank"title="Behind the future"> 
<i class="fa fa-user-md"style="font-size:14px;color:red"> &nbsp;FUTURE</a></i></li>
<a class="navbar-brand" href="http://sule-hiburan.blogspot.co.id/2017/04/connie-cover.html"target="_blank"title="Music Cover"> 
<i class="fa fa-headphones"style="font-size:14px;color:dad"> &nbsp;COVER</a></i></li>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-search"style="font-size:14px;color:#CC0099"></span></a></li>
      </ul>
          </div>
        </div>
     </div>
 </nav>

<nav>
  <div class="container-fluid  bg-0 ">
    <a class="navbar-brand"><span style="color: #808">Attempted<br/><h4><small class="white">
<font size="4"color="#000"face="agency fb">Have the best skills</small></h4></font></a>
    <ul class="nav nav-pills pull-right">
<li role="presentation"class=" img-rounded black">
<a class="navbar-brand"href="https://Link Judul"target="_blank"title="Mari Berbagi"> 
<i class="fa fa-share-alt"style="font-size:22px;color:silver"> LET'S</a></i></li>
<a class="navbar-brand"href="https://github.com/Myscript2010/Editing-Script-2010-2016"target="_blank"title="Mari Belajar"> 
<i class="fa fa-github"style="font-size:14px;color:blue"> &nbsp;GIT</a></i></li>

<a class="navbar-brand"href="https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works"target="_blank"title="Mari Belajar"> 
<i class="fa fa-free-code-camp"style="font-size:14px;color:blue"> &nbsp;CAMP</a></i></li>

      <a class="navbar-brand"href="https://jsfiddle.net/user/dashboard"target="_blank"title="Mari Belajar"> 
      <i class="fa fa-jsfiddle"style="font-size:14px;color:blue"> &nbsp;JSF</a></i></li>

<a class="navbar-brand"href="http://tools-gradiend.blogspot.co.id/2017/02/building-bditor.html"target="_blank"title="Mari Belajar"> 
<i class="fa fa-pencil-square-o"style="font-size:14px;color:blue">&nbsp;EDITOR</a></i></li>
    </ul>
  </div>
</nav>

<div id="home" class="container bg-1">
  <h1 class="text-center">Welcome to M-2010<br/>
<h4 class='text-center'>A smart & Creative Single Page Template</small></h4></h1>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">  
    
<!-- Carousel -->
</head>
<body>
 <div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb8byk3_KQO5rYof6cDMQ1XyL7C4mKhAM-9A1vP-NnR6yXtD6SYPbn_5EuTdHjQQyClihYN2QB28LumduxhAKN-sw44hb2fcnq5ym1RwfoGEVDt01JjlffSRRVkA3J_4sj-hAUL39wvtk/s1600/bg1-M2010.png:large">
                <div class="carousel-caption">
              <h3> 😍</h3>
            <p>- -</p>                          
                </div>
            </div>

            <!-- Carousel 1-->
    <div class="item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEeHsQqhgNr5yzmDzsbhFD3_Pmejk7zbJt-7v-Hph9HtQna76QzihDe5Gl88tRdiSovozTdCLMjth1aWWCdGcOiztDN98w8f67Xb627yTd0KsSDunOdP5MFDucj7Lp4GmX_-QrffXz280/s1600/bg2-M2010.png:large">
                <div class="carousel-caption">
            <h3> 😊</h3>
          <p>- -</p>
                </div>
             </div>

            <!-- Carousel 2-->
     <div class="item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1rlZ4zIjnkPl4Hg6EWS4maMWWf-nSowbI5oZK_oJ8wQGw21ZwvHTPBPOQKfkF3SIddpHYmm4BaO9lMYuI2LBchfYcU1tQRmUIESV9UrDEdYRP1U_KY2QDiPugREqzIDim9u2HikOGRcE/s1600/Bg3-M2010.png:large">
                <div class="carousel-caption">
                   <h3> - -</h3>
             <p>😁<br>
           <p>- -</p>
                </div>
            </div>

            <!-- Carousel 3-->
    <div class="item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWRRJ2_U2-joe4BKIhHjK7B9oiA7D8aRw6v-y-gQiqrsFZAJdnSx0AWbJlC-6rxOFZr6qfY6rEifnFub4UjFgUVv4U3_FL5WzG2OrtomQdzx24RTS2f9j_RPGuvwCxpz99yzmfYWhG_kk/s1600/bg4-M2010.png:large">
              <div class="carousel-caption">
            <h3> 😍</h3>
         <p>- -</p>
      </div>
   </div>
 <!-- Carousel 4-->
</div>

<!-- carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active">
<a href="#">M-2010<small>The skills I learned</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">M-2010<small>Let's Share</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">M-2010<small>Let's Study</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">M-2010<small>Berbagi untuk semua orang</small></a></li>
        </ul>
    </div>
<!-- End Carousel -->
</div>
    </div>
      </div>
    <!-- Controls -->
    
  </div>
<div class="row"></div> <hr style="height:20px">
 <Bg Sosial><div class='col-sm-12'>
  <h5>   <font face="agency fb"size="6" color="green">&clubs; M2010</h5></font>
     </div></div>
<div id="about" class="container-fluid bg-2">
  <h2 class="text-center">
<font size="7"color="#808"face="agency fb">Let's share <br>Website design knowledge sharing for everyone</font>
</h2>
</div>
   <hr>
     <br>
        <br>
  <ul class="list-inline text-center">
    <div class="row">
      <div class="col-xs-4 col-md-4">
        <li>
          <h2 class="glyphicon glyphicon-link"style="color:#808"></h2>
          <h3>Multi purpose vehicle<br/><small class="pricingr">
<span style="color: #505">From various sources studied  & practiced
With satisfactory results</small></h3></li>
      </div>

      <div class="col-xs-4 col-md-4">
        <li>
          <h2 class="glyphicon glyphicon-folder-open"></h2>
          <h3>Searching From <br/><small class="pricingr">
<span style="color: #808">Collecting files from various<br>
sources is very good for us to learn </small></h3></li>
      </div>
      <div class="col-xs-4 col-md-4">
        <li>
          <h2 class="glyphicon glyphicon-blackboard"style="color:#808"></h2>
          <h3>Creative Design<br/><small class="pricingr">
<span style="color: #505">Designing blogs <br> properly   should be done with care</small></h3></li>
      </div>
    </div>
  </ul>
</div>
<hr>

<!-- Menu circle 1 -->
<div id="team" class="container-fluid bg-3">
  <h2 class="text-center">Skilled<br/>
<small><span style="color: #808">Smart and Meticulous</small></h2>
    <div class=" col-sm-3 col-md-3">
      <div class="thumbnail">
<img id="poto-circle"src="https://sites.google.com/site/makingmenu/foto/Bgmenu1-M2010.png" alt="Sule" class="img-circle img-responsive dev" width="160px" height="160px">
        <div class="caption">
          <h3 class="silver">Menu</h3>
          <p class="pricingr">Your Content Here</p>
<p><a href="http://Link Judul"class="btn greenbg"role="button"target="_blank" title="Mari Belajar">VISIT</a></p>
        </div>
      </div>
    </div> 

<div class=" col-sm-3 col-md-3">
      <div class="thumbnail">
<img id="poto-circle"src="https://sites.google.com/site/makingmenu/foto/Bgmenu3-M2010.png" alt="Sule" class="img-circle img-responsive dev" width="160px" height="160px">
 <div class="caption">
          <h3 class="silver">Menu</h3>
          <p class="pricingr">Your Content Here</p>
<p><a href="http://Link Judul"class="btn greenbg"role="button"target="_blank" title="Mari Belajar">VISIT</a></p>
        </div>
      </div>
    </div>

<div class=" col-sm-3 col-md-3">
      <div class="thumbnail">
<img id="poto-circle"src="https://sites.google.com/site/makingmenu/foto/Bgmenu4-M2010.png" alt="Sule" class="img-circle img-responsive dev" width="160px" height="160px">
 <div class="caption">
          <h3 class="silver">Menu</h3>
          <p class="pricingr">Your Content Here</p>
<p><a href="http://Link Judul1"class="btn greenbg"role="button"target="_blank" title="Mari Belajar">VISIT</a></p>
        </div>
      </div>
    </div>
 
    <div class="col-sm-3 col-md-3">
      <div class="thumbnail">
<img id="poto-circle"src="https://sites.google.com/site/makingmenu/foto/Bgmenu1-M2010.png" alt="Sule" class="img-circle img-responsive dev" width="160px" height="160px">
 <div class="caption">
          <h3 class="silver">Menu</h3>
          <p class="pricingr">Your Content Here</p>
<p><a href="http://Link Judul"class="btn greenbg"role="button"target="_blank" title="Mari Belajar">VISIT</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

<hr>
<!-- Menu Box  1 -->
<div class="row"></div>
  <div align="center">🎀</div>
<div id="portfolio" class="container-fluid bg-4">
  <h2 class="text-center bt">website Elegant & Professional<br/>
<font face="vivaldi"size="6" color="#555">This is how our works looks like in the field of design like</font></h2>
  <div class="row text-center">
<font face="agency fb"size="6" color="green">
    <div id="work" class="carousel slide" data-ride="carousel">         

<!--Indicators Wrapper for slides -->
<div class="row text-center">
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <ul class="list-inline products">
            <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 1</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>  
              <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 2</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>
            <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 3</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>
            <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 4</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>          
</ul>
  </div>

      <div class="item">
        <ul class="list-inline products">
           <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 5</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>
            <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 6</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>
            <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 7</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>
            <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 8</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>
 </ul>
    </div>

       <div class="item">
         <ul class="list-inline products">
            <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 9</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>
            <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 10</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>
            <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 11</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>
            <div class="col-xs-3">
<li><img src="https://sites.google.com/site/sule30708/images/Menu-M2010.png"alt="product1"class="img-responsive"></li> <font face="agency fb"size="4" color="#333">Product 12</font> 
<a href="http://Link Judul"style="text-decoration:none"target="_blank"title="Mari Belajar"> 
<font face="agency fb"size="4" color="#990099"> Content</a></font>
</div>
     </ul>
        </div>
         </div>
      <!-- Controls -->
      <a rel="nofollow" rel="noreferrer"class="left carousel-control" href="#work" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a rel="nofollow" rel="noreferrer"class="right carousel-control" href="#work" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      </div>
       </div>
         </div>
      </div>
   </div>
</div>              
 </font>
<!-- slider end -->

<!-- Menu circle 1 -->
<hr style="height:20px">
<div id="team" class="container-fluid bg-3">
  <h2 class="text-center">
<font face="agency fb"size="6" color="#fff">Try & develop</font><br/>
<small><span style="color: #000">From what we learn</small></h2>
    <div class=" col-sm-3 col-md-3">
      <div class="thumbnail">
<img id="poto-circle"src="https://sites.google.com/site/makingmenu/foto/Bgmenu1-M2010.png" alt="Sule" class="img-circle img-responsive dev" width="160px" height="160px">
        <div class="caption">
          <h3 class="silver">Menu</h3>
          <p class="pricingr">Your Content Here</p>
<p><a href="http://Link Judul"class="btn greenbg"role="button"target="_blank" title="Mari Belajar">VISIT</a></p>
        </div>
      </div>
    </div>

<div class=" col-sm-3 col-md-3">
      <div class="thumbnail">
<img id="poto-circle"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9F67mTs5LsTtvn6fNbRtqqzkU5uq7jOTmgjgYZJojpIFYvHWotBvMUNTlMiw4hZnksISp1NOmHg-iWhiNML6cmclKqDfw0C-FteaOKG6duTOGZDBkA0ElvddjuLfp5z3vl8q9yUJ0Qgrl/s1600/Bgmenusql-M2010.png" alt="Sule" class="img-circle img-responsive dev" width="160px" height="160px">
 <div class="caption">
          <h3 class="silver">Menu</h3>
          <p class="pricingr">Your Content Here</p>
<p><a href="http://Link Judul"class="btn greenbg"role="button"target="_blank" title="Mari Belajar">VISIT</a></p>
        </div>
      </div>
    </div>

<div class=" col-sm-3 col-md-3">
      <div class="thumbnail">
<img id="poto-circle"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKUj_QfFA88W2Y95mwn6tb2rtw6N3HaN3XUlJ42clgIp8gd4Wh-flI8nueiW74uBlbZDpmqATzoN7gNeBlRU_dHhIgdsZ8bPJeeRMy8xs_1S95gY2RdcoPX2p1Ry97k_bUh5c9sofYDEcr/s1600/Bgmenu5-M2010.png" alt="Sule" class="img-circle img-responsive dev" width="160px" height="160px">
 <div class="caption">
          <h3 class="silver">Menu</h3>
          <p class="pricingr">Your Content Here</p>
<p><a href="http://Link Judul"class="btn greenbg"role="button"target="_blank" title="Mari Belajar">VISIT</a></p>
        </div>
      </div>
    </div> 

    <div class="col-sm-3 col-md-3">
      <div class="thumbnail">
<img id="poto-circle"src="https://sites.google.com/site/makingmenu/foto/Bgmenu1-M2010.png" alt="Sule" class="img-circle img-responsive dev" width="160px" height="160px">
 <div class="caption">
          <h3 class="silver">Menu</h3>
          <p class="pricingr">Your Content Here</p>
<p><a href="http://Link Judul"class="btn greenbg"role="button"target="_blank" title="Mari Belajar">VISIT</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
 
<hr>
<!-- Menu Box Design 1-->
<div class="row"></div>
  <div align="center">🎀</div>
<div id="other" class="container-fluid bg-5 no-padding ">
  <h2 class="text-center">
<font face="agency fb"size="6" color="#990099">
we are creative</font><br/><small>Get start your next awesome project</small></h2>
<Menu Box>

<div class="container">  
     <div class="col-md-4">
        <div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7yAdoyuRMVgPMd8ouRJ2v4p2etM0oMf2cHQ91Uq2xzjqfEVA74LfTKiT3B8VRglpS7nDRu2-sgOaxiFJQyCnxHP_O5pSSPo8CNU9DmmSDRcEfi8aozq7utIP4FZ1pU9x8lIJQPbjc2zZ5/s1600/Mobile-M2010.jpg" alt="...">
          <div class="caption">
            <h3>Mobile Design</h3>
            <hr>
            <p>Your Content Here <br>Your Content Here Your Content Here <br>Your Content Here Your Content Here</p>
            <p><a rel="nofollow" rel="noreferrer"href="#" class="btn btn-primary" role="button">Read More</a></p>
          </div>
        </div>
        </div>
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgagqlunVIhBy_ZIgKLUsHsNJa6MNd_sRJhOdMNmejM_MgPexJJhH9ctN4p7MCoQWB3QJzGdrn19ejb6CpXtiZvkeyZJ_wdshEw4Qxhmc18BmMuh4o3yg0w5_L7XNhKLaEbJXHsehkYWmer/s1600/Scool-M2010.jpg" alt="...">
            <div class="caption">
              <h3>School Project</h3>
              <hr>
               <p>Your Content Here <br>Your Content Here Your Content Here <br>Your Content Here Your Content Here</p>
            <p><a rel="nofollow" rel="noreferrer"href="#" class="btn btn-primary" role="button">Read More</a></p>
            </div>
          </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijct7oFYSFAP_uRyfO1eXexXQnkC-cSvWuwYxiqD0hee9dNFQ2shY9FmDa94iDfE8LKDRU9fRq-Ords0H6x_ao3eh4zrETbp4xEQQnoxfY3D5AOXmDiZooqOQrPfkveiISGpTdA2_wWNhf/s1600/Video-M2010.jpg" alt="...">
              <div class="caption">
                <h3>Video Editor</h3>
                <hr>
              <p>Your Content Here <br>Your Content Here Your Content Here <br>Your Content Here Your Content Here</p>
            <p><a rel="nofollow" rel="noreferrer"href="#" class="btn btn-primary" role="button">Read More</a></p>
              </div>
            </div>
          </div>
        </div>

      </div> <!-- /container -->
      <div style="background-color: #eee;" id="contact-image">
      <div class="container">
      <div class="row">
                   <div class="content-section-a" id="contact">      
                </div>
            </div>
          </div>
        </div>

<hr>
<!-- Menu Box Design 3-->
<div class="row"></div>
  <div align="center">🎀</div>
<div id="other" class="container-fluid bg-5 no-padding ">
  <h2 class="text-center">
<font face="agency fb"size="5" color="#990099">I'm a beginner</font><br/><small>I want to be the best</small></h2>
<Menu Box?
<div class="container">   
    
      <div class="col-md-4">
        <div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQdJ5LPUIXWLJWDJU7wVRkcTqiHqluS8Xa0Nbs3QScrRhIuc4v2WpJk9fjb9ozFK9qLLS_pDQhdgFlGLq1JS8P6u-YRAsL1oHDftwvucGO0ElOLlVKxBZPQcSkm0KX9d9u4hMQPpnJipKb/s1600/Designers-M2010.jpg" alt="...">
          <div class="caption">
            <h3>Designers</h3>
            <hr>
             <p>Your Content Here <br>Your Content Here Your Content Here <br>Your Content Here Your Content Here</p>
            <p><a rel="nofollow" rel="noreferrer"href="#" class="btn btn-primary" role="button">Read More</a></p>
          </div>
        </div>
        </div>
        <div class="col-md-4">
          <div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBW2beQNCJ9Pf-5c6imNPa9rS-CuCKyW2Vk0BPKDMtXTWgb-Pe-__NTq_OHzstObW9D65qR4I1SqYL0oYm84A3h-Wwe814zvrhJvUJiY8Hz6_ax9xsD0UEbU8Tjf8OdGSVIGJkjJ4ZoHFD/s1600/Webdesign-M2010.jpg" alt="...">
            <div class="caption">
              <h3>Web Design</h3>
              <hr>
              <p>Your Content Here <br>Your Content Here Your Content Here <br>Your Content Here Your Content Here</p>
            <p><a rel="nofollow" rel="noreferrer"href="#" class="btn btn-primary" role="button">Read More</a></p>
            </div>
          </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexWC8K59Gn76TA5dWCgrrYhXlkBO5DjhPQ1Cz67WSgVbRRt3ZHfYWeTyjiAlMvCbgympmAxXWrratFm5jVgM4o2oow4rDjoAbQKlnUu_k-HUC8pI2lXP2EKwkBBKLCT4b0sGJbNE9JiDP/s1600/Profess-M2010.png" alt="...">
              <div class="caption">
                <h3>Professional</h3>
                <hr>
<p>Your Content Here <br>Your Content Here Your Content Here <br>Your Content Here Your Content Here</p>
            <p><a rel="nofollow" rel="noreferrer"href="#" class="btn btn-primary" role="button">Read More</a></p>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- /container -->
      <div style="background-color: #eee;" id="contact-image">
      <div class="container">
      <div class="row">
          <div class="content-section-a" id="contact">      
          </div>
       </div>    
<!-- Menu box design 3 --> 
      <div class="col-md-4">
        <div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxi1VnmACzPd_YKHcTKDGOs-_o1IjoS4DEFRgTHdND4YXI00bmf9Rh2H-IHIQPVTojoNjC6HTSMfbqXHyZrfw6muLiWbjKJMvHjbIZAMU_wKVODsZC4m-NgTi0kU4aNGcyKNpliGOBLEI/s1600/MarketingWeb-M2010.png" alt="...">
          <div class="caption">
            <h3>Marketing Web</h3>
            <hr>
             <p>Your Content Here <br>Your Content Here Your Content Here <br>Your Content Here Your Content Here</p>
            <p><a rel="nofollow" rel="noreferrer"href="#" class="btn btn-primary" role="button">Read More</a></p>
          </div>
        </div>
        </div>
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPU8sjAqTwk-CmvGNDlOuKoLzdn4WaztA0u0Y-2rA54qSjDPCGrpSAZDVd3JXqZGpiC23EFFkJmhiCvhHR0qEV7c0O3fHi4gm6PVPhJrW-WoRqtwdZaji7-gU7Z02LuNLU5xC8AQVxRJKr/s1600/Convers-M2010.jpg" alt="...">
            <div class="caption">
              <h3>Conversion</h3>
              <hr>
               <p>Your Content Here <br>Your Content Here Your Content Here <br>Your Content Here Your Content Here</p>
            <p><a rel="nofollow" rel="noreferrer"href="#" class="btn btn-primary" role="button">Read More</a></p>
            </div>
          </div>
        </div>
      <div class="col-md-4">
            <div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg25fhmv_oVXc6BEQ-zw4RPuqpCI-M3Z_eOa_JqN7D8SQdxS8plD3byvRcl7MayTdDUvCGloUdZ8dxksao3swyOg1b3M0g-dx3BH8lQWlveehYmpGIYGnroaiz4EiKodZNeZGV0AFFtiQ_F/s1600/Let-M2010.png" alt="...">
              <div class="caption">
                <h3>Myscript2010</h3>
                <hr>
<p>Your Content Here <br>Your Content Here Your Content Here <br>Your Content Here Your Content Here</p>
            <p><a rel="nofollow" rel="noreferrer"href="#" class="btn btn-primary" role="button">Read More</a></p>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- /container -->
      <div style="background-color: #eee;" id="contact-image">
      <div class="container">
      <div class="row">
          <div class="content-section-a" id="contact">    
              </div>
          </div>
        </div> 
       </div> 
     </div>
   </div>
 </div>
 <hr style="height:30px"> 
 <div class="container">
   <div class="row">    
  </p>
     </div> 
           </div>  
           <font size="5"color="#808"face="agency fb">  
        <div class="text-center col-sm-4 col-lg-4">
<a href="https://sites.google.com/site/sule62001/sule2001code/Mylogo-M2010.png"style="text-decoration:none"target="_blank"title="M-2010"">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-6cyumDnxNQhXs7lqdYmOxL0ZALDD3KYXF9yLx9LA0pve9jdM7jiVvzQl8OOAsGddqzdKgPsjod3PQFrlRa7KW3P7p1CSpt5-9sa6a1ara0ul2Aa3qbD2mcvwSd-rhg3ZnrIJqf68HsaC/s1600/Good-M2010.png"></a> 
        </div>  
        <div class="col-sm-8 col-lg-8">
          <h3>From all sources that provide products</h3>
          <p class="lead"> 
All we consider to be supporters to help with lessons<br>
How to design a good weblogs and correct, by reaching the code provided<br>
by the weblogs service providers in the form of a script that consists of CSS HTML.<br>
Our gratitude for the support of all sources. By. M2010 Cibeber Cimahi Beginners create blogs 
</p>
    <p><a class="btn btn-large btn-default" href="http://sample-mys2010.blogspot.co.id/2017/06/single-page-template.html"style="text-decoration:none"target="_blank"title="M-2010">Visit Links</a></p>
       </div>    
      </div>
    </div> 
   </div>
 </div>
</font>

<div class="row"></div>
<hr style="height:20px">
  <div align="center">🎀</div>
<div id="other" class="container-fluid bg-5 no-padding ">
  <div class="row-5">
    <div class="row ">
      <div class=" col-sm-4 col-md-4">
        <div class="panel panel-default">
          <div class="panel-body">
            <h2 class="text-center pricingh">Professional<br/><small class="pricingr">For everyone smart</small></h2>
          </div>
          <div class="panel-heading text-center">Single installation</div>
          <div class="panel-heading text-center">Unlimited Support</div>
          <div class="panel-heading text-center">Bootstrap V.3.3.7</div>
          <div class="panel-heading text-center">HTML5 CSS3 & JS</div>
          <div class="panel-body pricingi">
            <h2 class="text-left ">B <small> V.3.3.7</small>
<a href="http://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/"target="_blank" title="Boostrap V.3.3.7"><button class="btn pull-right">VISIT</button></h2></a>
          </div>
        </div>
      </div>
      <div class="col-sm-4 col-md-4">
        <div class="panel panel-default">
          <div class="panel-body">
            <h2 class="text-center pricingr">Expertise<br/><small>More than what we imagine</small></h2>
          </div>
          <div class="panel-heading text-center">Single installation</div>
          <div class="panel-heading text-center">Unlimited Support</div>
          <div class="panel-heading text-center">Tutorial W3schools</div>
          <div class="panel-heading text-center">HTML5 CSS3 & JS</div>
          <div class="panel-body pricingri">
            <h2 class="text-left ">W <small> 3Sc</small>
<a href="https://www.w3schools.com/default.asp"target="_blank" title="W3schools"><button class="btn pull-right">VISIT</button></h2></a>
          </div>
        </div>
      </div>
      <div class="col-sm-4 col-md-4">
        <div class="panel panel-default">
          <div class="panel-body">
            <h2 class="text-center pricingh">Start Up<br/><small class="pricingr">For beginners</small></h2>
          </div>
          <div class="panel-heading text-center">Basic pages</div>
          <div class="panel-heading text-center">MySQL Databases</div>
          <div class="panel-heading text-center">Bandwidth</div>
          <div class="panel-heading text-center">Storage space</div>
         <div class="panel-body pricingi">
            <h2 class="text-left ">M <small> 2010</small>
<a href="http://sample-mys2010.blogspot.co.id/2017/06/single-page-template.html"target="_blank" title="Myscript2010"><button class="btn pull-right">VISIT</button></h2></a>
          </div>
        </div>
      </div>
    </div>
  </div>
<footer>
</div>
</section>

<div id="other" class="container-fluid bg-5 no-padding ">
 <hr style="height:30px">
<slider auto bawah image>
<div id="myslide" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myslide" data-slide-to="0" class="active"></li>
        <li data-target="#myslide" data-slide-to="1"></li>
        <li data-target="#myslide" data-slide-to="2"></li>
      </ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://sites.google.com/site/sule30708/foto/Gambar3-M2010.jpg"alt="slide1">
 <div class="carousel-caption">
 </div>
    </div>
        <div class="item">
<img src="https://sites.google.com/site/sule30708/foto/Gambar1-M2010.jpg"alt="slide">
     <div class="carousel-caption">
         </div>
            </div>
                <div class="item">
<img src="https://sites.google.com/site/sule30708/foto/Gambar2-M2010.jpg?attredirects=0&d=1"alt="slide">
                   <div class="carousel-caption">
                    </div>
                      </div>
                        </div>
                         
<a rel="nofollow" rel="noreferrer"class="left carousel-control" href="#myslide" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
      </a>
<a rel="nofollow" rel="noreferrer"class="right carousel-control" href="#myslide" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
      </a>
         </div> 
 
<div class="teks">
<h1>Hello</h1>
<p class="lead">I am a beginner in website creation</p>
      </div><div class="carousel-caption">
                    </div>
                      </div>
                        </div>
           <Teks End>
<hr style="height:30px"><br><br>  
 <!-- Teks Footer -->
<section class="features text-center">
   <div class="container">
      <h3>Our Features From a Trusted Source</h3>
        <div class="row">
          <div class="col-lg-3">
            <span class="glyphicon glyphicon-ok"></span>
            <h3>100% responsive</h3>
            <p>Services & Connect</p>
            </div>
          <div class="col-lg-3">
            <span class="glyphicon glyphicon-ok"></span>
            <h3>100% responsive</h3>
            <p>Complete facilities</p>
            </div>
          <div class="col-lg-3">
            <span class="glyphicon glyphicon-ok"></span>
            <h3>100% responsive</h3>
            <p>Lovely menu room</p>
          </div>
          <div class="col-lg-3">
            <span class="glyphicon glyphicon-ok"></span>
            <h3>100% responsive</h3>
            <p>Template elegant</p>
          </div>
        </div>
      </div> <br><br>    
  </body>
</html>
<end>
<hr>

<!-- Menu Box Design 1-->
<div class="clearfix-sosial">
<div class="clearfix">
</div>  
<section class="no-padding">
<div class="col-md-4 bg-primary no-padding teambox">
<div class="team-thumb overlay-image view-overlay">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN6GI9LlcaPrzGEBBl_I2zEcH6IADS-SVqWsmpBO4MCfzaWQtxMGfzJsXxZe7Gc87r_3tlNakbi4OWW7feE-JTBFd1aTjUqa5vf82vVjtyKmBTHQ15bPmmDDU8isccDGPOYRehy2UKNZA/s1600/Connie-M2010.jpg"alt="class="img-responsive">
 <div class="mask team_quote">
  <div class="port-zoom-link">
   <p>
     Nama        : Connie Victoria Elizabeth Talbot <br>
     Lahir       : 20 November 2000 <br>
     Asal   : Streetly, Aldridge, West Midlands, Inggris <br>
     Pekerjaan   : Penyanyi <br>
     Instrumen   : vocal, piano, gitar / Genre : Pop <br>
     Tahun aktif : 2007–sekarang / Label : evosound <br>
   </p>
  </div>
 </div>
</div>
<h2>CONNIE</h2>
<p>
STREETLY INGGRIS
</p>
<div class="team-social">
 <a href="https://www.facebook.com/ConnieVETfans/"target="_blank"title="Mari Belajar">
  <i class="fa fa-facebook"style="font-size:18px;color:#888"></i></a>
  <a href="https://twitter.com/connie_pics?lang=en"target="_blank"title="Mari Belajar">
  <i class="fa fa-twitter" style="font-size:18px;color:#888"></i></a>
  <a href="https://www.instagram.com/officialconnietalbot/?hl=id"target="_blank"title="Mari Belajar">
  <i class="fa fa-instagram"style="font-size:18px;color:#888"></i></a> 
  <a href="https://www.youtube.com/user/ConnieTalbotVEVO"target="_blank"title="Mari Belajar">
  <i class="fa fa-youtube-square"style="font-size:18px;color:#888"></i></a>
  <a href="https://plus.google.com/117545846958685896075"target="_blank"title="Mari Belajar">
  <i class="fa fa-google-plus" style="font-size:18px;color:#888"></i></a> 
  <a href="https://connietalbot.com/"target="_blank"title="Mari Belajar">
  <i class="fa fa-link"style="font-size:18px;color:#888"></i></a></p>
  <a href="https://Link Follow"style="text-decoration:none"title="Follow beautiful girls on social media">
  SOCIAL MEDIA NETWORK FOLLOW</a>
</div>
</div>

<div class="col-md-4 bg-dark no-padding teambox">
<div class="team-thumb overlay-image view-overlay">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm32nFM01UI_pkt2hEEHVmbBvrpAF_wbrtEgEKdt-OecGt9Lt9zmksf8OGVF3r7VzIX2jdSlOKteeAyuBDu0Be7J8xLsDX28_EsfAZdqd_FKet74dY-eJ9EQzs7DUCDKK29lkpl3n-5mI/s1600/Janinne-weigel-M2010.jpg"alt="class="img-responsive">
 <div class="mask team_quote">
  <div class="port-zoom-link">
   <p>
     Nama        : Jannine Parawie Weigel <br>
     Nama lain   : Ploychompoo <br>
     Lahir       : 30 Juli 2000 Steinfurt, Jerman <br>
     Pekerjaan   : Penyanyi, aktris, peragawati <br>
     Tahun aktif : 2010  <br>
     Organisasi  : GMM Grammy <br>
     Agama       : Kristen <br>
   </p>
  </div>
 </div>
</div>
<h2>JANINNE WEIGEL </h2>
<p>
  STEINFURT JERMAN
</p>
<div class="team-social">
   <a href="https://www.facebook.com/JanninaW/"target="_blank"title="Mari Belajar">
   <i class="fa fa-facebook"style="font-size:18px;color:red"></i></a>
   <a href="https://twitter.com/janninewmusic?lang=en"target="_blank"title="Mari Belajar">
   <i class="fa fa-twitter" style="font-size:18px;color:red"></i></a>
   <a href="https://www.instagram.com/jannineweigel/?hl=en"target="_blank"title="Mari Belajar">
   <i class="fa fa-instagram"style="font-size:18px;color:red"></i></a> 
   <a href="https://www.youtube.com/user/JanninaW"target="_blank"title="Mari Belajar">
   <i class="fa fa-youtube-square"style="font-size:18px;color:red"></i></a>
   <a href="https://plus.google.com/+JanninaW2000"target="_blank"title="Mari Belajar">
   <i class="fa fa-google-plus" style="font-size:18px;color:red"></i></a>
   <a href="https://www.jannineweigelofficial.com/"target="_blank"title="Mari Belajar">
   <i class="fa fa-link"style="font-size:18px;color:red"></i></a></p>
   <a href="https://Link Follow"style="text-decoration:none"title="Follow beautiful girls on social media">
   SOCIAL MEDIA NETWORK FOLLOW</a>
</div>
</div>

<div class="col-md-4 bg-primary no-padding teambox">
<div class="team-thumb overlay-image view-overlay">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRQL2GOHVaxKENxw6RHvcPCaBN67r7mdhyphenhyphen9iTJ-tKEsUOijwHBfwBW9aMtoEEuIG_CAvBZk8a2E5rj6KWhaXR8zH0ovNfOjE5mnUXpqlXJaif1TYfJPVIy3VtnVySy2yfJvU9zR-B0jeY/s1600/Samantha-M2010.jpg"alt="class="img-responsive">
 <div class="mask team_quote">
  <div class="port-zoom-link">
   <p>
     Nama     : Samantha Potter<br>
     lahir    : 20 Januari 1990 <br>
     Tempat lahir : Woodland Hills, California, Amerika Syarikat<br>
     Agensi    : L.A. Model Management<br>
   </p>
  </div>
 </div>
</div>
<h2>SAMANTHA</h2>
<p>
  CALIFORNIA AS
</p>
<div class="team-social">
  <a href="https://www.facebook.com/lovepeacesing/"target="_blank"title="Mari Belajar">
  <i class="fa fa-facebook"style="font-size:18px;color:#888"></i></a>
  <a href="https://twitter.com/lovepeacesing?lang=en"target="_blank"title="Mari Belajar">
  <i class="fa fa-twitter" style="font-size:18px;color:#888"></i></a>
  <a href="https://www.instagram.com/lovepeacesing/"target="_blank"title="Mari Belajar">
  <i class="fa fa-instagram"style="font-size:18px;color:#888"></i></a> 
  <a href="https://www.youtube.com/user/SamanthaPotterMusic"target="_blank"title="Mari Belajar">
  <i class="fa fa-youtube-square"style="font-size:18px;color:#888"></i></a>
  <a href="https://plus.google.com/117545846958685896075"target="_blank"title="Mari Belajar">
  <i class="fa fa-google-plus" style="font-size:18px;color:#888"></i></a>  
  <a href="http://www.samanthapottermusic.com/"target="_blank"title="Mari Belajar">
  <i class="fa fa-link"style="font-size:18px;color:#888"></i></a></p>
  <a href="https://Link Follow"style="text-decoration:none"title="Follow beautiful girls on social media">
  SOCIAL MEDIA NETWORK FOLLOW</a>
</div>
</div>
<div class="clearfix-sosial">
<div class="clearfix">
</div>    
  </div>
 </div>
</div>
</div>
 
<div class="row"></div> 
<hr style="height:20px">
 <Bg Sosial>
<section id="funfacts" class="parallax parallax-image" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQVAeELBFv0lzvxLWjN-oq68HQ4CLjCcAtOusXcyGGs9fP0J5Mxjd_yBEtsJYq0HJD4sjceR_aKrzHu0bLWeFPtnCuFSY2XIw3iCnW-WWCqFNctmn5ehdkQ-we5sp8RE9_aSdWf2VE2Sn/s1600/Transparent-M2010.png);">
<div class="wrapsection">
<div class="container">
 <div class="parallax-content">
  <div class="row">
   <div class="col-md-3">
    <div class="funfacts text-center">
     <div class="icon">
<a href="https://www.webdesignerdepot.com/2016/05/the-secret-to-happy-clients/"target="_blank"title="Mari Belajar">
      <i class="fa fa-tint"></i></a>
     </div>
     <h2 class="counter" data-from="0" data-to="294" data-speed="2500"></h2>
     <h4>Happy Clients</h4>
    </div>
   </div>
   <div class="col-md-3">
    <div class="funfacts text-center">
     <div class="icon">
<a href="http://www.webaward.org/"target="_blank"title="Mari Belajar">
      <i class="fa fa-trophy"></i></a>
     </div>
     <h2 class="counter" data-from="0" data-to="163" data-speed="2500"></h2>
     <h4>Awards Received</h4>
    </div>
   </div>
   <div class="col-md-3">
    <div class="funfacts text-center">
     <div class="icon">
<a href="https://web.telegram.org/#/login"target="_blank"title="Mari Belajar">
      <i class="fa fa-send-o"></i></a>
     </div>
     <h2 class="counter" data-from="0" data-to="317" data-speed="2500"></h2>
     <h4>Telegram Website</h4>
    </div>
   </div>
   <div class="col-md-3">
    <div class="funfacts text-center">
     <div class="icon">
<a href="https://telegram.org/"target="_blank"title="Mari Belajar">
      <i class="fa fa-telegram" style="font-size:48px;color:white"></i></a>
     </div>
     <h2 class="counter" data-from="0" data-to="458" data-speed="2500"></h2>
     <h4>Telegram Mobile</h4>
    </div>
   </div>
  </div>
 </div>
</div>
</div>
</section>
<div class="clearfix">
</div>

  <div class="row"></div> 
<hr style="height:20px">
  <div align="center">🎀</div>
  <div class="row-6">
    <div class="row text-center"><br>
      <h2 class="text-center">
<font face="agency fb"size="6" color="green">stay in touch with us</font><br><small class="bt">This is how to keep in touch</small><h2>
<share>
  <div class="col-lg-12 text-center clearfix">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 no-padding">
            <div class="col-sm-6 col-xs-6">
<a href="https://www.facebook.com/learn.editing.myscript2010"title="Share on Facebook"class="M2010"target="_blank">
<i class="fa fa-2x fa-facebook-square"></i></a></div>

            <div class="col-sm-6 col-xs-6">
<a href="https://twitter.com/myscript2010s"title="Share on Twitter" class="M2010"target="_blank">
<i class="fa fa-2x fa-twitter-square"></i></a></div>
          </div>

          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 no-padding">
            <div class="col-sm-6 col-xs-6">
<a href="https://www.instagram.com/myscript2010/" title="Share on Instagram" rel="index,follow"class="M2010"target="_blank"><i class="fa fa-2x fa-instagram"></i></a></div>            

<div class="col-sm-6 col-xs-6">
<a href="http://sule-tema.blogspot.co.id/2017/06/windows-10.html"title="Windows"rel="index,follow"class="M2010"target="_blank">
<i class="fa fa-windows"style="font-size:58px;color:#fff"></i></a></div>
          </div>

          <div class="col-sm-12 col-xs-12 clearfix hidden-lg hidden-md hidden-sm padding-top-eight-px"></div>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 no-padding">
            <div class="col-sm-6 col-xs-6">
<a href="https://id.pinterest.com/myscript2010/bloggers/"title="Share on Pinterest"rel="index,follow" class="M2010"target="_blank">

<i class="fa fa-2x fa-pinterest-square"></i></a></div>
            <div class="col-sm-6 col-xs-6">
<a href="https://www.youtube.com/user/myscript2010s"title="YouTube"rel="index,follow"class="social-sharing"target="_blank">
<i class="fa fa-2x fa-youtube-square"></i></a></div>
          </div>

          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 no-padding">
            <div class="col-sm-6 col-xs-6">
<a href="https://play.google.com/store/apps/details?id=com.propay.mobile" title="M2010" rel="index,follow"class="social-sharing"target="_blank">
<i class="fa fa-2x fa-android"></i></a></div>

            <div class="col-sm-6 col-xs-6">
<a href="https://itunes.apple.com/us/app/propay-accept-credit-cards/id433046878?mt=8"rel="index,follow"title="Download from Apple Store" class="social-sharing" target="_blank">
<i class="fa fa-2x fa-apple"></i></a></div> 
          </div> 
        </div> 
      </div>
    </div>
        </div>
      </div>
    </div>
  </div>
<br>

<div align="center">
 <font face="vivaldi"size="6" color="#47006B">
Learning has no limit, From learning that we are able to achieve something that we want</font>
 </div>
 </div>
  </div>
<br>

<!-- Footer Black-->
<footer id="footer-Section">
  <div class="footer-top-layout">
    <div class="container">
      <div class="row">
         
        </div>
      </div>
    </div>
  </div><br>
  <div class="footer-bottom-layout">
    <div class="socialMedia-footer"> 
<a href="https://Link Judul" title="M-2010"rel="index,follow"class="social-sharing"target="_blank">
<i class="fa fa-star-o"style="font-size:28px;color:red"></i></a> 
<a href="https://Link Judul" title="M-2010"rel="index,follow"class="social-sharing"target="_blank">
<i class="fa fa-star-o"style="font-size:28px;color:red"></i></a> 
<a href="https://Link Judul" title="M-2010"rel="index,follow"class="social-sharing"target="_blank">
<i class="fa fa-star-o"style="font-size:28px;color:green"></i></a> 
<a href="https://Link Judul" title="M-2010"rel="index,follow"class="social-sharing"target="_blank">
<i class="fa fa-star-o"style="font-size:28px;color:red"></i></a> 
<a href="https://Link Judul" title="M-2010"rel="index,follow"class="social-sharing"target="_blank">
<i class="fa fa-star-o"style="font-size:28px;color:red"></i></a> </div>
    <div class="copyright-tag">
<span style="color: #dad">Copyright &copy; 2017 M-2010 Cibeber Cimahi</div>
  </div><br>
</footer>
<!DOCTYPE html>
<html>
<head>
<title>Myscript2010</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>
<title>Slider tengah JS</title>  
<bootstrapJquery> 
<script src="http://sitediscount.ru/flatscrollerbs3/assets/js/jquery.js"></script> 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script src="http://sitediscount.ru/flatscrollerbs3/assets/js/jquery.parallax-1.1.3.js"></script>
<scrollatasbawah> 
<script src="http://sitediscount.ru/flatscrollerbs3/assets/js/jquery.localscroll-1.2.7-min.js"></script>
<script src="http://sitediscount.ru/flatscrollerbs3/assets/js/jquery.scrollTo.min.js" ></script>
<script src="https://sites.google.com/site/sule30708/kode/Sliders-Tengah-M2010.js"></script>
<Carousel>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        window.alert = function(){};
        var defaultCSS = document.getElementById('bootstrap-css');
        function changeCSS(css){
            if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); 
            else $('head > link').filter(':first').replaceWith(defaultCSS); 
        }
        $( document ).ready(function() {
          var iframe_height = parseInt($('html').height()); 
          window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
        });
    </script>

 <script type="text/javascript">
 $(document).ready( function() {
    $('#myCarousel').carousel({
     interval:   4000
 }); 
 var clickEvent = false;
 $('#myCarousel').on('click', '.nav a', function() {
   clickEvent = true;
   $('.nav li').removeClass('active');
   $(this).parent().addClass('active');  
 }).on('slid.bs.carousel', function(e) {
  if(!clickEvent) {
   var count = $('.nav').children().length -1;
   var current = $('.nav li.active');
   current.removeClass('active').next().addClass('active');
   var id = parseInt(current.data('slide-to'));
   if(count == id) {
    $('.nav li').first().addClass('active'); 
   }
  }
  clickEvent = false;
 });
});
 </script>
Code by. Allsources
Design Code is Edited by. M-2010
* If you want to directly copy and paste you canDownload  Single Page Template