Tutorial : Accordian Tab Manu

Gadis Kidal Berceloteh...

.Assalamualaikum ! :)

Hi , Lama nyer , rasa tak buat tutorial ni .

Ok , kali ini , Lyssa nak ajar , macam mana nak buat ..

Accordian Tab Menu ..
Bagi , new bloggers . pasti korang tak tahu kan , apa itu 
"Accordian Tab Menu"..

Ok , Cuba Lihat kat bawah ni ..

Bila cursor sentuh yang ini ;

 

Automatik dia akan keluar macam ini ;

 

Orait ! Nak tahu tak , macam mana nak buat ni ?
Ikot step di bawah ..

1. Dashboard > Design > Add Html > Html/Javascript

2. Copy , and paste kod bi bawah ini di ruangan 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>
Isi dalam tajuk 1</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
Isi dalam tajuk 2
</div>
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
Isi dalam tajuk 3</div>
</div> 

Nota kaki :
. Warna hijau , untuk tulisan Tab Manu
. Warna oren , untuk background Tab Menu
. Warna biru , untuk background isi tab menu
. Warna pink , korang tulis tajuk Tab itu
. Warna merah , korang paste kan kod korang . (e.g : kod shoutmix , kod about me , dll)

 
KONGSIKAN ARTIKEL INI..
Previous
Next Post »

117 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
yaya dluver
AUTHOR
May 8, 2011 at 5:58 PM delete

kak lyssa x paham yg Warna merah , korang paste kan kod korang . (e.g : kod shoutmix , kod about me , dll)

avatar
zu hairah
AUTHOR
May 8, 2011 at 6:09 PM delete

wahh org prtme ! tnx kak lyssa jd :)

avatar
May 8, 2011 at 6:13 PM delete

@yaya dluver

ohh . kalau yang itu , type je isi2 kandungan apa yang nak tulis . ok /??

ataupun , boleh letak kod-kod apa2 pun tk per;)

avatar
Eiyka Yusof
AUTHOR
May 8, 2011 at 7:44 PM delete

dah lame cari tuto nehh . tanya sys ,, tak reply uwn , btw nk try . :)

avatar
May 9, 2011 at 12:12 AM delete

ta faham la lyssa .kod ape eh ?

avatar
May 9, 2011 at 12:17 AM delete

lyssa . kalo saya na letak pic kat dalam tu lak macam mane eh ?

avatar
dieya darla
AUTHOR
May 9, 2011 at 1:44 AM delete

awak , saia dah buad tapy kenapa saia punye toh ta jady mcm awk . means awk punye ip cursor letak kat c2 den dye kua en tapy saia ta jady . help m lahh :( kalo ta phm apa yg saia ckp neyh tgk tat belog saia jady cena eyhh . tq .

avatar
miss.neeya
AUTHOR
May 9, 2011 at 2:38 AM delete

suka tuto ni..da bt..tq tau.. :)

avatar
Cik Fatyen
AUTHOR
May 9, 2011 at 12:13 PM delete

lysaa..dah try uat n jadi...thank for tuto..

avatar
fitrah
AUTHOR
May 9, 2011 at 4:22 PM delete

tnkss kak.jadik yeay <3

avatar
fitrah
AUTHOR
May 9, 2011 at 4:22 PM delete

tnkss kak.jadik yeay <3

avatar
una ped0ra
AUTHOR
May 10, 2011 at 3:21 PM delete

lau nk tmbah 4 bole x kak ?

avatar
May 10, 2011 at 10:36 PM delete

hye kak lyssa...eRm..napEr x mnJadik kak?brape kali dh try..ttp x de ape2....sdihnye....

avatar
May 10, 2011 at 10:36 PM delete

x mnjadik la kak lyssa..sdihnyer....

avatar
FuFu
AUTHOR
May 11, 2011 at 6:07 PM delete

kak lysa background Tab Menu tu utk ape ?

avatar
Ena_eryna
AUTHOR
May 11, 2011 at 6:46 PM delete

dah jadi! thxx akak! ^_~

avatar
Ena_eryna
AUTHOR
May 11, 2011 at 6:47 PM delete

dah jadi la akak! thxx yaw! :)

avatar
mierul
AUTHOR
May 12, 2011 at 2:08 PM delete

cmne nk tngok kod tu??

avatar
yaya dluver
AUTHOR
May 14, 2011 at 1:06 PM delete

@Lyssa Dollixious

kak lyssa ,!!!!!!!!!!!!!!! SayS: congrates MImi
sbb menjadi !!!!!!!!!!!!!!!!!!!!!! tenz buat tuto ni hehehehehhe , suke nihhhhhh !

avatar
Xochitl Ayuuz
AUTHOR
May 14, 2011 at 5:09 PM delete

Bagaimana cara bikin accordian tab menu lebih dari 3?
Maaf saya tak bisa bahasa malaysia.

Help me

avatar
Miss Euoni
AUTHOR
May 14, 2011 at 8:42 PM delete

lyssa .. help me ..
Oni buat yg kat 2 side .. kiri menjadi .. tp yg kat kanan x jadi ler .. xnak open .. help me plizz ...

avatar
Nanie Eeteuk
AUTHOR
May 15, 2011 at 12:04 AM delete

Thankx!Dah jadi pun!!Thankx banyk!!

avatar
May 15, 2011 at 5:32 PM delete This comment has been removed by the author.
avatar
May 17, 2011 at 12:30 PM delete

tau tak lyssa?? TERIMA KASIH sangat sangat!!!! hahahaha

avatar
Lissa.
AUTHOR
May 18, 2011 at 4:22 PM delete

Tak jadik pun kak lyssa .

avatar
nadya
AUTHOR
May 19, 2011 at 8:29 AM delete

kak lyssa . thnxs yaww . sudahh mnjady !

avatar
May 19, 2011 at 9:08 AM delete

dh jdi dh pon...
thnks yew akk lyssa!!
cyunk akk lyssa!

avatar
* Zaleta *
AUTHOR
May 20, 2011 at 3:18 PM delete

dah jadik ...tq lyssa syg...

avatar
May 20, 2011 at 3:46 PM delete

lysa , boleh tak tlong buwad kt yg ini kt blog sye .please..sye x reti buwad laa..

avatar
aina syaza
AUTHOR
May 21, 2011 at 2:55 PM delete

salam ,hehe ..
tumpanh tnyer kak ,
mcm mner nk dptkan code dy tuhh ~
tak jdi pown .. huhu

avatar
Byla
AUTHOR
May 25, 2011 at 8:46 AM delete

kod facebook kat mne?

avatar
Misz Anne
AUTHOR
May 26, 2011 at 6:41 PM delete

sis lyssa, tapahamm laa , kod tue cena ?

avatar
Nurul Aina
AUTHOR
May 27, 2011 at 7:15 PM delete

wah , kak lysa ! thank youuuuu (:

avatar
May 28, 2011 at 1:02 PM delete

salam . k. lyssa sy punye suda jd da . tp yg pliknyer npe die xkua gmba , py die kua url gmba uh . npe erk? and cmna nk cari kod gmba kt fb ?

avatar
Ummi syafiqah
AUTHOR
May 29, 2011 at 11:44 AM delete

aiyark... tak menjadu la...
:(

avatar
Hunnyawny
AUTHOR
May 29, 2011 at 6:19 PM delete

babe . kenapa i punya tak jadi haa ? haihh

avatar
May 30, 2011 at 1:45 PM delete

kak lyssa . npe ta menjadi ? sye da buat byk kali but still ta menjadi . die ta tetutup pon . tebukak jewh . help me please ~
lau kak lyssa ta fhm . tlong la tengok blog saye ~

avatar
aween♥
AUTHOR
May 30, 2011 at 2:11 PM delete

kak lyssa .. aween punye tak jadi .. dye da sedia terbukak . dye ta tetutop pon .. tgx eyh --> http://storymorybooks.blogspot.com/
tolong kak lyssa ):

avatar
May 31, 2011 at 8:05 AM delete

Cik Lisa , nape dia tak slide ke bawah pun ??? dia dah tersedia pun ternganga .. camne tuhh ???

avatar
May 31, 2011 at 9:17 AM delete

@anieysayangkamoo

make sure ikut step dengan btul . jgn tertinggal satu pun benda yang kena copy...

avatar
twice2pink
AUTHOR
June 2, 2011 at 1:41 PM delete

akak , ta jd un .. pic ta ley ltk ke ?

avatar
June 2, 2011 at 11:28 PM delete

Akak , kite buad .. mmg dh jatuh . kalau cursor tk pegi kt situ pun mmg jatuh . cemana kak ?

avatar
Sieha
AUTHOR
June 4, 2011 at 1:18 AM delete

akq,mane nk dptkod2 uh?? =='

avatar
Dieja
AUTHOR
June 4, 2011 at 6:58 PM delete

thAnx 4 de tuto :)

avatar
azreen sofia
AUTHOR
June 5, 2011 at 2:30 PM delete This comment has been removed by the author.
avatar
Miea
AUTHOR
June 8, 2011 at 12:06 PM delete

hye kaq,npe mia try wat tp die x jtoh??die tros kuar

avatar
najwasyamimi
AUTHOR
June 11, 2011 at 2:05 PM delete

Kak lyssa, kalau kite nak ambek kod gambar, kat mana? tk jumpe pun

avatar
June 16, 2011 at 11:31 AM delete

jadi! thanks lyssa :)
cuppy da letak banner lyssa kat blog cuppy :)

avatar
June 18, 2011 at 9:05 AM delete

lysa .. kod pe tuh ?
help me please ..
nie dh kli ketiga try nie .
x dpt :(

avatar
dyrahbebe ♥
AUTHOR
June 19, 2011 at 2:20 PM delete

salam kak lyssa :]
juz nak tanya , kalau nak letak pix camne ? mcam kak lyssa punya :]
hihi

avatar
rainbow
AUTHOR
June 19, 2011 at 4:14 PM delete

thanks kak lyssa da jadi daa .. haha , syg akak =)

avatar
-chillex guy-
AUTHOR
June 30, 2011 at 3:33 PM delete

kAK,,cm ne nk wt mouse arow jd mcm tulisan ker,,ape kew,,..tolong ifa sgd2!!email me at

avatar
Fina Fathini
AUTHOR
July 1, 2011 at 7:36 PM delete

akak, nak cakap jadi, x jadi
nak cakap x jadi, sye sendiri pown x tau

avatar
hazwaniey
AUTHOR
July 21, 2011 at 5:03 PM delete

kod about me tu , nk ambil mne ?

avatar
July 22, 2011 at 4:02 PM delete

lyssa , da bt lh tapi asal xjdik y mcm lyssa ckp tuh . dia tbuka jak mcm tuh .

avatar
July 29, 2011 at 5:43 PM delete

assalamualaikum.... lyssa fara tk dpt bt la perning dh kepala....

avatar
aina
AUTHOR
August 1, 2011 at 9:07 AM delete

akak , aina buat kan , jadi tp kenape die x jatuh mcm akak ckp tu .

avatar
August 7, 2011 at 4:24 PM delete

Akak , macam mana nak tauk gambar kat dalam tuh ?

avatar
August 7, 2011 at 4:42 PM delete

Akak , kenapa kita buad jadii , tapi dia tak turun macam akak cakap tuhh ?

avatar
Lissa BOO
AUTHOR
August 10, 2011 at 10:29 PM delete This comment has been removed by the author.
avatar
Intan Nadila
AUTHOR
August 14, 2011 at 3:26 PM delete

Tak menjadi , tak de pon kuar :(

avatar
August 19, 2011 at 1:55 AM delete

jdi la lysa..thnx for your tuto

avatar
Fara @ Ain
AUTHOR
September 3, 2011 at 12:30 PM delete

kak lyssa , jadi tu jadi . tp tab dy da trbuka da . ta pyh ltak cursor . dy tros trbuka .

avatar
ツ Syida ツ
AUTHOR
September 16, 2011 at 3:26 PM delete

Dye jadi tapi dah memang terbukak ! cam ner eh ? huhuh !

avatar
September 17, 2011 at 10:00 AM delete

jadi tapi kenapa jadi dua??
tapi saya buat satu jerppp...
emm....kiranya tak jadi...

avatar
September 17, 2011 at 10:00 AM delete

jadi tapi kenapa jadi dua??
tapi saya buat satu jerppp...
emm....kiranya tak jadi...

avatar
September 17, 2011 at 10:00 AM delete

jadi tapi kenapa jadi dua??
tapi saya buat satu jerppp...
emm....kiranya tak jadi...

avatar
eyqafieqa
AUTHOR
October 13, 2011 at 11:38 AM delete

Kak Lyssa , Macam mana nak letak gambar yea ? S

avatar
zaey
AUTHOR
October 22, 2011 at 3:24 PM delete

assalamualaikum : kak lyssa . dah bt tp x jd , x bgerak pn . cmna tuh ? mgkn yg psl kod tuh *yg wrna merah tuh . huhuhu .

avatar
Fatin Nazifah
AUTHOR
November 12, 2011 at 5:37 PM delete

yeahhh dah jadi ! thankyou kaklyssa

avatar
eny
AUTHOR
November 13, 2011 at 2:23 AM delete

dear lysa,taa jd laa buadd yangg nie.how?thn mcm mnee if naa letak gmba kat dlm tuhh,taa phm laa.help pleasee :)

avatar
Alya
AUTHOR
November 24, 2011 at 3:30 PM delete

Kak Lyssa, nak cari kod warna kat mana ?

avatar
merlissa
AUTHOR
November 28, 2011 at 4:46 PM delete

jadi tapi.....xhide pon ..terpampar mcm 2 je

avatar
December 13, 2011 at 7:59 AM delete

ermm nk tny cmne nk buat klu nk letak followers ehk ? hrp boleh tolong :D

avatar
nurizsara
AUTHOR
December 13, 2011 at 8:07 AM delete

Kak lyssa kod 2 ap?Camna nak cari?

avatar
Ayfa Mia
AUTHOR
December 18, 2011 at 9:25 PM delete

thanks 4 all tuto lyssa..
byk yg menjadi kecuali accordian tab ni...isk...hehe

avatar
Nadia Aimy
AUTHOR
December 22, 2011 at 7:48 PM delete

Akak takjadik lahh . Cube akak tengok nie .
http://aimytheawesome.blogspot.com/

avatar
lia Liyana
AUTHOR
December 25, 2011 at 3:52 AM delete

thnkzzzz kak lysa ..
kak lysa mmg terbaik

avatar
Intan
AUTHOR
December 31, 2011 at 3:27 PM delete

kak , napa masa sya buat , cursor tak sentuh pon.. tapi dia dah keluar... napa jadi camtu ?

avatar
Cik Montel
AUTHOR
January 6, 2012 at 12:34 PM delete

xjadi laaa... nape ???????

avatar
pupujerr
AUTHOR
January 18, 2012 at 7:57 PM delete

akhirnyee jdy pums. tengs lyssa ;)

avatar
January 19, 2012 at 9:34 PM delete

akk , yana buat tak jadi .. dia terbuka .. btw , nak amek k0d 2 mcm mne ? agk pening sket ..

avatar
maria azmie
AUTHOR
January 23, 2012 at 3:49 AM delete

MENJADII KAK LYSSA . THANKK ^^

avatar
episz
AUTHOR
January 23, 2012 at 2:08 PM delete

lyssa,mne nk amek kod2 utk about me dan sbg nyew 2

avatar
eiya
AUTHOR
February 18, 2012 at 2:28 PM delete

thx f0r tut0 .. try buat ..

avatar
February 21, 2012 at 5:25 PM delete

tk pham laa kak lisa ! code kt mne nak copy ??? i don't know~

avatar
February 29, 2012 at 8:57 AM delete

huhu..thnks k.lyssa..tp kalau nk ltak gmbar cam k.lyssa punye 2 mcm mane ?

avatar
♥Arin Anis
AUTHOR
March 29, 2012 at 9:48 PM delete

mne nk dpt kod about me ea kak lyssa ? :(

avatar
April 11, 2012 at 7:09 PM delete

akak lyssa . kenape die tak tutup .. seriously tak paham ?

avatar
Honey Dew
AUTHOR
April 25, 2012 at 2:36 PM delete

pernah buat tapi jadik untuk tiga je. kalau nak buat lebih tak jadi.

avatar
April 30, 2012 at 10:43 PM delete

besh tuto ni.. lain kali akak tolong bwadkn tuto yg besh2 taw.. sbb sume tuto akak terbaek... : BLOG WAWA!

avatar
July 21, 2012 at 6:38 AM delete

cmne nak wat accordian tab menu ni kat tepi (mcm fly to top) erk kakak lisa yang comel?? =)

avatar
October 19, 2012 at 11:39 PM delete

@yaya dluverMacam mana nak cati design dekat dashboard baru?

avatar
October 19, 2012 at 11:40 PM delete

Macam maca nak cari design dekat dashboard baru?

avatar
devia christa
AUTHOR
May 30, 2013 at 3:22 PM delete

Greattt :D Like your blog

avatar
June 6, 2013 at 7:29 PM delete

Salam Kak.... tab menu ni boleh letak gmbar tak?? If can, may u creat kan???
Please n thank u
BTW... Love U'r blog!! it's D'BOMB!!

avatar
Anonymous
AUTHOR
October 12, 2013 at 5:44 PM delete

Alhamdulillah .menjadi lah . Terima kasih :)

avatar

.Assalamualaikum.
.Sila Tinggalkan Comment Anda Di Sini.
SATU pun jadi lah ! hehe. EmoticonEmoticon

Google+ Followers