Navigasi Menu Vertical

 M

ari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.kaslohmenu, .kaslohmenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.kaslohmenu li{
position: relative;
}
.kaslohmenu li a{
background: white url('gambar') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.kaslohmenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.kaslohmenu  li ul li{
float: left;
}
.kaslohmenu li ul a{
width: 180px;
}
.kaslohmenu  li a:visited, .kaslohmenu li a:active{
color: white;
}
.kaslohmenu  li a:hover{
background-image: url('gambar');
}

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="kaslohmenu">
<li><a href="/">Home</a></li>
<li><a href="http://www.kasloh.co.cc">Blogger</a></li>
<li><a href="http://tanahsakti.blogspot.com" >Youtube</a></li>
<li><a href="http://www.kasloh.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.