Cara Membuat Menu Accordion Tanpa Edit HTML

Asalamuallaikum, apa kabar kawan, semoga sehat selalu. kali ini, kali iniii kenapa selalunya pakai kali yah, kenapa ga sesekali pakai bagi. eeh maaf bercanda hehehhe. ya kali ini saya akan membagikan cara untuk membuat menu accordion. belum maksud apa itu menu accordion menu accordion adalah widget yang membuat menu blog kita menjadi seperti accordion, ya accordion, menu ini dapat melipat atau mengkerut menjadi lebih ringkas. dulu saya mencari-cari caranya dan belum ketemu hasil, sesudah ketemu tetapi saya gak mudeng. Akhirnya saya menemukan accordion menu yang lebih sederhana di blognya maskolis, saya ucapkan terima kasih kepada maskolis. tidak perlu masuk ke Edit HTML, tinggal masuk ke layout kemudian pilih HTML/Javascript, letakkan kodenya disitu....  sudah jadi menu accordionnya. di bawah ini adalah screenshootnya.

Salah satu fungsi dari accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tabber atau tab view, jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah agak lama, saya hanya memperbaharui tampilan menunya saja. Anda bisa letakkan menu accordion ini pada sidebar blog. Bagi teman-teman yang mau mencoba, berikut ini cara membuatnya (wah bahasanya jadul banget ya) :

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) :

3. <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/AVvXsEgZlU4yuGDZTLDif-mkA1wVpRXisKcXg3Kqi5RKD_X3BiGXZgjmXRPFdVx7xqlRJAfCwwK4bboNLXPIypJNia0UYlcmrp2mDK9YfXGy_6igT2ZjzJpe9h6AR6c-gavM2BUNwxLlfJh3Ub4/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/AVvXsEi48BhcLwOK-BPEiuRxqGJKb13pteeXBUvyJKujSfCzLNB19wowpBEQqojZ58haiVKqaH3wqME3pUURfUiA2X-pntwlEI8OuFT3__wQzMpBecnYM-inlnG1jASCu75WhbVjGdWIPSrHRgE/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

Demo Accordion Menu Light

Keterangan :

• Title : Judul heading menu accordion 
• Isi konten : Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget)

Menu accordion diatas untuk blog yang mempunyai background warna terang. Bagi Anda yang mempunyai blog warna gelap atau hitam, tinggal diganti kode css-nya,. Lebih lengkapnya seperti kode di bawah ini :

 bawah ini :

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4WVFziBjOkf8gtU2HzqiMeONAYHOFcOq6v89FYn-LStlAw5cTO24J8c-7HygB0RACOQYwNbUbkn1K__-5hIfdwynOUg7hJmGee3rivpu4_PpwCTl-Ks4aiYpTrYM8Y0mI4GMp26RXu8w/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAKLKgTFqJXNImse2n6oN3lGfWmTpEADS8FV_1KpWcbIcak3-3lkgjXg_YOLzG_HCHRgYTq4qWgrd9pzpWYaYLGWV9JdxAG8SFpbtVlMGssUCHr9mD8UyRmNjPwhdIy1c05kllZvsgZfc/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </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>

Demo Accordion Menu Dark

Bagi yang ingin menyimpan javascript menu accordion silahkan download link dibawah :

Download Javascript Accordion Menu

Demikian tutorial singkat membuat menu accordion kali ini, dan semoga dapat bermanfaat. selamat mencoba menu accordion-nya dengan tutorial ini.

sumber : creating website