Cara Membuat Menu Horizontal

Pasti kamu dah pada tau,saat ini dah banyak banget blog yang make menu horizontal,kenapa ya???Mungkin jawabannya lebih praktis,gampang ato bisa juga lebih gaul and keren.Tapi bukankah saat kita membuat blog kita tidak menemukan template yang menyediakan menu horizontal???Betul..betul..betul...
Trus gimana caranya biar blog kita menunya menjadi hirozontal???
Okelah kalo begitu...Pada kesempatan kali ini,setelah pulang kerja,belum nyampek rumah..Saya sempetin buat berbagi sedikit ilmu yang saya dapet dari mbah google kepada sobat - sobAT sekalian...
*Pertama tama pastinya harus dah login pada blog sobat sekalian...
*Kemudian Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
*Kemudian cari kode ini : ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.
Tips : Kalau sobat susah mencarinya, coba tekan ctrl tahan kemudian tekan F di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* 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;
Kemudian silahkan sobat cari kembali kode seperti di bawah 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'/>
............................dan seterusnya...................................................
</b:section>
</div>
Copas kode berikut tepat di bawah kode </b:section> atau </div> (sesuaikan dengan template blog kamu).
<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 -->

Sebelum di save sebaiknya pratinjau terlebih dahulu untuk meyakinkan.
Setelah sukses pastinya jangan lupa Di save....
Wah coba liat blog kamu dah keren tu...
selamat ya sobat....
jangan lupa commentnya...
blogger yang baik tentunya harus gitu dunk,OK???
terimakasih atas kunjungannya,sayu tunggu kunjungan sobat kembali ...