Tutorial Membuat Horizontal Navigasi | Tutorial blog

Saya banyak belajar dari blog yang satu ini, begitu bermanfaat dan berguna sekali buat saya sebagai pemula di dunia perBlogger'an. Wkwkwkwk...bahasanya aneh...gpp lah...

Disini saya akan tulis ulang apa yang ada di kolom-tutorialnya Kang Rohman. Yaitu mengenai Cara Membuat Menu Navigasi Horizontal.

Langsung saja kita Login ID Blogger kita, pilih Rancangan, pada Edit Html beri tanda centang Expand Widget Template.

Carilah kode ]]></b:skin>

Setelah ketemu copy pastekan kode berikut tepat diatas ]]></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;
    }

Lalu pada bagian bawah kamu cari kode seperti 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>

Kalau sudah ketemu copy pastekan kode berikut persis di bawah kode tadi

<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://agungpatiwidagdo.blogspot.com/'>home</a></li>
<li><a href='http://agungpatiwidagdo.blogspot.com/2011/02/kode-warna-html_4153.html/'>kode warna</a></li>
<li><a href='http://agungpatiwidagdo.blogspot.com/2011/03/my-favorite-blog.html/'>my favorite blog</a></li>
<li><a href='http://astore.amazon.com/agungwidagdo-20/'>belanja online </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 -->

Kira-kira seperti itulah apa yang di cetak merah kamu bisa sesuaikan dengan kebutuhan blog kalian.

Selamat Mencoba

Baca Juga :