Cara Buat Tab Menu Drop Down atau JQuery Tab Menu Accordian

Salam. Harini nak ajar macam mana nak buat tab menu drop down, atau nama komputer nya Jquery tab menu accordian. Okey, segala kod-kod ini aku refer kepada blog MariBinaBlog. Kalau korang rajin explore tutorial Jquery dalam blog ni, memang korang leh dapat segala macam jenis tab menu yang lawa-lawa. Macam professional je blog korang dan tak sarat dengan segala mcam widget. Amboi, macam la blog kau professional sangat. Tab menu ni aku pasang kat bahagian Nokia C3-00 kat side bar aku tepi nih. Okey, jom belajar.

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

2. Tanpa ragu, korang copy segala macam kod di bawah ni di dalam HTML/Java Scripts tadi.

<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">TAJUK 1</h5>
<div class="msg_body">

MASUK KOD KORANG

</div>

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

MASUK KOD KORANG

</div>

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

MASUK KOD KORANG

</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">TAJUK 4</h5>
<div class="msg_body">

MASUK KOD KORANG

</div>

di bawah-bawah nya, atau cut sahaja mengikut kehendak hati korang.

Kalau nak lebih faham, boleh tengok blog MariBinaBlog. Credit to Lionteen for new url code.