Cara buat navigasi bar pada blog sederhana

Tombol navigasi adalah tombol yang berfungsi sangat penting dalam sebuah web/blog. Tombol navigasi berfungsi sebagai bantuan bagi pengunjung blog agar bisa mengarahkan ke links tertentu sehingga nantinya pengunjung atau pengguna situs bisa dengan mudah mengendalikan navisai ketika sedang membukanya.
Nah kali ini kita akan membahas cara membuat tombol navigasi horizontal sendiri sebab seringkali kita menjumpai templates/themes bagus tapi masih adah kekurangan dalam hal tombol navigasi alias tidak ada tombol navigasinya.
Caranya gan,
   1. Login di Blogger
   2. Rancangan » Edit HTML » Expand Template Widget
   3. Cari ]]></b:skin>
   4. Letakan kode CSS berikut tepat diatasnya

#nav {
background:url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5UpuKt1_m5gDOnwwjGMBf6LoitRICYpapqDHLrXvolHPlg4WeyASrw8ha01K3MWXxlcFqq7VkTucTfSlLOIJls48bJfo2xyXye92iV6rTYDoJtd6d6w2XboA-4DWYYwOBEp0Jaw7Nw-Jy/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;
}

5. Ganti warna background, ukuran lebar, dll sesuai selera
6. Setelah itu, paste kode HTML berikut di 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/AVvXsEgDrGHjcU55IYcZ5AlCgC8P9JIkZCuMuM1ItwtX1l2nRc5VUGYyJqzCs7mgH-aiYJcxEvP8hqn_IBxDOI-SzbqO4MZZg-ifiDni2d7tHTQ-rLayHjJa3Ymaaxq-7SusbVAErHudMV7-BeYr/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 == "Cari artikel..") {this.value = ""}” onblur=”if (this.value == "") {this.value = "Cari artikel..";}” 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/AVvXsEic4-15jZbkTD2F07c4UDIAHNZz1lkBHBLCMJ8Q_jwX5qlPKS2gMwRLmX4OSiya0userwqbRBpRic2toThSqYkguhWPCTy61mb1dA5L6EdNKVfrPWxl1ghil2dMsCsLF0ZQHmEZEdaIkwI/s200/search-c.png”>
</form>
</div>
</div>
</div>
</div>