cara-cara nak buat widget jadi slide di sidebar

Assalamualaikum dan salam sejahtera kepada pemabca sekalian,Petang ni aerol nak buat satu tutorial boek punya,mungkin tutorial ni dah ramai yang mengetahui,tapi apa salahnya kan kita tunjukkan kepada yang belum tahu ,yelaa ada ilmu jangan kedekut :) ..sharing is loving right..hehe tak usah lr stingy sangat,.. :)..okeyh mari kita mulakan tutorial dengan muka yang tersenyum :) tenyum2. .. :D

Langkah2 wajib yang anda perlu lakukan :),pergi ke design/page elemant/add a gadjet dan paste code ni pada html javascript..pada yang newbie,kalau tak faham jugak,boleh inform aerol di fb..cilck here ,sebb aerol malas nak tunjuk yang temeh remeh ni hehehe.

<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:#000000;
margin:1px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.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">Tajuk 1</h5>
<div class="msg_body">
letak lar apa2 1</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
letak lr apa2 2</div>
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
letak lr apa2 3</div>
</div>

Okeyh,Sebelum tu aerol nak bagi penerangan pada perkataan yang telah diwarnakan tu,perkataan yang bewarna hijau tu adalah warna kepala tajuk widget korang,korang boleh ubah ikut warna kesukaan dengan menukar kord tu dengan warna kesukaan korang,click sini untuk ambil kord warna html.

Pada nombor yang bewarna merah tu adalah angka untuk menetu kan border korang,kalau korang nak kasi dia melengkung korang boleh tukar kepada 10px atau lebih,bergantung lr pada cita rasa korang,kalau aerol,aerol suka lengkung2 sikit :D..

Tulisan yang bewarna purple tu tajuk widget korang,manakala yang bewarna biru tu pula adalah tempat letak code2 widget atau perkataan korang :).