menu horizontal blogg

Style Nav : O-OM template

Untuk Blogger.com

1. Login di Blogger
2. Rancangan » Edit HTML » Expand Template Widget
3. Cari ]]></b:skin>
4. Letakan kode CSS berikut, diatasnya

#nav { background:url(“http://3.bp.blogspot.com/_C6KkooKXCEw/TICgsEwQ6VI/AAAAAAAAGzc/uKEKlKRK6mY/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; }

NB : Kamu bebas mengganti seperti warna background, ukuran lebar, dll sesuai selera kamu!
5. Untuk meletakanya di dalam template, cari kode : <div id=”header-wrapper”>
   kalau tidak ada, coba pakailah add-ons mozilla FIREBUG! untuk mempermudahnya
6. Setelah itu, pastekan kode HTML berikut di bawah kode tadi. Ini kode HTML-nya :

<div id=”nav”> <div id=”nav-left”> <ul> <li><a href=”#“><img border=”0″ style=”padding: 0px;” src=”http://2.bp.blogspot.com/_C6KkooKXCEw/TIKt4PnR_DI/AAAAAAAAG1M/fYAOYZ43bys/s200/icon-home.png”></a></li> <li><a  href=”#“>About Me</a></li> <li><a  href=”#“>Archives</a></li> <li><a  href=”#“>Contact</a></li> <li><a  href=”#“>Help Me</a></li> <li><a href=”#“>Guest Book</a></li> <li><a href=”#“>Testimonials</a></li> <li><a  href=”#“>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=”http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png”> </form> </div> </div> </div> </div>

NB : Ubahlah warna merah atau nama menu + URLnya sesuai kebutuhan kamu, seperti Contact, About Me, kamu dapat bebas menggantinya!
7. Selesai, dan Simpan Template, semoga berhasil!!
8. Semoga Bermanfaat