Membuat Navigasi Horizontal Pada Blog

[Z-Xp] Wah sudah lama gak sempat update blog, karena ada tugas dari sekolah.. Nah, kali ini saya akan share tentang Membuat Navigasi Horizontal Pada Blog. Perlu anda ketahui bahwa suatu desain pada template sangatlah komplek dan berbeda antara yang satu dengan yang lainnya, memang masih banyak berbagai jenis template blogger yang belum menggunakan menu navigasi.
Mungkin ada yang masih belum tahu seperti apa menu navigasi, coba anda lihat contoh gambar di bawah.

Menu Navigasi

1. Login Blogger.

2. Pada dasbor, klik Rancangan.

3. Klik Edit HTML.

4. cari kode ]]></b:skin>,  tekan Ctrl + F untuk mempermudah pencarian.

5. Letakkan kode di bawah ini di atas kode ]]></b:skin>.

/*  navbar

==================  */

#bg_nav {
    background: #000000;
    width: 660px;
    height: 29px;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    color: #FFFFFF;
    font-weight: bold;
    margin: 0px auto 0px;
    padding: 0px;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    overflow: hidden;
    }
#bg_nav a, #bg_nav a:visited {
    color: #FFFFFF;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0px 0px 0px 3px;
    }
#bg_nav a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    padding: 0px 0px 0px 3px;
    }
#navleft {
    width: 440px;
    float: left;
    margin: 0px;
    padding: 0px;
    }
#navright {
    width: 200px;
    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: #222222;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    border-left: 1px solid #000000
    }
#nav a:hover {
    background: #6e6d6d;
    color: #FFFFFF;
    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: #333333;
    width: 160px;
    float: none;
    margin: 0px;
    padding: 7px 30px 7px 10px;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    }
#nav li li a:hover, #nav li li a:active {
    background: #666666;
    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;
    }

6. Cari kode berikut.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

7. Copy kode di bawah ini kemudian paste / letakkan di bawah kode tadi.

<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://AlamatBlogAnda.blogspot.com/'>home</a></li>
<li><a href='http://AlamatBlogAnda.blogspot.com/'>My Notes</a></li>
<li><a href='http://AlamatBlogAnda.blogspot.com/'>Free Games</a></li>
<li><a href='http://AlamatBlogAnda.blogspot.com/'>Free Software</a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://AlamatBlogAnda.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>
    </div>
</div><!-- End bg_nav --> 

8. Klik Simpan Template.

INFO :
- tulisan berwarna HIJAU untuk mengubah ukuran sesuai template anda.
- tulisan berwarna MERAH untuk mengubah link alamat blog anda.
- tulisan berwarna BIRU untuk mengubah nama menu sesuai keinginan anda.

-Selamat Mencoba-