Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Menu Horizontal Sederhana di Header

Beberapa saat yang lalu ada yang menanykan bagaimana membuat menu di bawah judul blog seperti yang ada di Belajar Ngeblog di BLOG ini. Sekarang baru ingat dan sempat menjawabnya. Layaknya header, adalah salah satu tempat yang sering dilihat. Ada judul blog kita, dan bisa kita beri menu di bawahnya, seperti yang saya lakukan.

Sekarang kita akan belajar membuat menu horizontal yang sederhana di header. Yang perlu ditekankan adalah kesederhaan itu. Karena memang menu itu saya buat hanya menggunakan kode HTML yang sederhana berupa deretan link-link. Menu navigasi yang mudah akan memberikan pengalaman yang baik bagi pembaca blog kita. Menu horizontal ini saya buat terlebih dulu dengan menambahkan elemen gadget di header. Jika sudah, langkah selanjutnya adalah sebagai berikut.

Cara Membuat Menu Horizontal Sederhana di Header
1. Pilih Rancangan
2. Klik Tambah Gadget yang ada di Header
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<b><div style="text-align: center;"> <a href="http://kurniasepta.blogspot.com">Home</a>| <a href="http://kurniasepta.blogdetik.com">Blogdetik</a>| <a href="http://kurniasepta.wordpress.com">Wordpress</a>| <a href="http://kurniasepta.multiply.com">Multiply</a>| <a href="http://kurniasepta.posterous.com">Posterous</a>| <a href="http://twitter.com/kurniasepta">Twitter</a>| <a href="http://www.facebook.com/kurniasepta">Facebook</a>| </div></b>

5. Teks yang berwarna hijau adalah URL yang dituju sedang yang berwarna merah adalah teks yang tampil. Kita bisa menambahkan lebih banyak link sesuai lebar header dan link yang ingin kita tampilkan, dengan menambahkan kode yang tercetak miring setelah | yang terakhir.
6. Simpan jika sudah selesai.

75 komentar untuk "Membuat Menu Horizontal Sederhana di Header"

  1. makasih banyak yahhhh,,,,,

    BalasHapus
  2. info yang sangat membantu, thanks for sharingnya, salam kenal ya..

    BalasHapus
  3. keren gan, boleh dicoab ni

    akun premium filesonic dll. gratis
    linux shop
    software full, hp, tips dan trik, antivirus, game
    http://slovech.us

    BalasHapus
  4. akan lebih mudah kalau menggunakan fasilitas laman bro.

    BalasHapus
  5. terimakasih gan ^^

    jangan lupa berkunjung ke juandimas22.blogspot.com
    thx

    BalasHapus
  6. mANtAp gaN MAMPIR KE blog ane GAn http://bebas212.blogspot.com

    BalasHapus
  7. berkunjung sob..salam blogger
    sukses selalu yah..:)

    BalasHapus
  8. Salam Blogger dan Semoga Sukses Selalu.

    BalasHapus
  9. makasih gan, keren banget dah (y)

    BalasHapus
  10. Tanks gan, mantep, gimana jika isi halaman utamanya langsung muncul?

    BalasHapus
  11. bos, kenapa kalo di klick buka new windows?

    BalasHapus
  12. jangan lupa mampir ke nasihatnet.blogspot.com.....kalian perlu nasihat gan

    BalasHapus
  13. postingan keren semuanya ....

    BalasHapus
  14. keren blog nya, banyak yg follow

    BalasHapus
  15. http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif

    BalasHapus
  16. keren lansung dipasang di www.tiketbox.co.cc
    cek it out gan .. ;)

    BalasHapus
  17. thx infonya:) sudah dicoba dan berhasil:) terimakasih

    BalasHapus
  18. makasih banyak master...
    q nyoba trik2 laen yang lebih rumit ngak bisa...tp ni trik nya simple tp sukses..thanks

    BalasHapus
  19. website terbaru seperti WIKIPEDIA.ORG kunjungi www.okiputerautomo.co.cc

    BalasHapus
  20. Mau diterapkan mas, tapi di page elements blog ane kok bad request (error 400) ya mas? bisa kasih solusi mas? trims

    BalasHapus
  21. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  22. Mantap. .berhasil
    follow back ya catatanrizkyaburizal.blogspot.com :D

    BalasHapus
  23. kalau memper besar hurufnya gimana...?
    ;;)

    BalasHapus
  24. mantaf agan...sukses sll, izin ambil!!!

    BalasHapus
  25. terimah kasih atas script untuk blogger nya

    BalasHapus
  26. wah makasih info nya boz langsung aku cobain yach...nex time mampir ke blog ku karina foto collection.blogspot.com

    BalasHapus
  27. makasi infonya gan... 10 jempol buat nt.

    BalasHapus
  28. mampir ke blog gw gan...!!!
    ;)) ;;) :D ;)

    BalasHapus
  29. jazakallah tipsnya sobat...:))

    BalasHapus
  30. Sangat bermutu ni blog....

    BalasHapus
  31. informasinya sangat berkesan

    BalasHapus
  32. wah..gampang ya..keren jg itu

    BalasHapus
  33. bagaiman ngerubah warnax gan?

    BalasHapus
  34. Wah sebagai pemula di dunia blogger masih bingung gan. Entar tanya lagi lah ya. Padahal dah ngebet mau bikin menu horizontal ini. Ini memang lain sama wordpress ya? Di wordpress lebih gampang, tapi fasilitas lain lebih minim, atau saya yang nggak ngerti saja ya?

    BalasHapus
  35. gan gimana caranya kalo mau masukin kode html ke laman?
    ane gak bisa pake cara yg otomatis :(

    BalasHapus
  36. maksih gan sukses di aplikasikan, klau untuk merubah ukuran hurufnya gimana gan?..maaf blogger pemula!

    BalasHapus
  37. ijin nyoba yah sob.. terima kasih tutorialnnya yah...

    BalasHapus
  38. Makasih Atas Sharing Nya Bermanfaat Banget ! =))

    BalasHapus
  39. mantap ni gan, saya baru aja bikin satu blog di blog detik, maju blogger indo....

    BalasHapus
  40. gan ketika saya mengganti templete keluar peringatan seperti ini:Maaf, tetapi kami tidak dapat menyelesaikan permintaan Anda.

    Bila melaporkan kesalahan ini kepada Dukungan Blogger atau di Grup Bantuan Blogger, harap:

    Uraikan apa yang Anda lakukan ketika menemui kesalahan ini.
    Berikan kode kesalahan berikut.

    bX-pp9c9u

    Informasi ini akan membantu kami melacak dan mengatasi masalah Anda! Maaf atas ketidaknyamanan ini.
    Apa maksudnya gan makasih,

    BalasHapus
  41. keren banget...sederhana dan mudah,,makasih gan atas tipsnya..semoga sukses

    BalasHapus
  42. saya mau coba pasang di blog saya yang baru.

    BalasHapus
  43. @DIIKA SCURITY: coba agan log out dulu, setelah itu bersihkan riwayat/history browsingnya dan keluar dari layar browsing (chrome, ffox, opera). Setelah mulai browsing lg dan buka akun bloggernya gan. Pasti bisa.
    kejadian seperti itu dikarenakan sebelumnya agan buka akun blogger yag lain sehingga masih meninggalkan riwayat browsing (cache).

    BalasHapus
  44. Mantap bro..
    Thx yo..
    Jgn lupa kunjungi http://voip2012.blogspot.com

    BalasHapus
  45. Lumayan sih bro.. mampir lapak ane di www.equalztnero.com ya.. kita tukeran link, :)

    BalasHapus
  46. aku sudah coba tapi kok barisnya vertikal, bagaimana caranya agar tampak horisontal memanjang, lalu ngisi teksnya bagaimana? pertanyaan terakhir gimana caranya ngisi blog dengan musik biar orang yang mengunjungi kita pada enjoy
    thank you

    BalasHapus
  47. Mantep banget deh.. Lancar banget udah lama pake tips dari blog ini.. :)

    BalasHapus
  48. udah di coba lanfgsung hasil y sukse

    BalasHapus
  49. keren gan
    akhri nya bisa juga buat nya

    BalasHapus
  50. :)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( =))

    BalasHapus
  51. Produk dijamin asli
    TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI http://tilla-shop.blogspot.com/
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

    Dijual

    Ready Stock !
    BlackBerry 9380 Orlando - Black
    Rp.900.000,-

    Ready Stock !
    BlackBerry Curve 8520 Gemini
    Rp.500.000,-

    Ready Stock !
    BlackBerry Bold 9780 Onyx 2
    Rp.800.000,-

    Ready Stock !
    Blackberry Curve 9320
    Rp.700.000,-

    Ready Stock !
    Samsung Galaxy Tab 2 (7.0)
    Rp. 1.000.000

    Ready Stock !
    Samsung Galaxy Nexus I9250 - Titanium Si
    Rp.1.500.000,-

    Ready Stock !
    Samsung Galaxy Note N7000 - Pink
    Rp.1.700.000

    Ready Stock !
    Samsung Galaxy Y S5360 GSM - Pure White
    Rp.500.000,-

    Ready Stock !
    Nokia Lumia 800 - Matt Black
    Rp.1.700.000,-

    Ready Stock !
    Nokia Lumia-710-white
    Rp. 900.000,-

    Ready Stock !
    Nokia C2-06 Touch & Type - Dual GSM
    Rp.450.000,-

    Ready Stock !
    Nokia Lumia 710 - Black
    Rp. 900.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari XL) - Black
    Rp.1.200.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari Telkomsel)
    Rp.1.200.000,-

    Ready Stock !
    Apple iPod Touch 4 Gen 8GB
    Rp.700.000

    Ready Stock !
    APPLE iPod Nano 8GB - Pink
    Rp.500.000,-

    Ready Stock !
    Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
    Rp 1.300.000

    Ready Stock !
    Acer Aspire S3-951-2364G34iss
    Rp. 1.200.000,-

    Ready Stock !
    Acer Aspire 5951G Core i7 2630 Win 7
    Rp. 2.500.000,-

    Ready Stock !
    Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
    Rp. 2.500.000,-

    Ready Stock !
    Nikon D7000 kit 18-105mm
    Rp.1.700.000

    Ready Stock !
    Nikon D90 Kit 18-105mm Vr
    Rp 1.300.000

    Ready Stock !
    Nikon Coolpix L 120 Red
    Rp. 900.000

    Ready Stock !
    Nikon Coolpix P 500 Black
    Rp 1.000.000

    BalasHapus
  52. Trimakasih pencerahanya...
    Satu lagi gan.. Trus cara Ngisi menu tersebut dengan artikel gmn gan? Trim's sbelumnya.

    BalasHapus
  53. Keren Om :* Saya Suka Jgn Lupa Mampir
    Hardiansyah Putra6.Blogspot.com

    BalasHapus
  54. Ini yang saya cari selama beberapa hari ini. Semoga nilaiku bagus.

    BalasHapus
  55. Ini dia yang dicari-cari infonya, makasi Min, ntar mau langsung dicoba, new comer pake yang simple dulu biar gak puyeng ^_^ .. Skali lagi Thx ya for sharing this tutorial..

    BalasHapus

Berlangganan via Email