Menu Vertikal Horizontal

Oke, kita mulai aja pembahasannya :

1. 1. Silahkan login ke blogger dengan ID Anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML
4. Cari Kode kode ]]></b:skin>
5. Copy paste kode berikut persis di atas kode ]]></b:skin>

/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 97%;
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: none;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 630px;
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: 0;
padding: 0;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#nav li {
list-style: none;
margin: 0;
padding: 0;
}

#nav li a, #nav li a:link, #nav li a:visited {
background: #808080;
height: 24px;
color: #fff;
display: block;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: bold;
text-transform: none;
text-decoration: none;
margin: 0;
padding-top:6px;
padding-bottom:-9px;
padding-left:13px;
padding-right:13px;
border-right: 1px solid #000;
}

#nav li a:hover, #nav li a:active {
background: #c0c0c0;
color: #000;
margin: 0;
padding-top:0px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #c0c0c0;
width: 150px;
color: #000;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 1px 10px;
border: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {
background: #000;
color: #fff;
padding: 7px 10px;
}

#nav li {
float: left;
padding: 0;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}

#nav li ul a {
width: 140px;
}

#nav li ul ul {
margin: -32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

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://belajartikblog.blogspot.com/'>Home</a></li>
<li><a href='http://denithul.blogspot.com/'>Artikel</a></li>
<li><a href='http://denithul-downloadmp3.blogspot.com/'>Download Mp3</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.

Ada beberapa yang perlu di sesuaikan. Beberapa di antaranya yaitu lebar dari navigasi, link, keyword yang di inginkan serta yang lainnya.

Beberapa contoh di antaranya :

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

Anda harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template Anda. misal : width:990px.

#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

Yang inipun sama, Anda harus mengubahnya sesuai dengan nilai yang pas untuk template Anda.

<li><a href='http://denithul.blogspot.com/'>Artikel</a></li>
<li><a href='http://denithul-downloadmp3.blogspot.com/'>Download Mp3</a></li>
<li><a href='http://belajartrikblog.blogspot.com/'>Tutorial Blog</a></li>

Anda harus mengubah link yang ada dengan link yang Anda inginkan. Untuk keywordnya pun anda bisa ganti sesuai dengan keinginan.