Cara Membuat Navigation Menu Vertikal

Bagaimana sich cara membuat Navigation Menu Vertikal yang terlihat seperti pada gambar di samping,... begini caranya,...

Langkah Pertama :
Login ke blogger trus pilih "Layout Edit HTML"

Langkah Ke dua :
Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS.

Kode CSS

<style type='text/css'>
#kotakvertical {
 width: 15.1em;
 border: 1px solid none;
 padding: 0 0 1em 0;
 margin-bottom: -1em;
 font-family:normal;
 font-size:20px;}
#kotakvertical ul {
 list-style: none;
 margin: 0;
 padding: 0;
 border: 0;}
#kotakvertical li {
 border-bottom: 2px solid white;
 margin: 0;
 list-style: none;
 list-style-image: none;}
#kotakvertical li a {
 display: block;
 padding: 5px 5px 5px 0.5em;
 background-color: #fff;
 color: #2175bc;
 border:1px solid #2175bc;
 text-decoration: none;
 width: 100%;}
#kotakvertical li a {
 width: 100%;}
#kotakvertical li a:hover {
 width: 100%;
 border: 1px solid #2175bc;
 background-color: #2175bc;
 color: #fff;}
</style>

Langkah Ke tiga :
Copy kode Berikut, Tambahkan Gadget HTML/javascript di sidebar kanan atau kiri

Kode HTML

<div id='kotakvertical'>
<ul>
<li><a href='#'>MENU 1</a></li>
<li><a href='#'>MENU 2</a></li>
<li><a href='#'>MENU 3</a></li>
<li><a href='#'>MENU 4</a></li>
<li><a href='#'>MENU 5</a></li>
<li><a href='#'>MENU 6</a></li>
</ul>
</div>

Langkah Ke Empat :
Jangan lupa di save, terus lihat hasilnya.