Cara membuat horizontal navigasi pada blog

Untuk mengatur penampilan blog anda, bisa anda pasangkan Horizontal tab navigasi pada header.Dengan tab navigasi ini anda bisa meletakkan menu-menu yang mengarah kehalaman lain pada blog anda dan memudahkan para pembaca membuka halaman lain tersebut.

Tab navigasi ini akan ditempatkan pada bagian atas blog yaitu pada header. Seperti yang anda lihat pada blog ini, ada beberapa tab menu yang saya pasang seperti Home, Tutorial, dan Engineering. Menu yang dipasang tergantung pada keinginan anda. Cara membuatnya adalah sebagai berikut :

1.Login pada Blogger.
2.Klik Layout pada Dashboard anda.
3.Pada Layout klik Edit HTML .
4.Untuk menghindari hal-hal yang tidak dinginkan saat akan mengedit template HTML anda, lakukan backup terlebih dahulu.

5.Temukan kode </b:skin>
6.Letakkan kode dibawah ini sebelum kode </b:skin>

/* ----- LINKBAR ----- */
#bg_nav {
background: #000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333;
border-bottom: 1px solid #000;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 720px;
float: left;
margin: 0px;
padding: 0px;
}

#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

#navright a img {
border: none;
margin: 0px;
padding: 0px;
}


#nav {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #222;
color: #FFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 1px solid #000;
}

#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#nav li li a:hover, #nav li li a:active {
background: #666;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

7.Temukan kode dibawah ini.

</div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Kumpulan Artikel (Header)' type='Header'/>
</b:section>
    </div>

8.Letakkan kode dibawah ini dibawah kode diatas pada (langkah 7)

<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://bayusp.blogspot.com/'>Home</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/tutorial'>Tutorial</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/engineering'>Engineering</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/download'>Download</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/bisnis online'>Bisnis online</a></li>
</ul>
</div>
</div>
</div>

9.Gantilah link yang berwarna hijau dengan link dari blog anda.

10.Selanjutnya save.
Jreng....tab navigasi menu sudah muncul pada header anda. Untuk mengganti warna background agar sesuai dengan warna template blog anda, rubahlah pada background: #000 . Ganti #000 dengan kode warna yang lain. Kode-kode warna HTML dapat anda lihat disini kode warna pada HTML.

Sumber : disini