Memasang kode Sidebar Menu 5Kolom
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/font-awesome/4.6.2/css/font-awesome.min.css'>
 <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style class="Mys2010-styles"> 
body {
  background-color: #7f7f7f;   
}
body {color:#7f7f7f;height:10%;overflow:hidden;}} 
#text {   
 text-align: center; 
 margin-top:-120px;
}
h1 {
 font-weight: 200;
color: #adadad; 
margin-top:-40px;
font-weight: 200;
font-size:30px;
text-shadow: 3px 3px 6px #222;
}
h2 {
  font-weight: 200;
color: #000;
}
h5 {
  font-weight: 200;
color: #000;
}
h6 {
  font-size:23px;
color: #444;
font-family: 'agency fb', cursive;
text-shadow: 3px 3px 6px #222;
box-shadow: 0px 20px 20px 20px rgba(255, 255, 184, 0.2);
}
#sule {
  bottom:84px;
  right: 24px;
}
@media screen and (max-width: 600px) {
  body {
  margin-bottom: 96px;
}}
/*Sidebar*/
body {);color:#f00;height:100%;overflow:hidden;}
  body {
   font: 24px Helvetica;
   background: #808;
   color:#808; 
  }
#main {
   min-height: 100%;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
   flex-flow: row;
   } 
#main > article { 
   margin: 4px;
   height:50%; 
   padding: 5px;
   border: 2px solid #ff0;
   border-radius:17pt; 
   background: #666;
   -webkit-flex: 3 1 60%;
   flex: 3 1 30%;
   -webkit-order: 2;
   order: 2;
   }  
#main > nav {
   margin: 4px;
   padding: 5px;  
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
   flex: 1 6 20%;
   -webkit-order: 1;
   order: 1;
   }  
#main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #000;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
   flex: 1 6 20%;
   -webkit-order: 3;
   order: 3;
   } 
h7 {
  font-size:23px;
color: #000;
font-family: 'agency fb', cursive;
text-shadow: 3px 3px 6px #222;
}
header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   height:5%;
   margin-top:55px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   } 
  /*Sidebar Menu 5 columns */
@media all and (max-width: 640px) 
{  
#main, #page {
  -webkit-flex-flow: column;
  flex-flow: column;
  }
#main > article, #main > nav, 
#main > aside {
 -webkit-order: 0;
 order: 0;
   }  
#main > nav, #main > aside, header, footer {
 min-height: 50px;
 max-height: 50px;
 }}
/*Bingkai*/
body {
  text-align: center;
}
.bingkai {
 width: 347px;
 height: 428px;
 display: inline-block;
 margin-top:23px;
 padding: 40px;
 background: white;
 position: relative; 
/*Bingkai Bg*/
 background: radial-gradient(
  transparent  5px, 
  transparent 0px, 
  #A9A9A9 1px,
  #333 );
/*Bingkai Size*/
 background-size: 200px 200px; 
 background-position: -185px -8px;
}
</style>
<header>
<h7 style="font-size:24px; font-family:agency fb;color:#000;">Mymenu &#9825; Transition </h7>
</header>
<div id='main'>
<article>
<div class="bingkai">
<img class="expando" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxylvPOCXC94IHewykVtxarkmr9CfEZccIgNZlcbcGjQJ0Wpu3-Mh1s-CTcss7rPrR_DNgHIKSXHduVl6Gl5zxlMf0kwWgFvVlkEnxAu86gjZPs1oRZqwXLSUclkj0c2TYrS8TVAZCjdTX/s1600/SidebarMenu-M2010-M2010.jpg" width="440" height="620"> 
</div>
  <br>
   <br>
</article>

<nav>
 <div class="col s6 m3">
  <div class="card hoverable principle">
     <div class="card-image waves-effect waves-block waves-light">
       <img class="activator" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV7R8fyI8R8WuGJMAI4vEludKPu7ZLhdAmkxkKc5lqmvF5NHCj00E5WjY2g_68A56ys3Wb-4anWL2P2g7LdwxoHQSAYwVPU1vatgwOQaqJPlJTAhuXpvvSAEjJeyq4d-67EilP22D32Hf2/s1600/Photo1-M2010.jpg"> 
</div>
   <div class="card-content">
      <h6 style="font-size:24px; font-family:agency fb;color:#000;">&#9825; Transition : 1<h6>
        </div>
           <div class="card-reveal">
<div style="background-color:rgba(255, 255, 0, 0.3);" id="contact-image">
  <br>  
 <h6> 01. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 1 </a>
 <h6> 02. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 2 </a>  
 <h6> 03. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 3 </a> 
 <h6> 04. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 4 </a>
 <h6> 05. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 5 </a>
 <h6> 06. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 6 </a>
 <h6> 07. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 7 </a>
 <br><br>   
 <i class="material-icons right"title="M2010"> tv </i></span></span>
       </div>
     </div> 
   </div>
</div>
</nav>

<nav>
 <div class="col s6 m3">
  <div class="card hoverable principle">
     <div class="card-image waves-effect waves-block waves-light">
       <img class="activator" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOEZ7P77eTDJhjyQ_FKlEsZ86XucqS5dfCBWHYwOo-xbLngknjAupIsTtstnZnfN2bLW1bx9DCTlFXyaEctCay2BQgSzDOVcIW2YCGetIZlhs_cbC78Bcyn-k57uIuGxLHA1pB3KL_Eig_/s1600/Photo3-M2010.jpg"> 
</div>
   <div class="card-content">
      <h6 style="font-size:24px; font-family:agency fb;color:#000;">&#9825; Transition : 2</h6>
        </div>
           <div class="card-reveal">
<div style="background-color:rgba(255, 255, 0, 0.3);" id="contact-image">
  <br>  
 <h6> 01. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 1 </a>
 <h6> 02. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 2 </a>  
 <h6> 03. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 3 </a> 
 <h6> 04. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 4 </a>
 <h6> 05. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 5 </a>
 <h6> 06. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 6 </a>
 <h6> 07. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 7 </a>
 <br><br>   
 <i class="material-icons right"> tv </i></span></span>
       </div>
     </div> 
   </div>
</div>
</nav>

<aside>
<div class="col s6 m3">
  <div class="card hoverable principle">
     <div class="card-image waves-effect waves-block waves-light">
       <img class="activator" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiywEJ2dDaraSw_eRZERM8a1YczK5e0-MdiJSXxlSPevWyFh659Rye_8DGuMHEqq2Q89mHG8lo0NtiZvnCICEXhfwGCHX9hAWo8__WDCaUR1H0LS4ne0RHkTetjZwNE2pSxGBLJEo0xAX6c/s1600/Photo2-M2010.jpg"> 
</div>
   <div class="card-content">
      <h6 style="font-size:24px; font-family:agency fb;color:#000;">&#9825; Transition : 3<h6>
        </div>
           <div class="card-reveal">
<div style="background-color:rgba(255, 255, 0, 0.3);" id="contact-image">
  <br>  
 <h6> 01. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 1 </a>
 <h6> 02. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 2 </a>  
 <h6> 03. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 3 </a> 
 <h6> 04. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 4 </a>
 <h6> 05. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 5 </a>
 <h6> 06. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 6 </a>
 <h6> 07. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 7 </a>
 <br><br>   
 <i class="material-icons right"> tv </i></span></span>
       </div>
     </div> 
   </div>
</div>
</aside>

<aside>
<div class="col s6 m3">
  <div class="card hoverable principle">
     <div class="card-image waves-effect waves-block waves-light">
       <img class="activator" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdvd6O1peUTPD9-pjExksAAvquvB59PJhj1fZJahiWYYwsi1mKLkFg0YC5ajOZr97vBcuSW4Z9YB59ZaQoX0ojLR2rVg18LGWO4UDOF5se2kQ74AUK_NOLjghBSRoQ0Gg0gz-G3vnxBg1F/s1600/Photo4-M2010.jpg"> 
</div>
   <div class="card-content">
      <h6 style="font-size:24px; font-family:agency fb;color:#000;">&#9825; Transition : 4<h6>
        </div>
           <div class="card-reveal">
<div style="background-color:rgba(255, 255, 0, 0.3);" id="contact-image">
  <br>  
 <h6> 01. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 1 </a>
 <h6> 02. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 2 </a>  
 <h6> 03. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 3 </a> 
 <h6> 04. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 4 </a>
 <h6> 05. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 5 </a>
 <h6> 06. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 6 </a>
 <h6> 07. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 7 </a>
 <br><br>   
 <i class="material-icons right"> tv </i></span></span>
       </div>
     </div> 
   </div>
</div>
</aside>
</div>
<footer><h7>Footer</footer>
<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
// shrink the window horizontally to see responsive sexiness.
</script>
<script>
 $(document).ready(function() {
 $("#personal").addClass("animated slideInUp");
 $(".principle").addClass("animated slideInUp");
 $(".work").addClass("animated slideInUp");
 $('.parallax').parallax();
});
$.extend($.scrollTo.defaults, {
     duration: 800,
});
$('#sulepersonal').click(function() {
     $.scrollTo('#head');
});
$('#sulework').click(function() {
     $.scrollTo('#work');
}); 
  </script>
Code by. Allsources
Design Code is Edited by. M-2010
* If you want to directly copy and paste you canDownload  Sidebar Menu 5Kolom