Vertikal menu biru

Hemm judulx kurang keren nih kayakX tapi gak papalah dari pada bingung mau kasi judul apa intinya Membuat menu vertikal menunya nemu di blog varadesigns mungkin menunya biasa - biasa aja ya tapi bagiQ keren menunya, silahkan lihat demonya

DEMO

Cara buatnya gampang Anda tinggal nambah Gadget HTML/Javascript caranya:

1. Masuk ke blog anda
2. Klik Rancangan / Tata Letak
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukin kode di bawah ini di kolom bagian bawah

<style type="text/css">
#navlist {
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin-left: 0;
width: 12em;
font: normal 0.8em Verdana, sans-serif
}

#navlist li {
list-style: none;
margin: 0;
font-size: 1em
}

#navlist a {
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em
}

#navlist a#current {
border-color: #5bd #035 #068 #cc0
}

#navlist a {
width: 99%;
}

#navlist a {
width: 9.6em;
}

#navcontainer > #navlist a {
width: auto;
}

#navlist a:hover, #navlist a#current:hover {
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 0.4em 0.35em 0.25em 0.9em
}

#navlist a:active, #navlist a#current:active {
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em
}
</style>

<div id='navcontainer'>
<ul id='navlist'>
<li id='active'><a href='Link Anda' id='current'>Item one</a></li>
<li><a href='Link Anda'>Item two</a></li>
<li><a href='Link'>Item three</a></li>
<li><a href='Link'>Item four</a></li>
<li><a href='Link'>Item five</a></li>
</ul>
</div>

6. Ganti kata Link dengan Alamat Link Anda.
7. Klik SIMPAN.

Baca Juga Yang Lainnya: