Cara Membuat Menu Vertikal Pada Blogspot

Baiklah sobat kita berbagi ilmu lagi sobat. Kali ini mari kita membahas soal Cara Membuat Menu Vertikal Pada Blogspot. Dah tau belum apa itu menu vertikal. Yach hampir sama sich seperti perbahasan kita kemarin tentang Cara Membuat Menu Horisontal Pada Blogspot. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar secara vertikal. Gak usah berlama lama ya. Ayo langsung saja sobat.

Ikuti cara berikut ini :

1.   Sebelum memulai mengedit jangan lupa disimpan dulu ya template punya sobat.

2.   Login ke blogger trus pilih "Layout-->Edit HTML"

3.   Masukkan kode berikut sebelum kode ]]></b:skin> atau </style> sebelum kode. Pokoknya ditaruh di dalam Barisan kode CSS aja yach.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') 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;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}


* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Catatan :

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1 dan blue2). Ganti kode tersebut dengan pilihan warna green1 dan green2 atau red1 dan red2 sobat.

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

<ul id="verticalmenu" class="glossymenu">
<li><a href="http://menu1.com">Menu1</a></li>
<li><a href="http://menu2.com">Menu2</a></li>
<li><a href="http://menu3.com">Menu3</a></li>
<li><a href="http://menu4.com">Menu4</a></li>
</li>
</ul>

Catatan :

Kode yang berwarna orange adalah linknya dan yg warna hijau adalah teks yang ditampilkan. Silahkan Ubah sesuai dengan keinginan sobat.

7.   Save dan lihat hasilnya ya sobat.

Moga berhasil dan bermanfaat ya.