Membuat Menu Vertical

Menu vertikal adalah menu yang berada disisi blog. Umunya menu ini menempel dan terbang mengikuti pergerakkan scrool. Mungkin sudah banyak yang membahas tentang ini, namun tidak ada salahnya untuk mencoba sesuatu yang baru. Mana tau, menu vertical kali ini lebih bagus dan lebih keren dari yang lainnya. Gag sulit kok untuk dapat membuat menu vertical didalam blog. Dengan mengikuti tutorial yang baik dan benar, pasti hasilnya juga memuaskan. Berikut langkah-langkah membuat menu vertical di blog :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut 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%; }

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="glossymenu"> <li><a href="/">Home</a></li> <li><a href="http://4-jie.blogspot.com">Trik Blog</a></li> </li> </ul>

SELESAI !