Sabtu, 15 September 2012

Menu Vertikal Warna Biru

Blue Vertikal Menu

Saya nemu Menu Vertikal Simple tapi Bagus nih...
Copas dari System Of Blog /hehe . Gapapa kan ? yang penting Usaha :P
Mungkin menunya biasa - biasa aja ya , tapi bagi saya sih bagus ini , silahkan lihat demonya

DEMO

Cara buatnya gampang , Anda tinggal tambah Gadget HTML/Javascript.
Caranya :

1. Masuk ke blog anda
2. Klik Rancangan / Tata Letak
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan 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;
font: normal 0.8em Verd
width: 12em;ana, 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.

Sumber : System Of Blog
 dan
Dikutip dari : vertikal-menu-biru.html

Tidak ada komentar: