Cara pasang menu bar pada blog




Untuk memasang menu bar dibawah header, seperti yang boleh anda lihat pada blog ini (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 biru yang di bold mengikut keseuaian blog anda jika perlu.

/* menu bar */
#menubar{
margin: 0;
padding: 0;
float:left;
border:1px solid #e5e5e5;
width:100%;
background:#e5e5e5;
}

#menubar li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;
}

#menubar li a{
display: block;
margin: 0;
padding: 4px 10px;
background: #666;
color: #fff;
text-align: center;
text-decoration: none;
border:2px solid #ffffff;
border-right:3px solid #ccc;
}

#menubar li a:hover{
background: #000;
}

#menubar div{
position: absolute;
visibility: hidden;
}

Langkah 4

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

<ul id='menubar'>
<li><a href='#'>HOME</a></li>
<li><a href='masukkan URL profile di sini'>PROFILE SAYA</a></li>
<li><a href='mailto:masukkan e mail di sini'>E MAIL SAYA</a></li>
<li><a href='masukkan link 1'>LINK 1</a></li>
<li><a href='masukkan link 2'>LINK 2</a></li>
</ul>

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.


42 komen:

  1. thanks nesface..
    mmg pakat html la

    ReplyDelete
  2. hehehe,, bro nes,, ade x care gune add gadget jew??? blog aku xsesuai gune care paste kat body,heheh

    ReplyDelete
  3. guna pages mcm mana T_T

    ReplyDelete
  4. @Liyanaa.

    Pages yang macam mana tu T_T

    p/s: T_T = Icon apa tu?

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

    ReplyDelete
  6. I'm done here, thnx :)

    ~THNX TO U ! BRU JEK RQ, DA ADA DA TUTORIAL NI :)

    ReplyDelete
  7. hehe..thanks nes...
    tp nak request tutorial bleh tak..??
    Mcm mana nak masukkan flash kat header tu..
    mcm blog nes la...??
    harap2 bleh berkongsi..


    thanx...

    ReplyDelete
  8. best2... mmg ini yg kucari selama in.. TQ.....

    ReplyDelete
  9. cantekkkk.. kalu nk tukar2 kaler mcm mn plak? kna adjust kt bagian mn?

    ReplyDelete
  10. banyaknya ilmu dalam blog ni..
    terima kasih...
    sangat menghargainya..

    ReplyDelete
  11. kalau takda div id="content-wrapper" macam ne ek?

    ReplyDelete
  12. kalo xde div id="content-wrapper" mcm ne yer??

    ReplyDelete
  13. Cuba guna kod yang ni pulak

    <div id='content-wrapper'>

    ReplyDelete
  14. xde jugakla...koding tu warna merah bile search..

    ReplyDelete
  15. x pham la ruang find 2 kat ner, bleh x tnjkkan gambar spy sy lg snang nak pham.....=(

    ReplyDelete
  16. 1.masukkan url profile sy maksudnye kena masukkan link url http sy ke?

    2.apakah langkah sebelum masukkan bar ke blog ? cth sy nak letak ..kat makna sy nak type maklumat spt diatas?

    3.bila sy dah ikut langkah saudara ajar x keluar pun kotak menu bar tp keluar maklumat paste yg sy edit hxml...mcmana ye..

    ReplyDelete
  17. 1.saya cuba masukkan menu bar,kenapa bila preview keluar perkataan ni:

    2.We were unable to preview your template
    Please correct the error below and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: XML document structures must start and end within the same entity.

    ReplyDelete
  18. JustTheRangers1:43 AM

    thanks 4 the info nescafe ais

    ReplyDelete
  19. hai nes...blog sy xdamenu bar...dan saya dah cari serta buat mcm nes ajar...tetapi x boleh...apa saya patut buat??

    ReplyDelete
  20. 1st coding mmg menjadi.... tp 2nd coding x jadi lar!!! dah find < div id='content-wrapper' > tp xder dlm HTML aq pun..... kes nie same mcm comment "testing piston"

    ReplyDelete
  21. kenapa x de pun perkataan "find"? tolong tolong tolong

    ReplyDelete
  22. O dah jumpa. thanks a lot. =)

    ReplyDelete
  23. saya pun menghadapi masalah mcm ddyB.. tu la.bila find < div id='content-wrapper' > tak dijumpai....tolong yerk macam mana nak buat

    ReplyDelete
  24. find guna Ctrl + F senang guna ni tak payah tercari cari kod

    ReplyDelete
  25. encik nes... nak tanya kenapa blog saya tak boleh nak post kalau buat tutorial...contohnya kalau ada simbol ]]> dia akan cakap "head not allow" error knpa ya?

    ReplyDelete
  26. hi..tgh cuba nk try yg nie..almost tutorial saudara berjaya setakat nie...terima kasih yea :)

    ReplyDelete
  27. salam.. saya nk tany skit.. mcmana nk submenu pada menu.. tlg ya..

    ReplyDelete
  28. salam..kalau nak letak menu kat atas header camne..

    ReplyDelete
  29. Nescafe ais4:46 PM

    @heygirl

    Langkah 5 dengan 6 guna kod yang ini

    <div id='header-wrapper'>

    ReplyDelete
  30. html saya xde div id="content-wrapper" cmne eh?

    ReplyDelete
  31. kenapa sy try byk kli xle ye?

    ReplyDelete
  32. g bisa nich.kode-kode tak bisa tersipan

    ReplyDelete
  33. sedg mencari menu ni...

    ReplyDelete
  34. tp xder div id='header-wrapper' atau ini div id='content-wrapper'

    ReplyDelete
  35. saya pun tak dapat mencari div id='header-wrapper'

    ReplyDelete
  36. dah berjaya..klo x dpt jpe div id='header-wrapper' try cr div class='main-outer'..
    btol x abg nescafe?

    ReplyDelete
  37. macamana nak buat untuk sub menu?

    ReplyDelete
  38. siapa yg ada masalah langkah 5 taip div class='main-outer thx to far_east.Semua step dah siap cuma masalah nak klik link contoh home tu x boleh nak klik apa contoh kena taip cam ni ke http://www.yahoo.com/ ?

    ReplyDelete
  39. div id='header-wrapper'...div class='main-outer...div id='content-wrapper...saya tak dapat cari..ada kod lain?

    ReplyDelete
  40. sy masuk kod pd find...tekan enter xkluar apepun...

    ReplyDelete