Cara membuat menu dropdown vertikal di sidebar

Untuk mempercantik blog, dan merapikan tampilan blog agar tidak penuh dengan teks artikel yang menempel sehingga membuat blog terasa sumpek, biasanya di sederhanakan dengan tampilan menu dropdown horizontal bawah header atau dengan menu dropdown vertikal di sidebar. Adapun cara membuat menu dropdown vertikal di sidebar untuk mempercantik blog anda bisa di copy scriptnya di bawah ini. Berikut contoh gambar menu dropdown vertikal.

Untuk cara memasang scriptnya sebagai berikut :

1. Masuk blogger.
2. Edit html blog.
3. Cari kode </html> dan letakkan kode di bawah ini di atas kode </html>

Klik show untuk melihat

 <style type='text/css'>
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0px solid black;
}

.glossymenu li{
position: relative;
}

.glossymenu li a{
background: white url(http://kentut.googlecode.com/files/glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 8px 0;
padding-left: 10px;
text-decoration: none;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: bottom;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}

.glossymenu li ul li{
float: bottom;
}

.glossymenu li ul a{
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}

.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(http://kentut.googlecode.com/files/arrow.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(http://kentut.googlecode.com/files/glossyback2.gif);
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
</style>
<script src='http://kentut.googlecode.com/files/cssvertikalmenu.js' type='text/javascript'>
</script>

4. Masuk ke tata letak, dan tambah gadget atau add gadget JAVA/HTML
5. Copy kode script di bawah ini kedalam gadget JAVA/SCRIPT

Klik show untuk melihat

 <ul id="verticalmenu" class="glossymenu">
<li><a href="#">Profil</a></li>
<li><a href="url artikel anda" >Admin</a></li>
<li><a href="#">Download</a>
    <ul>
    <li><a href="#">Ebook</a></li>
    <li><a href="url artikel anda">SOfware</a></li>
    <li><a href="#">Game</a></li>
    </ul>
    </li>
<li><a href="#">Mata Pelajaran</a>
    <ul>
    <li><a href="url artikel anda">Agama</a></li>
    <li><a href="url artikel anda">PKn</a></li>
    <li><a href="url artikel anda">IPA</a></li>
    <li><a href="url artikel anda">IPS</a></li>
    <li><a href="url artikel anda">Matematika</a></li>
    <li><a href="url artikel anda">TIK</a></li>
    <li><a href="url artikel anda">Bahasa Indonesia</a></li>
    <li><a href="url artikel anda">Bahasa Inggris</a></li>
    <li><a href="url artikel anda">Seni Budaya</a></li>
    </ul>
</li>
<li><a href="#">INFO</a>
    <ul>
    <li><a href="url artikel anda">Liburan</a></li>
    <li><a href="url artikel anda">Tugas</a></li>
    <li><a href="url artikel anda">Kegiatan</a></li>
    <li><a href="url artikel anda">Nilai</a></li>
    </ul>
</li>
<li><a href="#">Lap. Uang KAS</a>
    <ul>
    <li><a href="url artikel anda">KAS Masuk</a></li>
    <li><a href="url artikel anda">KAS Keluar</a></li>
    </ul>
    </li>
<li><a href="#">Cerita</a>
    <ul>
    <li><a href="url artikel anda">Fiksi</a></li>
    <li><a href="url artikel anda">Non Fiksi</a></li>
    <li><a href="url artikel anda">Sejarah</a></li>
    <li><a href="url artikel anda">Lucu</a></li>
    </ul>
</li>
</ul><br/>
<a href="http://gaptect.com"></<h5 style="opacity: 0; filter: alpha(opacity=10); width: 100%; font-size: 8pt;">gaptect</h5></a>

6. Lalu di simpan

Keterangan :

Untuk yang berwarna merah bisa di ganti dengan url arikel anda.  dan yang berwarna biru bisa di gani dengan kategori atau judul artikel blog anda