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