Buat Menu Dropdown Vertical 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
dan letakkan kode di bawah ini di atas kode

</code></span><span class="fullpost"><code> <style type='text/css'><br> .glossymenu, .glossymenu li ul{<br> list-style-type: none;<br> margin: 0;<br> padding: 0;<br> width: 185px; /*WIDTH OF MAIN MENU ITEMS*/<br> border: 0px solid black;<br> }<br> <br> .glossymenu li{<br> position: relative;<br> }<br> <br> .glossymenu li a{<br> background: white url(http://kentut.googlecode.com/files/glossyback.gif) repeat-x bottom left;<br> font: bold 12px Verdana, Helvetica, sans-serif;<br> color: white;<br> display: block;<br> width: auto;<br> padding: 8px 0;<br> padding-left: 10px;<br> text-decoration: none;<br> }<br> <br> .glossymenu li ul{ /*SUB MENU STYLE*/<br> position: bottom;<br> width: 190px; /*WIDTH OF SUB MENU ITEMS*/<br> left: 0;<br> top: 0;<br> display: none;<br> }<br> <br> .glossymenu li ul li{<br> float: bottom;<br> }<br> <br> .glossymenu li ul a{<br> width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */<br> }<br> <br> .glossymenu .arrowdiv{<br> position: absolute;<br> right: 2px;<br> background: transparent url(http://kentut.googlecode.com/files/arrow.gif) no-repeat center right;<br> }<br> <br> .glossymenu li a:visited, .glossymenu li a:active{<br> color: white;<br> }<br> <br> .glossymenu li a:hover{<br> background-image: url(http://kentut.googlecode.com/files/glossyback2.gif);<br> }<br> <br> /* Holly Hack for IE \*/<br> * html .glossymenu li { float: left; height: 1%; }<br> * html .glossymenu li a { height: 1%; }<br> /* End */ <br> </style><br> <script src='http://kentut.googlecode.com/files/cssvertikalmenu.js' type='text/javascript'><br> </script>

gaptect

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

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

6. Lalu di simpan

Keterangan :

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