membuat menu vertikal pada blogspot

Pada tampilan template blogspot standar sangat minimalis..apa lagi tidak terdapat menu navigasi,namun kita bisa menambah widget dan memodifikasi tampilannya.
Sebagai contoh kita membuat menu vertikal pada blogspot.
Berikut langkah langkah nya:

Langkah pertama Login ke blogger kalian.
Dashboard lalu klik==>Rancangan==>klik edit HTML(Jangan lupa centang expand widget)

Langkah berikutnya copy kode di bawah ini dan letakan sebelum kode ]]></b:skin> atau sebelum kode </style> . 

.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%; }

Keterangan:
Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');

Pilihan Warna menu vertikal :

blue1.gif
blue2.gif
   
green1.gif
green2.gif
   
red1.gif
red2.gif

pink1.gif
pink2.gif

black1.gif
black2.gif

Jangan lupa save template nya.

Langkah berikutnya pergi"Page Elements"
Pilih "Add a Gadget -->HTML/JavaScript"
kemudian masukkan kode dibawah ini kedalamnya:

<ul id="verticalmenu" class="glossymenu">

<li><a href="/">Home</a></li>

<li><a href="http://belajarblogspot.com">home</a></li>
<li><a href="http://belajarblogspot.com" >bisnis</a></li>
<li><a href="http://belajarblogspot.com">Free Ebook</a></li>
</li>
</ul>

Keterangan:
Kode yang berwarna merah adalah linknya dan yg warna hijau adalah teks yang ditampilkan. Kalau mau menambahkan menu tinggal buat lagi kode seperti yg seperti dibawah warna biru .

Silakan di lihat hasil nya..