Create Vertical Menu

Do you want to Create a Vertical Menu ... ..? On Vertical menu you fill, such as links, articles, label or category and others. Please see demo here, located on the right side bar there is a red vertical menu.

Following the step:

First Step:

1. Login to your account Blogger
2. Click Layout
   
3. Select Edit HTML
4. Find code ]]></b:skin>
5. Copy the following script, insert above code ]]></b:skin>




#vertikal-kuning{
border-bottom-width: 0;
}
#vertikal-kuning ul{
margin: 0;
padding: 0;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /* selection of letters */
}

#vertikal-kuning a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 200px; /* width */
text-decoration: none; /* so that the link is not underlined */
color: #333222; /* font color */
border-right:1px solid #000000; /* right side of the border color */
background-color: #FBEC04;
border-bottom: 1px solid #6A6731;
border-left: 7px solid #918C3B;/* the left side of the border color */
}

#vertikal-kuning a:hover {
background-color: #FAF6B9; /* background color */
}

#vertikal-kuning div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}





6. Save Template

Second step:

1. Click Add Gadget
2. Select "HTML/Javascript"
3. Insert the following script
   




<div id="vertikal-kuning">
<div class="menutitle">CSS Library</div><!-- first title here -->
<ul>
<a href="http://infosehatbugar.blogspot.com/search/label/Kata%20BintangMu">Kata Bintang-Mu</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Kata%20ShioMu">Kata Shio-Mu</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Astrologi">Astrologi</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Ramalan">Ramalan</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Hiburan">Hiburan</a>
<a href="http://ramalankecocokanpasangan.blogspot.com/" target="_blank">Tes Pasangan-Mu</a>
<!-- To add new links in the store here -->
</ul>

<div class="menutitle">UniQue Template</div><!-- second title here -->
<ul>
<a href="http://peluang-bisnis-dirumah.blogspot.com/" target="_blank">Tambah Penghasilan-Mu</a>
<a href="http://ramalan-bisnis2009.blogspot.com/" target="_blank">Ramalan Bisnis</a>
<a href="http://panduan-blogger-mania.blogspot.com/" target="_blank">Tutorial Blogger Pemula</a>
<!-- To add new links in the store here -->
</ul>
</div> <!-- closing div-yellow vertical menu -->





4. Save

Related Posts