Cara pasang menu bar versi 2




Untuk memasang menu bar dibawah header, seperti yang boleh anda lihat pada blog ini ataupun di template classic(sila klik), sila ikut beberapa langkah yang di tunjukkan di bawah.

p/s: Sila save script template anda.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, taip atau paste kod ]]></b:skin> pada ruang Find. Seterusnya tekan Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste di atas atau sebelum kod ]]></b:skin> ( rujuk langkah 2)

p/s: Anda boleh edit kod warna yang di bold mengikut keseuaian blog anda jika perlu.

.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #000;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.invertedshiftdown ul{
margin:0;
margin-left: 40px;
padding: 0;
list-style: none;
}

.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 9px 10px;
background-color: white;

-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}

.invertedshiftdown a:hover{
background-color: #000;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}

.invertedshiftdown .current a{
background-color: #D10000;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}

Langkah 4

Salin kod merah di bawah dan edit pada notepad. Gantikan kod merah yang di bold dengan URL dan teks pilihan anda.

<div class='invertedshiftdown'>
<ul>
<li><a href='masukkan URL di sini'>Link 1</a></li>
<li class='current'><a href='masukkan URL di sini'>Link 2</a></li>
<li><a href='masukkan URL di sini'>Link 3</a></li>
<li><a href='masukkan URL di sini'>Link 4</a></li>
<li><a href='masukkan URL di sini'>Link 5</a></li>
<li><a href='masukkan URL di sini'>Link 6</a></li>
</ul>
</div>
<br style='clear: both;'/>

Langkah 5

Dengan menggunakan keyboard, taip atau paste kod <div id='content-wrapper'> pada ruang Find dan seterusnya tekan Enter.

Langkah 6 

Salin kod berwarna merah yang telah di edit (rujuk langkah 4) dan paste kod tersebut di bawah atau selepas kod <div id='content-wrapper'> (rujuk langkah 5)


Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.

55 komen:

  1. tak boleh buat tak tahu salah kat mane

    ReplyDelete
  2. thanks for the sharing anyway dont forget to checkout my blog at http://markjue92.blogspot.com I'm following u

    ReplyDelete
  3. salam bro.. sehat2 hendaknya.

    ReplyDelete
  4. @Fyzal

    Ok jer.Cuma bz. Kehkeh.Terima kasih sebab singgah.

    ReplyDelete
  5. maken lame, makin ensem blog ni,,huhuh

    ReplyDelete
  6. Terimakasih tutorialx, sgt bermanfaat

    ReplyDelete
  7. Yang ni gua pasang kat blog baru gua. Tqs Nes!

    ReplyDelete
  8. kod lama? i mean yg versi 1 tu mcm mna?

    ReplyDelete
  9. @ZELL

    Tengok kat sini

    http://maribinablog.blogspot.com/2010/02/cara-pasang-menu-bar-pada-blog.html

    ReplyDelete
  10. tak jumpa ruang find pun untuk buat

    ReplyDelete
  11. @ABDUL HALIM

    Ada. Atas button Start.

    ReplyDelete
  12. salam, blog templates sy dah ada menu bar di atas header tu tp, sy nak change ,kalau boleh nak buang menu yg sedia ada nak ganti dgn menu yg admin gunakan...bagaimana??

    ReplyDelete
  13. SALAM NES...NAK MINTAK TOLONG SIKIT...BAR DA KUAR, TAPI BILA KLIK DIA TULIS " Sorry, the page you were looking for in the blog VEMMA does not exist." KENAPA YER?

    ReplyDelete
  14. @amry

    Cuba betulkan URL nya.

    ReplyDelete
  15. ok.berjaya...terima kasih banyak2.best la...tapi ada satu masalah lagi..cam ner bila kita klik bar tu akan akan kuar post yang mengikut tajuk bar tu?

    ReplyDelete
  16. da berjaya buat klik bar kuar ikut tajuk bar...huhuhu

    ReplyDelete
  17. tak jadi lah..yg kod bewarna biru tu berada di atas top header..dan menu bar dia menjadi seperti
    list bar..kebawah...macam mana nk buat??

    ReplyDelete
  18. tak jumpe ruang find..adesss

    ReplyDelete
  19. utk ruang find tekan CTRL dgn F at the same time.. nanti dia akan kuar kat bwh..

    ReplyDelete
  20. tpkan url tu blog add kite ke ha?

    ReplyDelete
  21. saya tak phmm.. BLURR kalo saye tekan CRL+F die akan timbul bwah tue..tuelah saye x phm ????? bleh beri ajar ??

    ReplyDelete
  22. alhamdulillah.
    jadi gak.taip URL kena betul. kalau tak mesti error. Kod yang color merah tu kena letak kat
    bawah header baru link tu dok kat bawah header.

    ReplyDelete
  23. Alhamdulilah dah jadi menu bar yg NESCAFE AIS sediakan.... tp kenapa garisan hitam 2 panjang sngat erkkk? leh x bg pendek ckit mengikut saiz blog sy? PLEASE HELP ME NESCAFE AIS

    ReplyDelete
  24. sy rase mcm lagging la lepas buat menu tab nie!!! mcm lame sngat loading utk buka page blog sy.....

    ReplyDelete
  25. Langkah 2

    Dengan menggunakan keyboard, taip atau paste kod ]]> pada ruang Find. Seterusnya tekan Enter.


    daripada srep yg diberi, saya xjumpa ruang find..yg ada ruang browse sahaja. so, mcmner ye???

    ReplyDelete
  26. thank u......blog aku dah ada perubahan tapi bro aku nak tanya macammane nak masukkan blog orang lain....dalam list blog

    ReplyDelete
  27. nak tanya la..kenapa kalu klik pada menu tu x kuar pun apa yang kita nak..mcm mana nak buat tu?

    ReplyDelete
  28. tekan ctrl+F pada keybord utk buat find...

    ReplyDelete
  29. tq..da jadi..hehe

    tryla tengok kat sini Hari Baru

    ReplyDelete
  30. erm..cm susah la...huhu

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. mende yg last (content-wrapper) takde pon kat HTML tu~

    ReplyDelete
  33. knpe nk letak <[xley letak div] id='content-wrapper'> xdpat? dier ckp phrase not found..
    maknenye?

    ReplyDelete
  34. ha'a...id='content-wrapper'> not found
    apa maksudnya bro? yang ada div id='page'> saja...

    ReplyDelete
  35. salam bro : nk masukkan URL mcm mana?

    'masukkan URL di sini'
    saya xberapa faham..mtak tnjuk ajr.. :)

    ReplyDelete
  36. bro nes, aku xjumpe content-wrapper. Help please

    ReplyDelete
  37. Nescafe ais4:15 PM

    @ARC™

    Cuba cari kod <div class='main-outer'>

    ReplyDelete
  38. Nescafe ais4:17 PM

    @ARC™

    Paste atas kod <div class='main-outer'>

    ReplyDelete
  39. ooooit...bro nes...thanks alottt....bgos ar blog kau.....

    ReplyDelete
  40. Anonymous3:50 PM

    nes...tlg aku...camnew nak tetapkan page manew yang each tab tu nak pegi???? camne nak wat new page???

    ReplyDelete
  41. nape xleh linkkan? ckp not found...da betulkan dah huuuuuu

    ReplyDelete
  42. step 2 tuh lepas tekan enter kt fing lepas copy paste x jadi pape pon..nape?? x pham arr bende nih..

    ReplyDelete
  43. Im using this tutorial to put on my blog. :)

    ReplyDelete
  44. saya gune ini. terimakasih tuan blog

    ReplyDelete
  45. bro, content wrapper xdela dlm template aku camne eh

    ReplyDelete
  46. eh aku dah tanya soalan tu rupenye kih3

    ReplyDelete
  47. main outer pon xde

    ReplyDelete
  48. cmner nk tambah tab ke kanan ni,

    ReplyDelete
  49. salam..nape tab menu bawah header tu ke kiri sangat, x betul2 bawah header.leh x tlg bgtau cane cara nk bg tab tu cun2 bawah header if u get what i mean.

    leh tgk www.wanwanijewels.blogspot.com

    thanx in advance!

    ReplyDelete
  50. nk tanya,mcmana nk buat post keluar ikut tajuk menu yg kita nak?

    ReplyDelete