Cara Membuat Menu Navigasi Bar Pada Blog

Biasanya menu navigasi terletak dibawah header, berikut cara membuat menu navigasi.

1. Login/Masuk Blogger.

2. Pilih Templete lalu pilih Edit HTML (bila muncul peringatan, abaikan dan klik lanjutkan).

3. Cheklist/centang Expand Template Widget.

4. Aktifkan mode pencarian dengan tombol F3 atau Ctrl + f pada keyboard.

5. Jangan lupa untuk menyimpan Template anda sebelum melakukan               pengeditan  ini dengan mengklik Download  Template Lengkap pada komputer anda.

6. Cari kode ]]></b:skin> dengan mengetik pada mode pencarian, CopyPaste kode dibawah ini diatas kode ]]></b:skin>

/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

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

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 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: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
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. Ganti kode CSS berwarna biru diatas sesuai dengan blog kamu.

8. Letakkan kode dibawah ini tepat di bawah kode </b:section>

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://gforcegt.blogspot.com/' target='_blank'>Home</a></li>
<li><a href='http://www.facebook.com/helmi.arifian' target='_blank'>Facebook</a></li>
<li><a href='http://twitter.com/HelmiArifian' target='_blank'>Twitter</a></li>
<li><a href='https://plus.google.com/105195136236607371744' target='_blank'>Google +</a></li>
<li><a href='http://www.youtube.com/user/eelcell' target='_blank'>Youtube</a></li></ul>
</div>
</div>
<div id='navright'>
<form action='http://gforcegt.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>
</div>

9. Ganti teks berwarna biru sesuai dengan url blog kamu dan simpan templete. Lihat blog kamu.