Cara membuat tab menu JQuery Accordian

Cara membuat menu tab drop down

Ada bermacam-macam menu yang bisa kita pakai untuk menghias blog kita. nah kali ini kita bahan bagaiman cara membut tab menu drop down atau tan menu JQuery Accordian

Langsung aja Login ke akun kita

1. Masuk Dashboard --> Design --> Page Elements --> Add a Gadget --> Pilih HTML/ Java Scripts.

2. Lalu copy kode-kode di bawah ini ke dalam HTML/Java Script

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FF6699;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>

<div class="msg_list" id="secondpane">
<h5 class="msg_head">MENU 1</h5>
<div class="msg_body">

MASUKAN KODE KAMU

</div>

<h5 class="msg_head">MENU 2</h5>
<div class="msg_body">

MASUKAN KODE KAMU

</div>

<h5 class="msg_head">MENU 3</h5>
<div class="msg_body">

MASUKAN KODE KAMU

</div>
</div>

3. Masukkan kod Popular Posts, Recent Comment,Recent Post,Shout box, Formspring box dan macam-macam di bahagian MASUK KOD KORANG. Tajuk boleh letak di TAJUK 1, 2 dan 3.

4. Untuk kod warna #ffffff adalah warna bagi tajuk,

#FF6699 adalah warna background title box yang macam aku punya kat Nokia C3-00 tu,

#FFFFFF adalah background accordian box iaitu background tempat shoutbox dan lain-lain tu.

Korang boleh pilih warna kat SINI.

5. Save. Dah siap.
6. Opss, kalau korang nak banyak atau sikit tab menu tu, just copy je ,

<h5 class="msg_head">MENU 5</h5>
<div class="msg_body">

MASUKAN KODE KAMU

</div>

Selamat mencoba ya.......