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

191 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. thanks..membantu sangat2 ni...

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

    ReplyDelete
  9. 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
  10. Mantap artikelnya mas bro.. Keren, bisa namabah referensi

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

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

    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. done! thanks, tp mcm mana nak change shape tab?ubah kod yg mana?

    ReplyDelete
  16. 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
  17. mcm mana nak letak isi dalam navbar menu tu ek ?

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

    *harap dpt jwb!!!

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

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

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

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

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

    ReplyDelete
  24. 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
  25. dah menjadi tp xleh post kat menu tab yg baru tu..

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

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

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

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

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

    ReplyDelete
  31. salam..

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

    ReplyDelete
  32. salam..

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

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

    ReplyDelete
  34. PAGE NOT FOUNDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

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

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

    ReplyDelete
  37. 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
  38. 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
  39. macm mane ak letak entry dalam tab tuh ?

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

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

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

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

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

    ReplyDelete
  45. 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
  46. salam, cmne wat tab 2 duk kat tengah??ubah ktne ea??

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

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

    ReplyDelete
  49. 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
  50. ya,,terbaek,,urm,,ad x care nk edit colour?? sy x hafal kod2 warne uh,,

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

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

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

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

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

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

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

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

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

    ReplyDelete
  60. 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
  61. 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
  62. cmner cara nak buat box2 tue? box yg kt tepi2 tue.. xjadi2lah.. tlglah ajar..

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

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

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

    ReplyDelete
  66. 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
  67. kenapa kalu kite click tab menu tu . die tak kua apa2 benda?

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

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

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

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

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

    ReplyDelete
  73. 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
  74. knape saye nyer x leh? asyik error jek... ~___~

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

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

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

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

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

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

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

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

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

    ReplyDelete
  84. TQ ANA DAPAT TAMBAH ILMU DARI BLOG U

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

    ReplyDelete
  86. 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
  87. thanks admin.. tutorial yg terrrbaikkkkk laa.. ^__^

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

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

    ReplyDelete
  90. 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
  91. maCAM mana nak letak post atau entri dalam tu ?? jadi memang jadi tpi bila klik takda apa pon .... plissssssssssssssssssssssssss

    ReplyDelete
  92. 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
  93. aduiihh...x jd lar,tulisan java plak kuar kat atas header tu,mcmner nk buang template yg dah disave tu...uhuhuuu...

    ReplyDelete
  94. 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
  95. frustnye...lain yg nk bt,lain plak jadinye.....huhuhu..

    ReplyDelete
  96. 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
  97. 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
  98. mcm mne nak letak entri dkt dlm menu tuuuu ? please bagitahuuu ~

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

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

    ReplyDelete
  101. 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
  102. Dalam blogger baru...tak ada Design>page element>add gadget>HTML/Java script...cammana nak buat nie.

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

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

    macam mana ni?
    first je dah error..

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

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

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

    ReplyDelete
  108. camne nak pindah jarak ketengah sikit?

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

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

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

    ReplyDelete
  112. 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
  113. 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
  114. 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
  115. Salam.. memang menarik... TQ very much... semoga terus suksess & cemerlang

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

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

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

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

    ReplyDelete
  120. @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
  121. 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
  122. mcm na nak post entri dlm ruangan tu??

    ReplyDelete
  123. 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
  124. ko diatas judul blog ada tulisannya -_- ?

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

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

    ReplyDelete
  127. 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
  128. akhirnya saya telah berjaya setelah 2 minggu mencuba tqvm..http://jmjkadkahwin.blogspot.com/

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

    http://mana2layan.blogspot.com/

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

    blog : www.mysupersupplement.com

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

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

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

    ReplyDelete
  134. Thank you for the information you have provided, I was pleased to read the article in this blog. Visit also my blog ;
    Jasa Percetakan Murah
    hadirkanlah
    Kata Kata Cinta
    Kata Kata Bijak
    Kata Kata Lucu

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

    ReplyDelete