BlogKepo-Kali ini saya akan memberikan tutorial membuat menu accordion yang saya pasang pada template Johny Simple Magazine 2 dan Johny Magazine 2 tanpa harus masuk ke Edit HTML. Awalnya kedua template tersebut menggunakan simple accordion dari dezinerfolio, belakangan ini tidak berfungsi. Sampai sekarang saya tidak tahu kenapa, padahal semua javascriptnya sudah saya ganti dengan yang baru. Akhirnya saya menemukan accordion menu yang lebih sederhana, tidak perlu masuk ke Edit HTML, tinggal masuk ke layout kemudian pilih HTML/Javascript, letakkan kodenya disitu....  sudah jadi menu accordionnya.

1. Login ke Blogger dengan akun Anda
2. Masuk ke Layout, pilih HTML/Javascript
3. Kemudian masukkan kode berikut ini ke dalamnya (kek bikin masakan aja) :
   <style type="text/css">
   #accordion{width:100%;margin:auto;border:0px solid white}
   #accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-dkJ3mUkMNppqBoR2VkOQuZ_5ZaRGHMVrbC2wkQY3cflExgayixUopiiXPajF2Wdo7__f5_dnJpzdvPgYAa1CGlfCWJ0TzTkP4M_gboco0nSq2521dLu7LeN0mwGppjYy-78c7T02Bzo/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
   #accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
   #accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
   #accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
   #accordion .content li a:hover {text-decoration:none;color:#000;}
   #accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4a_RnWwB8Xl2PMZlrWlyneomwp-3ExNC5Z1ikPMZsqWQPLBbMEFkVkBL_lI7MHNfPCBWLe09qa-fyKDrvGDPjV3ZZrA04QQcD2OjqFPuW9Xd4gPkwqcNbga63ySbAG17Exu2M25nKf4Q/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
   </style>
   <script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
   <script type='text/javascript'>
   $(function() {
   $('#accordion .content').hide();
   $('#accordion h2:first').addClass('active').next().slideDown('slow');
   $('#accordion h2').click(function() {
   if($(this).next().is(':hidden')) {
   $('#accordion h2').removeClass('active').next().slideUp('slow');
   $(this).toggleClass('active').next().slideDown('slow');
   }
   });
   });
   </script>
   <div id="accordion">
   <h2>Title 1</h2>
   <div class="content">
   Isi konten 1
   </div>
   <div id="accordion">
   <h2>Title 2</h2>
   <div class="content">
   Isi konten 2
   </div>
   <div id="accordion">
   <h2>Title 3</h2>
   <div class="content">
   Isi konten 3
   </div>
   <div id="accordion">
   <h2>Title 4</h2>
   <div class="content">
   Isi konten 4
   </div>
   <div id="accordion">
   <h2>Title 5</h2>
   <div class="content">
   Isi konten 5
   </div>
   </div></div></div></div></div>
4. Terakhir Save, lihat hasilnya