Membuat Menu Horizontal pada blog

Dalam tampilan weblog tanpa adanya menu horizantal kayaknya kurang bagus dilihat.
Silahkan bagi blogger yang mau membuat menu horizontal.





Berikut langkah-langkahnya ;

1. Login ke blogger
2. Pilih Tata Letak - Edit HTML
3. Centang "Expand Template Widget" Jangan lupa dowload template anda untuk berjaga-jaga.
4. cari kode ]]></b:skin>
5. Kopas kode berikut diatasnya

#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;

}

Penting :
sesuaikan lebar dan tinggi menu horizontalnya (ditandai dengan warna biru)
silahkan juga sesuaikan warna-warnanya. Anda bisa melihat pilihan warna kode HTML disini


Seterusnya 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'/>

    ... dan seterusnya ...

    </b:section>
    </div>

Kemudian taruh kode berikut dibawah </b:section> atau </div> sesuai dengan template anda.

    <div id='bg_nav'>

    <div id='navleft'>

    <div id='nav'>

    <ul>

    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

    <li><a href='http://Link_yang_dituju'>Add Link</a></li>

    <li><a href='http://Link_yang_dituju'>Add Link</a></li>

    <li><a href='http://Link_yang_dituju'>Add Link</a></li>

    <li><a href='http://Link_yang_dituju'>Add Link</a></li>

    </ul>

    </div>

    </div>

    <div id='navright'>

    <form action='http://Alamat_Blog_Kamu.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><!-- akhir bg_nav -->

Untuk mudahnya gunakan dulu Pratinjau untuk melihat hasilnya.

http://gobelan.blogspot.com