Tutorial Buat Tab Menu / Navbar Menu

Mempunyai tab menu ataupun navbar menu dalam sesebuah blog boleh digunakan oleh pemilik blog untuk meletakkan link yang penting atau link yang ingin diberi perhatian oleh pengunjung blog. Anda boleh lihat contoh tab menu yang ringkas di sini



Tutorial untuk membuat tab menu / navbar menu adalah seperti berikut.



1. Dari dashboard > design > edit html
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod ]]></b:skin>
2.1 Jika tidak jumpa, cari kod </head>

3. Copy dan paste kod di bawah SEBELUM kod yang anda jumpa di langkah 2 @ 2.1


ul#list-nav {
list-style:none;
margin:20px;
padding:0;
width:525px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#FF0099;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
-moz-border-radius: 5px;
}

ul#list-nav li a:hover {
background:#FF6699;
color:#000
-moz-border-radius: 5px;
}



Contoh.:
Tutorial Buat Tab Menu



4. Save template anda.

5. Kemudian, kembali ke dashboard, pergi ke design > page element > add a gadget > HTML/javascript

6. Copy dan paste kod di bawah di dalam HTML/javascript kemudian tukarkan 'Link' dengan link yang anda mahu letak di tab menu.
Contoh : <li><a href='http://ohbest.blogspot.com'>Home</a></li>

Selepas selesai masukkan link yang dikehendaki,
save.

<div>
<ul id='list-nav'>
<li><a href='Link'>Home</a></li>
<li><a href='Link'>About Us</a></li>
<li><a href='Link'>Services</a></li>
<li><a href='Link'>Products</a></li>
<li><a href='Link'>Contact</a></li>
</ul>
</div>






7. Drag ke bawah element header, save dan lihat hasilnya.:)
Tutorial Buat Tab Menu




Nota 1: Untuk langkah 3, anda boleh ubah beberapa kod seperti warna background, border, dan radius. Bergantung kepada bagaimana tab menu yang anda mahukan.

Nota 2: Jika anda hendak tambah tab menu, copy paste barisan di langkah 6.


Happy blogging.:)

187 comments:

  1. tutorial ni la yang saya cari2 kat blog ni.thanks 4 sharing.afterward nak try buat :)

    ReplyDelete
  2. Finally jumpa pun benda ni.tutorial yg dah lama dicari TQ yaa

    ReplyDelete
  3. camne nak find kod 2 eh? x jumpe pun due2.. emm

    ReplyDelete
  4. alahaiii sshnyer..x dapat pun cari 2kod tue..camner nak wat....help2

    ReplyDelete
  5. camne nak letak post/entri dalam ruangan tu?? contoh nak letak entri/post dlm ruangan about us.. camne?? plisss....

    ReplyDelete
  6. Memang dah lama cari..... dulu dah buat tapi tak cantik... tak dapat macam yang dikehendaki... Kali ini dah ok.... TQ..Tq...Tq...

    ReplyDelete
  7. memang jadi..
    tapi bila click home and all the tab..
    die terus bawa ke page not found..
    macamana?

    ReplyDelete
  8. camne nak letak post/entri dalam ruangan tu?? contoh nak letak entri/post dlm ruangan about us.. camne?? plisss....
    memang jadi..
    tapi bila click home and all the tab..
    die terus bawa ke page not found..
    macamana nak wat...help me.....

    ReplyDelete
  9. Mantap artikelnya mas bro.. Keren, bisa namabah referensi

    ReplyDelete
  10. alaa....dh jdy dh..tpi,mcm mne nk post entri kt situ..dia terus kte,page not found...help me pleeezzzzzz !

    ReplyDelete
  11. susahnye nk buat...
    da mcm jadi org gilew.."
    pening siut..
    cara caranye x lengkap

    ReplyDelete
  12. saye buat tak jadi :(

    ReplyDelete
  13. hmm kalau guna template designer kan dah ada fuction tab nih. boleh ke kalau kita nak tambah?



    lgipon yg dekat template designer tu kan cuma utk buat static page je.


    hmmhmm hope renpond :)

    ReplyDelete
  14. t.q bro! serba menjadi semuanya! =).. siap tukar2 colour lagi=)

    ReplyDelete
  15. terima kasihh...sgt.....membantuu...!!!

    ReplyDelete
  16. done! thanks, tp mcm mana nak change shape tab?ubah kod yg mana?

    ReplyDelete
  17. Bro aku buat xmenjadi pon home tu aku tukar pade aku punye url page tak lepas pon dia kata page not invalid mcm mane ni bro

    ReplyDelete
  18. mcm mana nak letak isi dalam navbar menu tu ek ?

    ReplyDelete
  19. cane nak letak isi or link kn post yg kte wt kt dalam menu bar 2 erk???

    *harap dpt jwb!!!

    ReplyDelete
  20. mcm mna cara nak ltak link dlm menu bar ?? tutorial pliss... thnx...

    ReplyDelete
  21. korg x payah la susah2 tnye kat cni...die bukan nak jawab pun .....

    ReplyDelete
  22. erk..start step 6 syew da x phm??x jdx larh syew wat...ish..urm..

    ReplyDelete
  23. klu korang sume dah pening dan x faham aku lagi la...ishh pening

    ReplyDelete
  24. buat tak jadi tp masuk home tu semua huhuhuhu penin da... stop dulu...

    ReplyDelete
  25. tab menu tu da boley buat tp nk post kat page tu?? sy da try bnyak kali ..mcm mne nk post kat page bru tu? link tu amik kt mne? ken siap dulu ke post kite tu bru letak? tp mcm mne? seseynyee.. ;-(
    link tu mcm mne??

    ReplyDelete
  26. dah menjadi tp xleh post kat menu tab yg baru tu..

    ReplyDelete
  27. buat dlu page bru blh link lorh..

    ReplyDelete
  28. x pahamlah mcm mana nk ubah warna bar tu erk? :\
    please sesangat !! sape2 jwb ea? :'(

    ReplyDelete
  29. mcm mne nk wat ssah btul ler...:(
    please!!!!
    tlong sye!!!!!

    ReplyDelete
  30. da buat..jadi..tp nape navbar gi ke bawah lak..huhuhuhu

    ReplyDelete
  31. oii...keren nih, thanks...all...bro....

    ReplyDelete
  32. salam..

    thanks~!
    umi dah buat, tapi umi edit sikit...letak gambar
    :D

    ReplyDelete
  33. salam..

    mintak tolong ajar.. macam maner nak pos kat tab yg da d buat tu?

    ReplyDelete
  34. mcm mne nak post kat tab yg buat tuh ? hmmm , tolong ajarr please ! =)

    ReplyDelete
  35. PAGE NOT FOUNDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

    ReplyDelete
  36. dh jadi tp pink color ma... cane nak tukar color dia?

    ReplyDelete
  37. tq...dah menjadi..
    saya buat colou biru...
    tengok lah d blog saya..

    ReplyDelete
  38. dah buat tp x jadi lar. sme kod2 yang dah paste kt EDIT HTML keluar kat atas tajuk blog..
    cmne neh..
    nak sgt buat menda neh..

    ReplyDelete
  39. Xde sesape ke yg baca komen komen ni tolong ajar cara nak post entri dalam tab tu... tab menu smua dah siap... cuma nk buh entri dlm tu je xleh n xtahu.... minta sesape tolong ajar.... tq

    ReplyDelete
  40. macm mane ak letak entry dalam tab tuh ?

    ReplyDelete
  41. JADIK MEMANG JADIK..TP BLE KLIK SITU PAGE NOT FOUND!! THEN CAMNE NAK TUKAR KALER DYE?? PINKK DOWHH..

    ReplyDelete
  42. kat mana nak cari kod tuhh ??
    plissssss ! tolong ajarkan !!!!!

    ReplyDelete
  43. hello ??? napa kosong jewk dalam nya ??? macam mana nak + somthing ???? !! answer my questions please !!

    ReplyDelete
  44. thnx . da jadi da . tp mseh takk twu mcm mne nakk tukar clour .

    ReplyDelete
  45. Salam, dah cuba buat yang ini tetapi masih tak menjadi, boleh sesiapa tolong tak ?, pleasee

    ReplyDelete
  46. PAGE NOT FOUND .. follow step 6 ..dlm kotak biru tu, perkataan 'link' gantikan dgn apa2 link yg kita mau contoh - http://kuatmakan.com dan sterusnya, utk perkataan home, about us, services, produts u all gantikan dgn apa yg kita suka .. mcm blog kwn2 kita ke .. selama mencuba .. tQ admin

    ReplyDelete
  47. salam, cmne wat tab 2 duk kat tengah??ubah ktne ea??

    ReplyDelete
  48. kat mane nak tukar colour back ground ?
    and cam mane nak jadikan tab tu dalam satu line?
    Please~

    ReplyDelete
  49. cmne nak letak bende dalm navbar tuuuu ? plizzz la tolong :[

    ReplyDelete
  50. sory kalau ade mase mtk tlg sgt.. mcm mane nak delete yg lama punye eh. i mean bile i buat yg baru yg lame still ade .

    ReplyDelete
  51. ya,,terbaek,,urm,,ad x care nk edit colour?? sy x hafal kod2 warne uh,,

    ReplyDelete
  52. Dashboad > Design > Posting > Edit page :)

    ReplyDelete
  53. kat mana nak dapat design tab menu yg cute2 ye??tgk kt blog org len seme cute2 je!!nk jgk!!sape2 tau??

    ReplyDelete
  54. mummy biz bleyh cari css style...atau bleh tnya pakcik google..taip jer top menu...=)

    ReplyDelete
  55. Salam...hehe gumbirenye dpt wat kelainan sket kt blog. ni yg dicari2 slame ni.tocei2

    ReplyDelete
  56. suda jadi.
    terima kasih sgt2 .
    tutorial yang sgt berguna .
    :)

    ReplyDelete
  57. memang jadi..
    tapi bila click home and all the tab..
    die terus bawa ke page not found..
    macamana?

    ReplyDelete
  58. menjadi... tapi camna nak lebarkan ruang tab tu ye... nk jadikan 1 baris x mau 2 baris bgi menu tab yg panjag?... TQ

    ReplyDelete
  59. jadi memang jadi tapi x tau tukar warna je

    ReplyDelete
  60. klau gi "posting " pastu "edit page" jd gak kan?
    tu je lar ak try2
    happy blogging =))

    ReplyDelete
  61. kalau nak tukar colour background dari pink ke warna yang dikehendaki.. cari balik code dibwh ini dibwh ini.

    ul#list-nav li a {
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#1589FF;
    color:#FFFFFF;
    float:left;
    text-align:center;
    border-left:1px solid #fff;
    -moz-border-radius: 5px;
    }

    cuma tukar code bahagian background dgn code colour yang digemari. bahagian color adalah utk warna tulisan pada Nav Menu tersebut.
    Boleh pilih code utk warna di web bwh ini

    > http://www.computerhope.com/htmcolor.htm

    selamat mencuba.

    Jenguk2 n follow blog saya ya. tinggalkan link dan comment utk terus berhubung. Terima kasih :)
    http://ququpunya.blogspot.com/

    ReplyDelete
  62. bole tak sya nk mntk tutorial???
    sye adhe byk tab bar menu yang kat atas tu...
    ble nk wat post, kan kne tkan page yang bru kan..
    tp sya nk tmbah page lg kat dlm tab tu...
    tp nk tkan kat mna???
    ble sya wat new post,, mesti kluar kat home...

    conthla sye adhe tab sbela home tu "my family"..
    pastu sya da da post 1 entry,...
    tp ble nk tmbah lg 1 entri laen,,, x twu nk tkan kat mna?? tkan kat edit pon x boleee...

    please help meee....!!

    ReplyDelete
  63. cmner cara nak buat box2 tue? box yg kt tepi2 tue.. xjadi2lah.. tlglah ajar..

    ReplyDelete
  64. macam mane lak nk wt page baru tuk tab tu? tolong!!!!!!!!!!!!!!!!!

    ReplyDelete
  65. bleh x tukar warne mrah ke warne lain?

    ReplyDelete
  66. xjadi !!!!!! wargggghhhhhhhhh!!! tensyen !!!!!!spa2 tlong !!!!!!!!

    ReplyDelete
  67. macam mana nak carik link-link tu sume..
    cube try mcm selalu copy dekat link yang kat atas sekali tp cuba bukak tak jadik pon???

    TOLONG!!!

    ReplyDelete
  68. kenapa kalu kite click tab menu tu . die tak kua apa2 benda?

    ReplyDelete
  69. macam mane nak letak entry/post dalam tab menu tu ?

    ReplyDelete
  70. macam mana nak nav menu ni kt header.. saya buat di asik kt bawah je..=)

    ReplyDelete
  71. geram aku ! sapa yg jadik buad 2 tlong lah ajar kn cm ne nk post dlam 2??PAGE NOT FOUNDDD!

    ReplyDelete
  72. a'ah la,kt mne nk crik link tu???
    x jd pn kte buat.. :(

    ReplyDelete
  73. page not foundddddddddddddddddddddddddddddddddddddddd !!! apa patut buat!!!

    ReplyDelete
  74. salam...
    nak tanya sikit.

    blog saya ada buat pages ni.
    saya just guna "add page" kat blog tu je without using coding yg disebutkan di atas.

    pertanyaan saya..
    saya nak tukar warna pages tu kpd warna yg dikehendaki, then nak buat border skit.
    tapi taktahu mcm mana..
    boleh tunjukkan tak?

    ReplyDelete
  75. knape saye nyer x leh? asyik error jek... ~___~

    ReplyDelete
  76. sy guna design yg baru... tp, sy x jupe kt mne 'save' bg template... bleh tlg x???

    ReplyDelete
  77. macam mana nak besarkan saiz tab manu tuh, saya wat dia jadi kecik. So ada tulisan yang tak keluar. huhu

    ReplyDelete
  78. salam nk tnye la..mcm mne nk cri kod tu

    ReplyDelete
  79. macam mana nak letak isi dalam navbar menu tu?????jawablahhh

    ReplyDelete
  80. thnx..menjadi....jom tgk blog saye...

    ReplyDelete
  81. buat pages tab dah boleh tapi nak post kat page tu yang masalah ... ada sesiapa boleh tolong tak?

    ReplyDelete
  82. dah jadi tapiiiiiii...........................PAGE NOT FOUNDDDDDDDDDDD......arrrrrrr :(

    ReplyDelete
  83. blh tlg ajarkn bgaimna nk letak post2 kedlm tab tersebut . plz ~

    ReplyDelete
  84. bia saya bgtw , an adew 'link' tuh , ganti 'link' tuh nan link page y korg na ^^ *arap paham la ek*

    ReplyDelete
  85. TQ ANA DAPAT TAMBAH ILMU DARI BLOG U

    ReplyDelete
  86. terima kasih...dah jadi dah..cume nk msukkn entry dlm header2 tue..tak reti

    ReplyDelete
  87. Kalau nak buat dalam page tu ada entri yang banyak camne bro? Contohnya macam kt front page la jugak...boleh letak entri bebanyak ngan read more.

    ReplyDelete
  88. thanks admin.. tutorial yg terrrbaikkkkk laa.. ^__^

    ReplyDelete
  89. knp tak bole letak entry dlm tuhh ? tolong yew

    ReplyDelete
  90. i mmg dah lame cari this tutorial....loving it

    ReplyDelete
  91. tak tahu mcm mane nk gune kan fungsi ctrl+f dah jumpe button nyer tpi bende yg kite cari tuh xde owh tolong saye

    ReplyDelete
  92. maCAM mana nak letak post atau entri dalam tu ?? jadi memang jadi tpi bila klik takda apa pon .... plissssssssssssssssssssssssss

    ReplyDelete
  93. cmner yer nak uat..bila uat jadi mmg jadi tp dye kuar "Sorry, the page you were looking for in this blog does not exist"

    ReplyDelete
  94. aduiihh...x jd lar,tulisan java plak kuar kat atas header tu,mcmner nk buang template yg dah disave tu...uhuhuuu...

    ReplyDelete
  95. saya tak jumpa pun kod yang dicari untuk buat tab tu. saya dah cuba cara no. 2 dan 2.1 tp tak dapat. knp ya? asyik not found je

    ReplyDelete
  96. frustnye...lain yg nk bt,lain plak jadinye.....huhuhu..

    ReplyDelete
  97. ehem, minto tolong eh! jadi to jadi, tapi knp sy tekan link home tuh tertulis Sorry, the page you were looking for in this blog does not exist =.= ha.. how?

    ReplyDelete
  98. tq sebab dah jadi dah..tapi ade satu bende aneh jd dekat blog sy..ade tulisan2 aneh yg wujud dekat atas sekali..sama mcm code yg kte paste dekat edit HTML tu..tp tulisan tu ade dekat atas blog sy..tolong..misteri ni..try tgk dekat blog sy..belah atas sekali

    ReplyDelete
  99. mcm mne nak letak entri dkt dlm menu tuuuu ? please bagitahuuu ~

    ReplyDelete
  100. tuan tanah xjawap2 pun...half way....

    ReplyDelete
  101. step yg kene cari head 2 susah la camne nak buat hekk..tolong3..

    ReplyDelete
  102. assalammualaikum..nak tanya sikit ni..yang tuto ni
    time coding ni akhir tu..yang kene letak link tu...
    link apa yang tuan maksudkan?link ni kene buat..atau pon letak je..nnti die buat sendiri?mohon balas cepat sikit

    ReplyDelete
  103. Dalam blogger baru...tak ada Design>page element>add gadget>HTML/Java script...cammana nak buat nie.

    ReplyDelete
  104. sekian lama aku mencari akhir nya ketemu blog ini yg meleraikan kekusutan di kepala .. trimas ya tutorial ny sangt berguna..

    ReplyDelete
  105. Error parsing XML, line 1, column 1: Content is not allowed in prolog.

    macam mana ni?
    first je dah error..

    ReplyDelete
  106. x jd laaaa...huahuahua.... dalam blogger baru...tak ada Design>page element>add gadget>HTML/Java script...cam ner nih?????

    ReplyDelete
  107. jd tu jd tp cmne nk masukkan post kt tab tu??sbb bile click kuar page not found..

    ReplyDelete
  108. dah jadi tapi bila click kuar page not found.. nak letak color back groun camne?

    ReplyDelete
  109. camne nak pindah jarak ketengah sikit?

    ReplyDelete
  110. klau yg classic template pulak?? mcm mne??

    ReplyDelete
  111. klau di templat yang baru kan sudah ada, apakah ni berlaku untuk templat baru?

    ReplyDelete
  112. macam mane nak post kat dalam bende tuh ? pening-2 ! >< .

    ReplyDelete
  113. saya baru dalam dunia blog ni.Thanks bebanyak kepada tuan blog ni. Kekawan yang lain boleh la review dan tolong blog saya juga ok. salam kenal.

    ReplyDelete
  114. klu nak post kt dalam tu, leh cer usha blog http://bicarafarah.blogspot.com/2011/07/tutorial-65-cara-untuk-link-kan-tab.html ....

    ReplyDelete
  115. saya nak buat blog untuk perniagaan, tapi blog saya agak simple, ada x tips nak jadikan blog saya macam website online shopping macam amzon kerw, zalora kerw..kalau x ada, sekurang-kurangnya boleh tak bagi tips saya nak jadi kan blog saya supaya saya boleh promosi produk and apa yang perlu ada erk...

    ReplyDelete
  116. Salam.. memang menarik... TQ very much... semoga terus suksess & cemerlang

    ReplyDelete
  117. camne nak postkan kedalam menu bar tuhh??? please help... complicated lorrr...

    ReplyDelete
  118. TQ. Sharing tutorial nie..dah lama cari..

    ReplyDelete
  119. thanks..mmg sgt membantu..i like...

    ReplyDelete
  120. thanx alot..senang nak paham je kat sini..those tabs da jadi cuma xletak link lagi je..huhu..xde idea

    ReplyDelete
  121. @AiMeiL BaLi YoWeykA...

    First klu nk wat business blog.. trafik kene kuat.. cube cri panduan tingkatkan traffik blog... Tapi for beginning just use bank transfer.. ble dh maju bru boleh gne credit card.. cre nk wat credit card payment method senang tapi kene deposit 1500 us dollar.. thats mean RM 5000 ... I hope u dpat maju, dan perkembangkan ur business.. sbb susah skit nk wat business kt internet... klu de pe2.. tinggalkan mesej kt shoutmix sye.. at geekinbeat.blogspot.com

    ReplyDelete
  122. saya ada buat ni sebelum ni , tp masalahnya ada tulisan kecil2 diatas header saya dan sgt lah tk cantik... saya tk tahu mcmne nk padamkan

    ReplyDelete
  123. mcm na nak post entri dlm ruangan tu??

    ReplyDelete
  124. soalan yang sama macam org atas. macam mana nak post entry dalam tuh. dah buat tp tak tahu nak post entry camna.. sesiapa tolong sat

    ReplyDelete
  125. ko diatas judul blog ada tulisannya -_- ?

    ReplyDelete
  126. how to post in the tab??? make a tutorial okay... =)

    ReplyDelete
  127. salam,, mcm mane nak masukkan story dlm box tu??anyone help me.. :(

    ReplyDelete
  128. saya da brjaye bt tab menu., tpi mcm mne nk tmbah post pd tab tu? nnt klu bt post dye pg at home je., dye x pg dkat tab menu yg di khas kn utk dye., cmne ye.., tlg..,

    ReplyDelete
  129. akhirnya saya telah berjaya setelah 2 minggu mencuba tqvm..http://jmjkadkahwin.blogspot.com/

    ReplyDelete
  130. Thanks for tuto..
    sape yg sudi singgah la kat blog sya..hihi

    http://mana2layan.blogspot.com/

    ReplyDelete
  131. Salam sis, untuk tutorial ni kalau nak tebalkan tab die tak boleh ke ye?

    blog : www.mysupersupplement.com

    ReplyDelete
  132. singgah blog saya http://surveyonlineberbayar.blogspot.com/

    ReplyDelete
  133. kenapa saya punya html takda " ]]>"

    ReplyDelete
  134. Thanks sgt utk tutorial ni. menjadi dan sy suka sgt. done follow blog awk yg nice ni :)

    ReplyDelete
  135. alhamdulillah..tutorial terbaik yang saya jumpa..mmg ikhlas tuan/puan mengajar..terima kasih..semoga Allah membalasnya dengan segala kebaikan...aaminnn

    ReplyDelete