Tutorial & Cara Buat Menu Navigasi dengan CSS

Dulu sebelum ada yang namanya kode CSS, menu navigasi dibuat dengan menggunakan table dengan kode HTML. Baik itu secara horizontal menu atau vertikal menu. Bahkan, untuk membuat sebuah layout website pun masih pake table. Nah...kalo sekarang udah ga zaman bikin menu navigasi dengan table udah ada cara lain yaitu dengan menggunakan kode CSS. Berikut cara-caranya dan mudah2an dapat dipahami......... Tutorial Membuat Kode CSS Menu Navigasi Sebelum dimulai, perlu diketahui bahwa untuk menempatkan kode CSS di blog yaitu harus diantara tag <head> dan </head>. Atau untuk lebih gampangnya, simpan aja diatas kode ]]></b:skin> </head> Ok....langsung aja ke cara membuat kode CSS untuk menu navigasi. Pertama anda harus buat dulu kode css untuk tag pengaturan menu navigasi. Lihat kode dibawah ini : #menu { margin-bottom: 10px; height: 29px; background: transparent ; padding: 0px 0; } Setelah itu, buat kode CSS untuk merubah format default untuk tag ul dan li #menu ul { margin: 0; padding: 7px; height: 29px; text-align: center; } #menu ul li { list-style: none; display: inline; } Maksud dari kode CSS diatas adalah untuk merubah format tag ul dari vertikal ke horizontal serta mengatur margin dan padding tiap menu navigasi. Selanjutnya, buatlah kode CSS untuk membuat variasi link dari menu navigasi. kodenya : #menu ul li a:link, #menu ul li a:active, #menu ul li a:visited { color: white; margin-bottom:4px; padding: 13px 7px 13px 7px; font-size: 1em; font-family: 'lucida grande', arial, sans-serif; font-weight: bold; text-decoration: yes; background: url(http://i283.photobucket.com/albums/kk315/ meezanx_2008/menu.gif) repeat-x; background-position:center; } #menu ul li a:hover { color: white; } Nah.....kode2 diatas itu semua adalah Tutorial mebuat kode CSS menu navigasi. Untuk lebih jelasnya dan cara menyimpan kode tersbut di template blog anda ikuti langkah2 berikut :
  • Login ke Blogger lalu pilih layout kemudian edit HTML
  • Sebagai kemanan silahkan download dulu template anda
  • Ingat....Jangan kasih tanda checklist pada kotak Expand Template Widget.
  • Cari kode berikut :
]]></b:skin> </head>
  • Kalo sudah ketemu. silahkan copy paste kode berikut di atas kode HTML tadi

#menu { margin-bottom: 10px; height: 29px; background: transparent ; padding: 0px 0; } #menu ul { margin: 0; padding: 7px; height: 29px; text-align: center; } #menu ul li { list-style: none; display: inline; } #menu ul li a:link, #menu ul li a:active, #menu ul li a:visited { color: white; margin-bottom:4px; padding: 13px 7px 13px 7px; font-size: 1em; font-family: 'lucida grande', arial, sans-serif; font-weight: bold; text-decoration: yes; background: url(http://i283.photobucket.com/albums/kk315/meezanx_2008/menu.gif) repeat-x; background-position:center; } #menu ul li a:hover { color: white; }

  • Setelah selesai copy paste nya, cari kode berikut :
<div id='content-wrapper''>
  • Kalo sudah ketemu (harus) copy kode berikut di atas kode html tadi

<!-- MULAI MENU --> <div id='menu'> <div style='display:none;'> <img alt='preload' src='menuon.png'/> </div> <ul> <li><a href='URL ANDA' target='_blank">Text Anda</a></li> <li><a href='URL ANDA' target='_blank">Text Anda</a></li> <li><a href='URL ANDA' target='_blank">Text Anda</a></li> <li><a href='URL ANDA' target='_blank">Text Anda</a></li> </ul> </div> <!-- AKHIR MENU -->

Catatan Penting :
  1. Ganti URL ANDA dengan link yang anda maksud dan Text Anda dengan nama dari masing - masing link. Lihat Cara Membuat Link.
  2. Jika anda mengerti kode CSS, anda bisa ganti kode CSS-nya, sesuai dengan kebutuhan anda.
Kalo sudah selesai, save template. OK....Selamat mencoba...

34 komentar:

  1. Setuju Bos....

    BalasHapus
  2. Terima kasih,

    sudah saya coba siip banget

    masih pemula

    BalasHapus
  3. AQ Udh coba Cara Buat Menu Navigasi CSS, tapi selalu muncul tulisan begini :
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    (Maklum Pemula):))
    Apa Yang salah Ya?
    Atau AQ belum paham dengan Kata-katanya Ye:)

    BalasHapus
  4. Mas,,,

    Kata

    "Kalo sudah ketemu (harus) copy kode berikut di atas kode html tadi"

    Maksudnya diatas gimana ya?
    Apa Mesti diletakkan diatasnya atau dibawahnya?

    BalasHapus
  5. http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif hehehehe

    BalasHapus
  6. boz aku dah coba pasang di blog aku tapi ada pesan berikut
    "Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The value of attribute "target" associated with an element type "null" must not contain the '<' character."
    aku dah copy paste semua css nya sesuai dengnan yang tertulis di atas mohon pencerahanya di endinaku@gmail.com
    trims

    BalasHapus
  7. mas...bleh ga minta kirimin tutorial cara mempercantik blog....yg detail n lengkap..

    tlong ya mass,,,,karna saya awam skali dalam mmbuat blog.....

    email saya: the_rickey@yahoo.co.id

    BalasHapus
  8. Keren mas...thanks ilmunya..

    BalasHapus
  9. mas kode div id=content-wrapper gak ada di template ku, jadi solusinya gmn???
    maklum masih pemula

    BalasHapus
  10. Maz Mizwar saya mau coba yang ini tapi saya masih bingung yang dimaksud navigasi itu apa???maklum masih baru!!!!!

    BalasHapus
  11. MKSH boz..ku tunggu saran laenya...

    BalasHapus
  12. Makasih ya infonya ntar gw coba dech

    BalasHapus
  13. Makasih infonya, segera meluncur....

    BalasHapus
  14. mohon maaf sebelumnya saya ingin bertanya:
    bagaimana sih caranya membuat menu seperti yang ada diwebsite seperti ada home,galery,dll yang ada diatas halaman blogspot kita...
    mohon penjelasannya ya mas
    Salama
    Yusandra_sangkut@yahoo.com

    BalasHapus
  15. seblum saya bertnya saya mnta maaf...

    gimana mas caranya buat menu navigasi... k' saya coba g' bisa????

    ohy tunjukkan yang jelas biar mengerti...

    salam saya : jaka_kebal@yahoo.co.id

    BalasHapus
  16. boz aku dah coba pasang di blog aku tapi ada pesan berikut
    "Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The value of attribute "target" associated with an element type "null" must not contain the '<' character." Sama pertanyaannya dengan komentar sebelumnya juga ngak jalan. Solusinya gimana mas. Harap diperbaiki tutorialnya. emal : w_arita@yahoo.com

    BalasHapus
  17. gak bisa bang.... mohon diperbaiki lagi.. trims...

    www.Sedot-Go.blogspot.com

    BalasHapus
  18. Salam ziarah. Nice blog Mirwa. Sila visit http://tip-buat-blog.blogspot.com untuk berkongsi ilmu navigation / drop menu menggunakan css3

    BalasHapus
  19. GIMANA YAH MAS WAKTU PAS DISIMPAN TEMPLATE, ADA TULISAN KAMI TIDAK DAPAT MENYIMPAN TEMPLATE ANDA

    BalasHapus
  20. makasih banyak mas,,saya sudah coba, alhamdulillah bisa, walau masalahnya sama seperti yang dihadapi temen-temen di atas (Pesan error XML: The value of attribute "target" associated with an element type "null" must not contain the '<' character." ).setelah di ubah-ubah dikit ternyata bisa juga. solusi dari masalah itu ternyata pada kode tanda petik dua (") setelah '_blank, diganti menjadi tanda petik satu ('). jadi hasilnya '_blank'>

    BalasHapus
  21. Pesan error XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    BalasHapus
  22. buat menu masih bingung soale baru pemula banget...

    BalasHapus
  23. thanks tutorialnya

    wahyu agung peraih diamond 20juta

    WWW.TABUNGANFINANSIAL.CO.CC

    BalasHapus
  24. aku dah nyoba, tapi kok error terus ya?

    BalasHapus
  25. alhamdulilah saya udah pasang menu di blog iseng2 saya, makasih ya kang . maju terus..

    BalasHapus
  26. kang saya amat newbie.. tolonglah kang.. saya tanya beda kode " dengan ' itu apa dan gimana menutup xml dengan baik ?? bisakah html digabungkan dengan hml ?? apa eda html dengan hml ?? mohon banget bos admin kerna saya adalah pemula baru banget

    BalasHapus
  27. apakah harus ditimpa HTML nya ato langsung copy paste aja...
    maklum baru pemula,,,

    BalasHapus
  28. Jalan2 sob...
    Tuker Link yuw ^_^

    BalasHapus
  29. sayang tutor di atas
    hanya buat yang puny
    komputer untuk
    memakai hp tidak
    bssayang tutor di atas
    hanya buat yang puny
    komputer untuk
    memakai hp tidak bs
    memakai hp tidak
    bssayang tutor di atas
    hanya buat yang puny
    komputer untuk
    memakai hp tidak bs

    BalasHapus
  30. Ini ada contoh horizontal menu, vertical menu atau dropdown menu, tinggal download ajaa
    www.designedmenus.blogspot.com

    BalasHapus

blogger