MEMBUAT MENU NAVIGASI HORIZONTAL




Mungkin sobat sudah tidak asing lagi dengan yang namanya menu horizontal. Di sini saya akan membuat sebuah menu navigasi horizontal secara sederhana yang tentunya lebih mudah di terapkan pada sebuah template. Menu ini biasanya terletak di bawah header.
Di bawah ini adalah gambar menu navigasi horizontal yang akan kita buat.

Kita langsung saja menuju bagaimana cara membuatnya.

  • Masuk ke blog sobat
  • Pilih tata letak atau rancangan.
  • Klik tambah gadget.
  • Pilih HTML/Java Script.
  • Kemudian masukkan kode di bawah ini.
    <style type="text/css">
    /*----------------------------------*/
    .Nav a { width: auto; height: auto; text-decoration: none; }
    .Nav a { text-align: center; text-decoration:none;color:#ffffcc; padding:1px 20px 1px 20px;font-weight:bold; font-size:12px; }
    .Nav a:hover {padding:3px 20px 3px; 20px; text-align:center; text-decoration:none; color:#000033; font-weight:bold; border:3px; background-color: #000000;}
    </style>
    <div style="border: 3px solid #ffcc99; height:px;background-color:#FF3366;">
    <div style="width: auto; padding: 10px;" class="Nav" align="left">
    <a href="http://activekita.blogspot.com"target="_blank"><span style="font-weight:bold; color:#FFFF00; ">HOME</span></a>
    <a href="http://activekita.blogspot.com/2010/01/kode- warna.html"target="_blank"><span style="font-weight:bold;color:#FFff00;">JUDUL1 </span></a>
    <a href="http://activekita.blogspot.com/2010/08/menambah-satu-kolom-di-bawah-header.html"target="_blank"><span style="font-weight:bold; color:#FFff00;">JUDUL 2</span></a>
    <a href="http://activekita.blogspot.com/2010/10/membuat-menu-navigasi-horizontal.html"target="_blank"><span style="font-weight:bold; color:#FFff00;">JUDUL 3</span></a>
    <form action="http://activekita.blogspot.com/search" id="searchform" method="get" style="display: inline; float:right; padding-right:10px; padding-bottom:px" > <input id="searchbox" maxlength="" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" value="Search..." type="text" /> <input class="btn" name="" " value="search" type="submit" span style="font-weight:bold; font-size:12px; color:#ff3399" />
    </form>
    </div></div>

  • Ganti yang warna hijau dengan alamat link milik sobat. Bila perlu sobat bisa tambah dengan link sobat yang lain.
    Jangan lupa isi juga keterangan yang sesuai pada judul.
  • Klik simpan.
Dan sobat bisa lihat hasilnya.

22 komentar:

  1. thanks bos infonya :)
    keep postingh ya :)

    BalasHapus
  2. Berkunjung mas, dan thanks banget atas informasi tentang menambah menu navigasi horizontal nya, berguna banget :) jangan lupa berkunjung juga ya di blog saya :) http://beautytipstrick.blogspot.com/

    BalasHapus
  3. ok, trus lanjutin bikin drop downnya gemana???
    bantu info donk....
    dah browsing tapi gagal mulu..

    BalasHapus
  4. asooy gan...tapi saya mau ganti warnanya gimana ya??

    BalasHapus
  5. bagus gan... perfect!!!!

    BalasHapus
  6. wow bagus juga nih, ane lagi nyari2 menu navigasi yang pas buat blog ane.. :D

    BalasHapus
  7. thanx... udah di coba..dan.... mantap.. I like it

    BalasHapus
  8. Terima kasih pak saya coba bisa tapi saya edit warna sehingga tampil beda sip pokok e

    BalasHapus
  9. thank you ya mas kapan - kapan mampir ke blog aku ya .

    BalasHapus
  10. Anonim10:23 PM

    Bro bisa buat menu navigasi kayak di Indowebster gk??
    Itu yang floating dan hovernya bekerja saat di scroll ke bawah..
    Kayak gambar yg ada di link ini bro..

    Gambar Sebelum Di Scroll Ke Bawah

    Gambar Sesudah Di Scroll Ke Bawah

    kloq bisa share donk....

    BalasHapus
  11. Siiip gan…mantep banget informasinya,..
    membantu banged ni buat saya yang lagi buat web perdana
    oke gan….mohon like dan comment balik yooo,..thx U :D

    BalasHapus
  12. mantaaaps, jadi bisa lebih banyak buat menu deh :D

    BalasHapus
  13. terimakasih informasinya..

    BalasHapus
  14. kalo mau nambahin JUDUL 4 gimana yah....
    tinggal dicopy aja yg diatasnya atau ada yg beda ???
    mohon bantuannya...


    http://10musikhariini.blogspot.com

    BalasHapus
  15. Mungkin kisah masa kecil kalian sama kaya kisahku baca ya sob http://uripkudewek.blogspot.com/

    BalasHapus
  16. Your blog posts are more interesting and impressive. I think there are many people like and visit it regularly, including me.I actually appreciate your own position and I will be sure to come back here.
    brtaram

    BalasHapus
  17. Casino & Resort - MapYRO
    The only 동해 출장마사지 place in 대전광역 출장샵 Washington state to enjoy 서울특별 출장샵 gaming and entertainment, this 양산 출장샵 beautiful 정읍 출장마사지 hotel and casino is set 2.6 miles from Washington D.C. and is 3.8 miles

    BalasHapus