~ tutorial : tab menu drop down...

sebelum masuk tajuk ni,dila nak ucap terima kasih banyak2 yang mendoakan dila cepat sembuh..sekarang Alhamdulillah dah kurang sakit..tapi still tak boleh berjalan banyak lagi..insyaAllah akan dicek secepat mungkin :)

dan hari tu juga someone tanya dila camne nak buat tab menu drop down tu..tahu yang mana??bukan yang atas tu..tapi yang kat tepi sebelah kanan..kotak warna pink tu..bila cursor sentuh je kotak tu,akan keluar la maklumat seperti yang tertera atas kotak tu..tengok gambar bawah ni..
:
:
:

senang je cara dia..xperlu edit html bagai..just..

1) buka dashboard-->design-->page element-->add gadget-->pilih html/java script

2 ) copy kod bawah ni dan paste dalam html/java script tu ye..tapi sebelum tu edit dulu kod warna dan tajuk..

<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 ) #ffffff adalah warna bagi tajuk, #FF6699 adalah warna background title box , #FFFFFF adalah background accordian box iaitu background tempat shoutbox dan lain-lain tu..

- kod warna boleh ambik kat SINI

5 ) kalau nak buat banyak lagi tajuk..just tambah kod kat bawah ni dan paste bawah kod tadi ye..kalau nak kurangkan, cut je kod kat atas tu..( if nak 2 je menu,cut kod yang ada perkataan "tajuk 3") ada faham??huhu

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

MASUK KOD KORANG

</div>

** first time buat tutorial..xreti bab2 ajor ni..huhu..lagi satu..sorry kalau serabut..xboleh buat petak blocquote tu..tak tahu la kenapa..puas ku godek2 blog ni =_= ..kredit tu blogger ni..**

Salam Sayang...