Membuat Menu Horizontal di Blogger

Menu Horizontal merupakan kumpulan beberapa link yang biasa nya di letakan di bawah header.
menu horizontal berfungsi untuk sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kita.

Ok.. jika birminat langsung ikuti lingkah - langkah di bawah ini untuk membuat Menu Horizontal

-> Login ke account blogger kamu masing - masing
-> Pilih Tata letak -> edit HTML -> centang Expand tempalte widget nya

sedikit saran.. agar jika nantinya kalau terjadi kesalahan sebaiknya terlebih dahulu kamu mendownload semua script template kamu, caranya klik tulisan Download template lengkap

-> next cari code ]]></b:skin> "untuk mempermudah dalam pencarian code na kamu dapat menggunakan (Ctrl+F)dan Copas code berikut ini tepat di atasnya

/* 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;
}

Catatan :

1. Kamu dapat mengatur code yang berwarna hijau agar sesuai dengan template blog kamu

2. Code warna merah adalah untuk warna ,, kamu dapat mengaturnya agar lebih sesuai dengan blog kamu.
untuk lebih detail dalam code warna HTML kamu dapat mengunjungi http://html-color-codes.info/

-> Kemudian cari embali code 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 code berikut ini tepat di bawah code yang berwarna hijau dan merah (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 -->

-> Jika sudah jangan lupa di simpen







SEKIAN & TERIMAKASIH
SALAM DARI NB !

Tweet