Tutorial Membuat Horizontal Navigasi

* Langkah Pertama :


1. Silahkan login ke blogger dengan ID anda
2. Klik Tata Letak.

3. Klik Rancangan > Edit HTML. 

4. Cari Kode kode ]]></b:skin>

5. Copy paste kode berikut persis 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. Tuju bagian bawah, lalu cari seperti berikut ini :

<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 paste code berikut persis di bawah kode yang tadi :

 <div id='bg_nav'>

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://www.blogspottutorial.com/'>home</a></li>
    <li><a href='http://forumbagar.blogspot.com/'>My Notes</a></li>
    <li><a href='http://template-unik.blogspot.com/'>Free Template</a></li>
    <li><a href='http://rubrik-elektronik.blogspot.com/'>Electronic Rubric </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><!-- akhir bg_nav -->

 8. Klik tombol SIMPAN TEMPLATE.
 9. SELESAI DAN SEMOGA BERHASIL !

NB: Di langkah No.7 Ganti Link Warna Merah dengan yang anda kehendaki.

Contoh :

<li><a href='URL BLOG ANDA'>home</a></li>
<li><a href=&#039;URL BLOG ANDA'>My Notes</a></li>
<li><a href='URL BLOG ANDA'>Free Template</a></li>
<li><a href='URL BLOG ANDA'>Electronic Rubric </a></li> 

 Sekian Tips Dari saya wassalam .