Cara Mudah Membuat Menu Horizontal Di Blog

<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>

• Lalu Simpan Template.
• Lanjut lagi sob... kalo dilihat pasti menunya bukan horisontal tapi vertikal, hehee.. Nah untuk itu kita perlu menambahkan kode css, agar menu menjadi horisontal dan lebih menarik tentunya.
• Masih pada bagian Edit HTML, dan carilah kode: ]]></b:skin>
• Lalu copy paste kode dibawah ini tepat diatas kode: ]]></b:skin>

/*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}

• menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
• menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
• menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
• menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.
• Setelah itu sobat jg perlu merubah pada kode berikut (ini kode pada langkah diatas):

<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>

<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Tutorial Website</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div>