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.



21 komentar:

Skynet Cyber Cafe mengatakan...

;) nice post gan ...

Let's Share Together mengatakan...

thanks bos infonya :)
keep postingh ya :)

Via-91 mengatakan...

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/

yudhihary mengatakan...

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

syaefudin hanya manusia biasa mengatakan...

THANKS BOZZZZZ

Jakasalim mengatakan...

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

eL-Vickry mengatakan...

bagus gan... perfect!!!!

Cucunguk Rieut mengatakan...

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

Ahmad Suhaimi mengatakan...

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

Area Infoku mengatakan...

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

fajar ardiansah mengatakan...

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

fchords mengatakan...

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....

Anjas Kumbara mengatakan...

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

Jasa SEO mengatakan...

mantaaaps, jadi bisa lebih banyak buat menu deh :D

Aan Apk mengatakan...

thank bro

blogwalking
http://indexiapk.blogspot.com

Aura Shafira mengatakan...

terimakasih informasinya..

eka kurniawan mengatakan...

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


http://10musikhariini.blogspot.com

kuswanto mengatakan...

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

amin raha mengatakan...

Tingkatan penyakit hernia
Beberapa Penyebab Penyakit hernia
Cara mudah mencegah hernia
Penyakit hernia
Penyakit hernia berdasarkan letaknya
Penyakit hernia
Penyakit hernia
cara herbal mengobati hernia
Sirine patwal
bel sekolah murah
Game Naruto Shipuden Ultimate Ninja Storm 4 PC
Jual Hardisk Murah
jual game pc

Qq Zynga mengatakan...

Agen poker online
Agen Poker Terpercaya
Agen poker
agen domino
Poker Online Indonesia

Thu LĂȘ mengatakan...

I was very impressed by this post, this site has always been pleasant news. Thank you very much for such an interesting post. Keep working, great job! In my free time, I like play game: superfighters2.net. What about you?

:) :( ;) :D ;;) :P :-* :-o :(( =)) ~x(
Posting Komentar