Jan 2, 2011

Cara Buat Tab Menu Drop Down atau JQuery Tab Menu Accordian

Salam. Harini nak ajar macam mana nak buat tab menu drop down, atau nama komputer nya Jquery tab menu accordian. Okey, segala kod-kod ini aku refer kepada blog MariBinaBlog. Kalau korang rajin explore tutorial Jquery dalam blog ni, memang korang leh dapat segala macam jenis tab menu yang lawa-lawa. Macam professional je blog korang dan tak sarat dengan segala mcam widget. Amboi, macam la blog kau professional sangat. Tab menu ni aku pasang kat bahagian Nokia C3-00 kat side bar aku tepi nih. Okey, jom belajar.
1. Bukak Dashboard --> Design --> Page Elements --> Add a Gadget --> Pilih HTML/ Java Scripts.
2. Tanpa ragu, korang copy segala macam kod di bawah ni di dalam HTML/Java Scripts tadi.
<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. Untuk kod warna #ffffff adalah warna bagi tajuk,
#FF6699 adalah warna background title box yang macam aku punya kat Nokia C3-00 tu,
#FFFFFF adalah background accordian box iaitu background tempat shoutbox dan lain-lain tu.
Korang boleh pilih warna kat SINI.
5. Save. Dah siap.
6. Opss, kalau korang nak banyak atau sikit tab menu tu, just copy je ,
<h5 class="msg_head">TAJUK 4</h5>
<div class="msg_body">

MASUK KOD KORANG

</div>
di bawah-bawah nya, atau cut sahaja mengikut kehendak hati korang.

Kalau nak lebih faham, boleh tengok blog MariBinaBlog. Credit to Lionteen for new url code.
signature






33 comments:

  1. weh nanti bentuk dia jadi cane?aku xtau r..

    ReplyDelete
  2. yes da ade tutorial :D
    toce sifu! nk try nti :D

    ReplyDelete
  3. wah~ *tepok tepok*
    ak ngt kan tadi drop down menu utk buat sistem. siap bole buat tutorial kat blog. haha. wa salute sama lu babe. :))

    ReplyDelete
  4. @hajar_razak

    java jsp aku tak mahir la..haha

    ReplyDelete
  5. selamat tahun baru 2011 akak ucapkan, semoga tahaun 2011 nazirah success ngan pelajaran dan kehidupan.

    teruskan memberi tutorial.

    ReplyDelete
  6. @Cik Ina minat Do do Cheng

    time kasih kak ina :)
    saya pon harap family kak ina lebih happy tahun nih :)

    ReplyDelete
  7. wow berjinak dengan jquery :D
    jquery ni satu js lib yang memang hebat gila weh :D

    kalau ko belajar betul2 memang banyak benda boleh buat.

    p.s pita ko masukla sikit2 jquery. kompem menarik. eye candy. panel suka tengok benda2 eye candy neh :D

    rgds,
    syafiq.net

    ReplyDelete
  8. @syafiq.net


    ye ke senior kuh..okey2, nanti leh explore lagi.. :)) time kasih bgi tips

    ReplyDelete
  9. Akk , nak tanye .
    Macam mane akk masukkan 'owner' tuhh ?
    Ade gambar lagi ?
    Tolong ajar boleh ?

    ReplyDelete
  10. @Alya Twink♥
    letak kat bahagian TAJUK 1, TAJUK 2, TAJUK 3 :)

    ReplyDelete
  11. Salam dik
    Nape akak buat xbley slide ye?dia x ngincup..ngembang je.. H.E.L.P!

    ReplyDelete
  12. KAKAKAKAK !!! PLEASE REPALY APE YG SYE NAK TNYE NI ! MACAM MANE NAK LETAK BACKGROUND DKT TAB TUUU ????

    ReplyDelete
  13. @Miss Momo

    bckground ape dik??ce bgi soalan yg lebih detail..bground warna ke?
    kalo warna letak kat sini

    .msg_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    background-color:#FF6699;
    border: 2px solid #FFFFFF;
    margin:1px;
    }

    tukar kod warna yg #FF6699 tu

    ReplyDelete
  14. @MamaLieza

    waalaikumsalam kak :)
    emm, saya pon selalu jadi mcm tu kak..tpi sebabkan tenet tu lembap dan lmbat loading.tu die tak kembang kuncup..tpi sebenarnye kod die memg dah betul dah dan memg akan jadi..ce akak buat, dan suruh sesapa bukak blog akak.org tu boleh tak nmpak efek die. :)

    ReplyDelete
  15. thanks sbb share tuto ni..cari punya carikk, jumpa jgk kt sini, tuto ni best sbb boleh buat lebih dr tiga tab hehe..nk share ngn kwn2 lah..credit to you :)

    ReplyDelete
  16. akak , macam mane nak masukkan owner erh ? macam mane nak masukkan gambar kat kod tu ? please help me . saya blogger baru .

    ReplyDelete
  17. @SHAHIRAH ADIZAN

    http://suzuran89.blogspot.com/2011/01/cara-mudah-letak-iklankempen-churp.html

    adik, tuk letak gmbar guna kod ini..upload dulu gambar tu, then copy die nye URL.

    ReplyDelete
  18. akak , masukkn kod tu kn , kod apa ? tk phm ?? tlg reply kt blog syyyyy :(

    ReplyDelete
  19. wahh,dah jadi,!
    cume takleh nak turunkan2 menu bar,sentiasa jer terbuka :)
    btw,thankz akak :)

    ReplyDelete
  20. cam ne nk dptkn code ue??

    ReplyDelete
  21. JADI !
    thanks for the awesome tutorial :)

    ReplyDelete
  22. @Anonymous

    kod tu contoh kod untuk recent komen,kot untuk shoutbox/cbox,kod untuk letak gmbar.boleh google okey

    ReplyDelete
  23. @Iera Lollies

    saya dah tukar kod die..dah pulih semula..SORRY! :)

    ReplyDelete
  24. asalamualaikum ..akak x jadi lah .. saya dah letak kat MASUKKAN KOD 2 kod saya lepas 2 bila perview keluar kod tersebut ... macam mane nie (◕^^◕)

    ReplyDelete
  25. Dear cam mana nak masukkan isi kandungan dalam setiap tab yg kita buat..tab ada buat dalam tu xde apa2

    ReplyDelete
  26. @ZieShop

    masuk isi kndungan dalam bahagian MASUK KOD KORANG..

    ReplyDelete
  27. @nur shahrina
    maybe kod tu yg salah..kalo kod betul dia akan generate jdi apa yg septutnya

    ReplyDelete

♥♥ Special Thanks For Your Lovely Comments♥♥