Membuat Sidebar menu simple

simple sidebar menu

Sebuah menu adalah navigasi yang penting bagi sebuah Website / Blog. Untuk membuat sebuah sidebar menu yang sederhana tidaklah terlalu sulit, cuma mengotak atik beberapa kode HTML dan CSS saja.

Script

<style>
.wrap {
width:100%;
float:left;
list-style: none;
}
.wrap li {
    margin: 0px 10px;
}
.wrap li a:hover {
    background: grey;
    color: azure;
}
.wrap li a:link {
    display: inline;
    padding: 2px 5px;
}
.red{
background:red;
color:white;
padding:5px;
font-size:14pt;
}
.blue{
background:blue;
color:white;
padding:5px;
font-size:14pt;
}
</style>
<div class="wrap">
<div class="red">
Tutorial
</div>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 1</a></li>
<div class="blue">
Download
</div>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 1</a></li>
</div>

Untuk Blogger : caranya tinggal paste di halaman Tata Letak, tambahkan elemen Html / Javascript, paste kode tadi, simpan