Accordian Tab Menu

Accordian tab menu tu apa pulak. Ok, tak pa..mai sini nak tunjuk..dalam blog ni tak ada sbb Aishah rasa tak ada apa yang perlu dibuat sedemikian... Kalau nak tengok contoh cuba tengok bawah ni

 diambil dr google images

Kalau tekan salah satu daripada owner, facebook  atau banner tu dia akan ke bawah. Ini supaya tak da la sidebar kita nanti panjang berjela.

Step nya ialah

1. Dashboard > Design > Add a Gadget > HTML/JavaScript.

2. Copy kod ni dan paste pada ruangan 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:#FFB6D6;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">Tajuk 1</h5><div class="msg_body"><center>Kod untuk tajuk 1</div><h5 class="msg_head">Tajuk 2</h5><div class="msg_body">Kod  untuk tajuk 2</div><h5 class="msg_head">Tajuk 3</h5><div class="msg_body">Kod untuk tajuk 3</div></div>

3. Save


* yg Oren tu : warna tulisan untuk tajuk

* yg Biru tu : untuk background tajuk accordian tab menu

* yg purple tua tu : untuk background ISI tab menu tu ... kalau nak transparent , tak payah tulis kod warna ..just tulis transparent.

* yg merah tu : Tajuk Tab tu ok.

* yg purple muda tu : untuk kod bagi setiap apa yg nak dipaparkan .. Contohnya untuk tab 1 tu nak letakkan shoutbox..so, letak kod shoutbox la...