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:

Skynet Cyber Cafe mengatakan...

;) nice post gan ...

Let's Share Together mengatakan...

thanks bos infonya :)
keep postingh ya :)

Beauty Tips and Tricks 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??

vickry.setyo mengatakan...

bagus gan... perfect!!!!

Cucunguk Rieut mengatakan...

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

Unknown 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

Unknown mengatakan...

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

Anonim 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

Unknown mengatakan...

thank bro

blogwalking
http://indexiapk.blogspot.com

Unknown mengatakan...

terimakasih informasinya..

Unknown 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/

ngocanhng mengatakan...

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

Bandar Bola Online mengatakan...

http://blogaudy.xyz/
http://agentogel.co.id/
http://togelonline.co.id/

http://www.fondazioneoat.it/taonews/index.php?option=com_k2&view=itemlist&task=user&id=432578

Unknown mengatakan...

nice article . thanks.

geometry dash

qubilahdada mengatakan...

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

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