Cara Buat Menu Accordion Simpel

Baiklah Master Jin akan kembali lagi untuk update tutorial Blogger terbaru yang sebelumnya Cara Membuat Label Jadi 2 Kolom. Kemudian kali ini Master Jin akan share Cara Buat Menu Accordion Simpel. Contohnya kayak apa sih mas ?? Seperti Blog saya ini. Inilah preview gambarnya :

> Pertahtikanlah tanda panah tersebut. Itulah Menu Accordion (Menu dengan gaya slide).

Tutorialnya :

1. Tata letak > Tambah Gadget

2. Pilih HTML/JavaScript

3. Masukkan Kode dibawah 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/AVvXsEj17znM6VkBwFVTdFsrhbD0tD5jlKeRYHwmfdPfU4H9bJZAErO_RT29RljwpOkc31F7rZxCfaoN4fvV7Qof0rUsL2UU4Pm7vBZB4moawgM4QGT0_OUYddi24suGpc0vZXDN7MF2CgJTl_s/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/AVvXsEhTbx_pTbKzlFWpH301_vjnBtn_3_58dFNpUIVPs28KVdpf1ZDNAUNOL0KxgpBLGxdIerqnWsRDOlVntQ8rzUIWzk8ykIgD2q9tAa_RS7W24xI7w2IEOhS6BAq8D0cB9vUjyGMADEsQ7WA/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. Save

|| Keterangan :

    Title : Judul Menu Accordion
    Isi konten : Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script 
                       iklan maupun script widget)