Cara membuat menu horizontal

pada kesempatan kali ini saya ingin memposting sebuah artikel yang berjudul cara membuat menu horizontal,setelah tadi menu melayang sekarang yang horizontalnya..
sudah tahu belum apa itu menu horizontal?

menu horizontal itu adalah menu navigasi yang apabila kita pilih kita akan menuju alamat yang telah di tentukan di menu horizontal tersebut,,
contoh :

sudah tahu kan?
baiklah langsung saja kita mulai tutorialnya. . .

1. Masuk dulu ke blog teman masing masing
2. lalu pilih Rancangan
3. dan pilih Edit Html dan centang expand widget template
4. lalu teman cari kode ]]></b:skin>,tekan F3 agar gampang mencarinya
5. lalu letakkan kode html berikut di atas ]]></b:skin> tadi..

#nav {

background:url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-AuPDx0v4Xug360lqkjWCi2soOaz3pc8nQ6g6HXevPgHeI9a0o70MKmeywjVErxZmW0pEHLad67u22heWmdTShmoXgr9SbSh0E2AfkJ-TpvF7WKgSp_QaUg7NQLIy6098sIH5WP28_1I3/s1600/topmenu-c.png”) no-repeat scroll 0 0 #FFFFFF;

clear:both;

height:32px;

margin:0 auto;

padding:4px 0 0;

}

#nav-left {

display:inline;

float:left;

padding-left:6px;

padding-top:1px;

width:660px;

}

#nav-right {

display:inline;

float:right;

padding-right:15px;

padding-top:3px;

width:200px;

}

#nav ul {

font:bold 1em Verdana,Arial,Helvetica,sans-serif;

margin:0;

overflow:hidden;

padding-left:0;

position:relative;

}

#nav ul li {

float:left;

list-style:none outside none;

}

#nav ul li a, #nav ul li a:visited {

color:#FFFFFF;

display:block;

margin:1px 4px;

padding:4px;

text-decoration:none;

}

#nav ul li a:hover {

-moz-border-radius:3px 3px 3px 3px;

background-color:#999999;
color:#FFFFFF;

margin:1px 4px;

padding:4px;

}

#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover {

-moz-border-radius:3px 3px 3px 3px;

background-color:#999999;
color:#FFFFFF;

margin:1px 3px;

padding:4px;

}

PENTING !!

 yang berwarna hijau adalah kode warna,teman bisa menggantinya dengan kode warna lain yang bisa di lihat disini Kode - kode warna

dan angka angka yang ada adalah ukuran ukuranya,itu bisa teman ganti sesuai tema blog teman..

 6. bila sudah copy paste kode" html di atas,lalu cari lagi kode ini <div id=”header-wrapper”>
7. kalau sudah ketemu,copy lagi kode" html di bawah ini di bawah kode <div id=”header-wrapper”> tadi..


<div id=”nav”>
<div id=”nav-left”>
<ul>
<li><a href=”#“><img border=”0″ style=”padding: 0px;” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjawkMGiNGmwWI1wOpa8xm93OD0kGWTXkZswJk-dUG7d_UddutaSG6g6N2r_Zl3cw_bC_qtL_9fliIGcBNhqvpft7vQ6RzF5DvkdLE1GeyY3IyscFNpo4khvytuaCUk3gar9NLL-CO7AtLc/s200/icon-home.png”></a></li>
<li><a  href=”URL KAMU“>About Me</a></li>
<li><a  href=”URL KAMU“>Archives</a></li>
<li><a  href=”URL KAMU“>Contact</a></li>
<li><a  href=”URL KAMU“>Tips</a></li>
<li><a href=”URL KAMU“>Guest Book</a></li>
<li><a href=”URL KAMU“>Testimonials</a></li>
<li><a  href=”URL KAMU“>Top Post</a></li>
</ul>
<script language=”javascript”>setPage()</script>
</div>
<div id=”nav-right”>
<div id=”tsrc-m”>
<div id=”src-m”>
<form name=”searchform” method=”get” id=”searchform” action=”/search”>
<input type=”text” value=”Cari artikel..” onfocus=”if (this.value == &quot;Cari artikel..&quot;) {this.value = &quot;&quot;}” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel..&quot;;}” name=”q” id=”s-m” class=”keyword”>
<input type=”image” style=”border: 0pt none; vertical-align: top; padding-top: 3px;” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidACV4mX9J05x12cte2SA6CHAJKfCmRAeQfCoba2LDn-M1TFjhmr_gaSlaMdD-Q-epXUO8Kv57DopismGdj0KsKHLZKA5Gyl8SLrO8Uo2_gUGdSWmRniDR-S0h9H_9l1KoiM2Ar6DDSFk/s200/search-c.png”>
</form>
</div>
</div>
</div>
</div>


PENTING !!!

yang berwarna hijau harus kamu ganti dengan nama judul URL yang ingin kamu masukkan,

dan yang berwarna merah adalah alamat URL yang ingin kamu masukkan,

demikian la tutorial kali ini,,
semoga bermanfaat,
jangan lupa komentar dan likenya..