Membuat Menu Naviasi Horizontal

Posting kali saya akan menjelaskan cara membuat menu navigasi horizontal secara sederhana yang tentunya mudah diterapkan. Tanpa basa basi lagi kita langsung saja menuju bagaimana cara pembuatanya…

      1.      Pertama kita masuk ke blog dulu.

      2.      Pilih tata letak atau rancangan.

      3.      Klik tambah gadget.

4.   Pilih HTML/Java Script.

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

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

      7.      Kemudia simpan dan lihatlah hasilnya…

SEMOGA BERMANFAAT