Cara Membuat Menu Navigasi Horisontal di Blog

Cara Membuat Menu Navigasi Horisontal di Blog Menu Navigasi pada blog merupakan hal yang penting bagi sebuah Blog terutama bagi Blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Umumnya, para blogger menggunakan fungsi menu navigasi horizontal untuk dipasang di blognya. Pada artikel kali ini Gw akan membahas tentang petunjuk pemasangan menu navigasi ini pada template blog blogger maupun wordpress.org.

Pada kali ini, Gw akan membahas tentang menu navigasi horizontal, langsung saja yak!

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(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPynPZiBs1W4_8X76eEgUc3taNlrZ88Z4J5H6zBZ-Ey6tVGhtNkIyREkdFAiczU_gLLvPHkU6E8akpQ_KIuYF9BlQPEvPQlFF7erM-3CiTR5uboIfbcXgQeeLPuCHcdr3DB24EGibs96Py/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”>
   
6. Setelah itu, simpan code HTML dibawah ini ke bawah kode <div id=”header-wrapper”>

<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/AVvXsEhJeW1r0rYzqIhpgbJzqqB1tOsXjlciJv74E7lA3w58AMR4eLc79LPaWNkczV55GbKKT_KQAeqo7YHhDxAb9aegRTxX1vpdG2pNXE7NDqs8z-KAnYJt6kD1fjJX1RHAbIn6cBU4q8lvExof/s200/icon-home.png”></a></li>
<li><a  href=”URL“>menu teks</a></li>
<li><a  href=”URL“>menu teks</a></li>
<li><a  href=”URL“>menu teks</a></li>
<li><a  href=”URL“>menu teks</a></li>
<li><a href=”URL“>menu teks</a></li>
<li><a href=”URL“>menu teks</a></li>
<li><a  href=”URL“>menu teks</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/AVvXsEiJqbP9cpqabkonoE1VXAQaA7R_NHsqosFpE_SEsS3cMDaVL-Wq0wI-5xckvbiuprS2H2Y7KFYvPCFWKwUmtdK1ApH3ctA9wfE7qGADf9FnAid8y0pBk85MqO54SRfPSHKRiut-UpVQZzg/s200/search-c.png”>
</form>
</div>
</div>
</div>
</div>

Ganti tulisan yang bewarna merah dengan nama menu yang kalian mau dan isikan URL nya

Ok gw harap artikel ini bisa membantu kalian