Cara Membuat Widget Menu Accordion di Blog

Kali ini saya ingin bagi bagi tutorial tentang menambahkan widget Menu Accordion, mungkin ini cukup mudah saja ya karna tidak perlu mengedit edit lagi dalam di edit HTML, Dan terimakasih kepada blognya Maskolis yang telah mengshare ilmunya dan saya share lagi

Tampilannya yaitu seperti kurang lebih seperti di atas tapi mungkin berwarna abu abu, dan jika ingin membuatnya langsung aja ikuti cara di bawah :

1. Seperti biasa langsung saja buka blog sobat dan login

2. Masuk ke Tata Letak dan Tambahkan gadget, copy paste kode di bawah ini

<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/AVvXsEj5uTUkv_nKS9awPmfo89q1cOMj7TLY4DVW5iJJkOcnStnvMs5ap86nKPJoAFkst7DmQhQp2vHGadIkYIjlYRiKbPbVdXWaCguAaHTfqOQK0ri7v4Vgtoh81irtMn96KztnrsuDxob2Maw/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/AVvXsEjFSpO5pCU4ANVNoFjNLb-MYTsuFy6TrpOvUo4RRUSpaBc0KkkqA-XULyKswec2KgZD1QhVajU9SXMr7FnESpfZVTJsNq4st7oTFg7d7pdUs0WOt-Lacir3-sw4vu_fhKubZ0u342nGG7k/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>

*Note : Isi Konten 1 sampai 5 Di ganti konten sobat

3. Tiggal di save dan taruh di mana saja yang sobat suka

Mungkin jika sobat kesulitan bisa tanya atau konsultasi ke dokter  terdekat
dan Gunakan kotak komentar di bawah ini untuk bertanya