TUTORIAL : ACCORDIAN TABS MENU

tutorial ini khas untuk sahabat saya MIERIL dan FYY..sory tak dapat ajar petang tadi sebab tak balik kerja lagi..hehe

accordian tabs menu ini dapat menjimatkan ruangan di bahagian sidebar korang

caranya

1. log in blog > design > page elements > add a gadget > HTML/Javascript

2. korang copy dan pastekan code dibawah ini diruangan HTML/Javascript

<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:#FA5858;
margin:1px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.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">TITLE 1</h5>
<div class="msg_body">
CODE KORANG
</div>
<h5 class="msg_head">TITLE 2</h5>
<div class="msg_body">
CODE KORANG
</div>
</div>

- tulisan warna hijau yang diboldkan itu korang tukar kewarna pilihan korang sendiri ok? nak pilih warna boleh pilih disini HTML COLOR CODES

- tulisan warna merah yang diboldkan itu korang tukar ke code korang..contoh code shoutmix korang copy dan pastekan ke bahagian 'code korang disini' dan code-code lain macam tu juga.

- tulisan warna kuning yang diboldkan itu korang tukar title korang sendiri. Maybe korang nak letak shoutmix atau recent comment dan sebagainya.