MENU NAVIGATOR VERTIKAL

Vertikal navigator menu memanjang kebawah (vertikal), menu ini cocok jika dipasang di sidebar karena bentuk menunya memanjang kebawah, lain halnya dengan horisontal menu yang bentuknya menyamping cocok jika dipasang di header.

Disini saya akan coba membuat menu vertikal simple namun stylish dan tidak memakan waktu yang lama untuk loadingnya karena tidak disertai gambar untuk backgroundnya.
oky...kita mulai saja langkah2nya (kayak latihan berbaris aja...heeee)

1. Dasbor blogger anda yaitu ke http://blogger.com
2. Tata letak>>>>klik Edit HTML
3. Masukkan kode css dibawah ini tepat diatas kode ]]></b:skin>

/*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;
}

Perhatikan code yang berwarna merah dan kegunaanya.. atur menurut selera kamu. untuk mencari code warna buka situs www.colorschemer.com/online atau klik DISINI

4. Kalau sudah kemudian SAVE

Langkah selanjudnya

1. Tata letak >>>> Elemen halaman
2. Klik tambah widget >>>>klik HTML/javascript
3. Masukkan kode dibawah ini

<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://san-murep.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://san-murep.blogspot.com">» Bengkelku</a></li>
<li><a href="http://san-murep.blogspot.com">» Islam itu indah</a></li>
<li><a href="http://san-murep.blogspot.com">» Game on line</a></li>
<li><a href="http://san-murep.blogspot.com">» Albunku</a></li>
</ul>

5. Simpan.geser/drag sesuai keinginan anda

Ganti teks yang berwarna merah dengan URL link yang ingin kamu pasang, dan yang berwarna biru adalah text display linknya.

Silahkan sobat2 mencobanya,Smoga berhasil