Making Simple Horizontal Menu

1. Login to your blog

2. Go to layout click it

3. Click Edit Html button

4. Copy paste the code below

menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}

.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}

.menuhorisontal li{
display: inline;
margin: 0;
}

.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}

.menuhorisontal li a:visited{
color: white;
}

.menuhorisontal li a:hover, .menuhorisontal li.selected a{background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}

5. Put it above ]]></b:skin> code

6. Find this code :

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Title (Header)' type='Header'/>
</b:section></div>

6. Copy and paste code below, then put it below the code before

<div id="'footheader'">
<b:section class="'footheader'" id="'footheader'" preferred="'yes'">
</b:section>
</div>

8. Save

9. Go back to lay out menu

10. Click add a gadget

11. Chose HTML/ Java script

12. Copy and paste code below

<div class="'menuhorisontal'">
<ul>
<li><a href="'/'">Home</a></li>
<li><a href="'Label">Link </a></li>
<li><a href="'Label">Link</a></li>
<li><a href="'Label">Link</a></li>
</ul>
</div>

13. Save

Its easy isn't it ?