Cara membuat menu navigator vertikal

Nah sebelumnya saya pernah mempostingkan cara membuat menu navigartor horizontal, dan sekarang saya akan mempostingkan cara membuat menu navigator vertikal, perbadaan menu navigator horizontal dengan vartikal adalah jika menu navigator hotizontal memanjang ke samping dan jika menu navigator vertikal memanjang kebawah, itu perbadaan menu navigasi horizontal dan vertikal.

jika lalian ingin mencoba membuatnya lihat langkah-langkahnya dibawah:

1. masuk ke blogger kalian
2. setelah masuk ke dasbor kalian, pilih opsi lalu pilih template
3. kemudian kalian pilih edit html
4. cari code ]]></b:skin>
5. kemudian copy code CSS dibawah ini diatas code ]]></b:skin>

Klik show untuk melihat

/*Vertikal Menu---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*warna dari menu vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}

6. setelah selesai klik save template
7. setelah proses di atas selesai kalian masuk ke tata letak kemudian add gadget dan cariHTML/JavaScript
8. kemudian kalian copy code dibawah ini:

<ul class="vertikalmenu">
<li><a href="http://sahabatbloggerr.blogspot.com/search/label/Arti%20mimpi">» Arti mimpi</a></li>
<li><a href="http://sahabatbloggerr.blogspot.com/search/label/Kata%20kata">» Kata kata</a></li><li><a href="http://sahabatbloggerr.blogspot.com/search/label/Puisi">» Puisi</a></li>
<li><a href="http://sahabatbloggerr.blogspot.com/search/label/Software">» Software</a></li>
<li><a href="http://sahabatbloggerr.blogspot.com/search/label/Tips%20Trik%20blog">» Tips trik</a></li>
<li><a href="http://sahabatbloggerr.blogspot.com/search/label/Tutorial%20PhotoShop">» Tutorial</a></li>
</ul>

Perhatian :

• code yang berwarna kuning adalah link yang kalian pasang
• code yang berwarna hijau adalah teks tampilan link nya

sekian Cara membuat menu navigator vertikal, mudah"an bisa bermanfaat bagi kalian semua
terima kasih..