Cara Membuat Menu Dropdown Vertikal di Sidebar

Cara Membuat Menu Dropdown Vertikel di Sidebar ini saya dapat dari http://www.gaptect.com/ sebuah website yang berisi tentang pembelajaran - pembelajaran untuk Adik - adik siswa atau siswi yang ingin belajar di dunia Website. Menu dropdown vertikal ini sangat di butuhkan bagi beberapa template yang pada posisi headernya kurang mendukng untuk di buat menu seperti ini, di karenakan akan menghalangi tampilan yang ada.

untuk membuat menu dropdown vertikal di sidebar langkah - langkah yang harus di lakukan adalah :

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

<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

<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