Saturday, December 25, 2010

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 !! :)






3 kritikan & pendapat:

Hafizuddin Jasmi said...

first of all,teharu seh org tu buat post..hehehe.thanks byk2!!

cume nak tye,kalau shoutbox punye komen tu snang kot nk tgk..
tp kalau cam top comentator..archive..kod nak crik kat mane ek??

kt html tu gak ke?ad jln senang tak??ak da buntu gile ni carik ni,..

wAnA said...

Its ok. Most welcome... :)

Top commentator , top post, recent post ade kodnye t'sndiri. Law nak kod top commentator cuba pergi kt link ni
http://tutorialuntukblog.blogspot.com/2010/08/top-commentor-widget.html

Law kod tuk archive, sy xbrape psti samada Ada ataupon tak :D

wAnA said...

sori..
link tutorial tuk top cmmentator yg 1st tu kurg berkesn.

cube pergi kat link ni k http://maribinablog.blogspot.com/2009/08/membina-widget-top-commenters.html