Jquery Tab Menu Accordion Version 2

   
Awwwww so shuweeeeeet 

Assalamualaikum readers, stalkers and aliens maybe? Uhm harini aku nak buat tutorial Jquery Tab Menu Accordion. Okay, bapak panjang nama dia. Memandangkan ramai orang tanye macamane nak buatdie, so kitetakleh kedekut ilmu right? Hihi, Kalau nak buat ni kene tengok betulbetul. Kalau takjadi jangan salahkan gua eh. Muahaha, :D Lets start with Bismillahrrahmanirrahim~ Penting tuh.. :)

1.Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

2.Copy dan paste kod di bawah pada content 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:#F80680;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#000000;
}
</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">

Letak code disini.

</div>

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

Letak code disini.

</div>
</div>

MUST READ

-Untuk ubah warna background title box, title font dan background accordion box, sila edit code yang di bold dengan warna biru. 

-color: #ffffff;  ( title font )

-background-color:#F80680; ( background title box )

-background-color:#F4F4F8; ( background accordion box ) 

-Korang boleh masukkan widget macam Shout box,Top Post,Recent Post, Recent Comment, Top Commentator and apeapeaje, gantikan code 'Masukkan kod disini.' dengan code widget yang korang nak. 

-Edit text Title 1 and Title 2,dengan title yang yang korang nak contoh About Me or Shoutmix.

Kalau nak tukar colour, pegi >SINI< .Last skali save. YEAA aku tau memang pening nak buat ni. Sebab tulah perlukan kesabaran. Goodluck okay. :) Sape yang amek tutorial ni, sedekahkan lah saye se-comment , and Lastly.. Dont Be A CopyCat!

(codes from maribinablog )