Tutorial Side Bar Hide & Seek

Salam...

Hai korang. Korang apa khabar?? Wana sihat sihat jek. Dah terlebih sihat kot. 27 HB ni Wana dah tak ada kat rumah sebab nak jalankan tanggungjawab Wana sebagai student *Aiceceeh !! Nyampah aku dengo* OK lah. Wana buat tutorial ni sebenarnya nak tunaikan hasrat Apai :) and Wana nak share kat korang sekali. Bak kata pepatah,  Sharing is Caring an?? hehe

U are welcome Apai :) Ahak :D

OK. Kalau korang still confius , korang cuba letakkan cursor kat ShoutBox Wana. ShoutBox tu tetiba boleh Hide and Seek an?? Nama bombastic benda alah ni Jquery Tab Menu According. Camne boley dapat nama cam gitu , tu Wana tak berapa nak tau hehe Korang boleh je tanya En. Google. Gerenti dia boleh jawab. Ahak :D Uiiih!! Pembuka kata panjang betul. Sori ye korang sebab tunggu lama sangat hehe

1. Cam biasa , korang bukak Dashboard >>> Design >>> Add gadget>>> HTML/Javascript.
2. Pastu , korang Copy kod kat bawah ni then Paste dalam kotak 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:#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.
<h5 class="msg_head">Tajuk 3</h5><div class="msg_body">
Masukkan kod disini.
</div></div>

Tulisan yang warna Orange tu , korang boleh ubah warna ikut cita rasa korang

Tittle Fon : #ffffff

Background Tittle Box : #F80680

Background Accordian Box : #F4F4F8

Tajuk 1 , 2 , 3 tulis je apa yang korang suka. [ Chit Chat Box/ Hot Commenters etc ]

Masukkan Kod Di Sini korang punya kod widget ShoutBox / Top Commenters / Top Post  etc.

   3.  Klik Save.

Ok. Tu saja tutorial Wana yang tak seberapa ni :) Kalau ada pertanyaan , korang boleh tinggalkan komen korang dekat comment box. Jumpa lagi di lain post. Tata !! :)