This Is My Way: Tutorial : Membuat Tab Menu Slide

Assalamualaikum

Hye3..sekarang apple mau ajar cara mau buat tab menu slide yang ada macam di blog apple ni..macam gambar bawah niiii haaaa

(ni la tab menu slide tuu)

Mau lihat yang REAL :s:

Boleh la tengok kat blog apple yang ni..

http://applepearlhaira.blogspot.com/

Nampak sudah???mari kita mulakan misi kita..wkikiki

STEP 1 : dashboard > design > Page Elements > Add Gatget HTML

STEP 2 : copy code di bawah ni dan pastekan di kotak GADGET HTML td

<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:#F80680;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</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">Tajuk 1</h5>
<div class="msg_body">

Masukkan kod disini

</div>

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

Masukkan kod disini

</div>

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

Masukkan kod disini

</div>
</div>