Create Vertical Menu


Buzz It

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>

  6. #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;

  7. Save Template

Second step:

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

  4. <div id="vertikal-kuning">
    <div class="menutitle">CSS Library</div><!-- first title here -->
    <a href="">Kata Bintang-Mu</a>
    <a href="">Kata Shio-Mu</a>
    <a href="">Astrologi</a>
    <a href="">Ramalan</a>
    <a href="">Hiburan</a>
    <a href="" target="_blank">Tes Pasangan-Mu</a>
    <!-- To add new links in the store here -->

    <div class="menutitle">UniQue Template</div><!-- second title here -->
    <a href="" target="_blank">Tambah Penghasilan-Mu</a>
    <a href="" target="_blank">Ramalan Bisnis</a>
    <a href="" target="_blank">Tutorial Blogger Pemula</a>
    <!-- To add new links in the store here -->
    </div> <!-- closing div-yellow vertical menu -->

  5. Save

Related Posts


M.J said...
May 06, 2009  

thanks for the great info

heytelangana said...
January 05, 2010  


BaliMoz said...
April 24, 2011  

thanks for sharing..this is what I search for

Post a Comment


Custom Search
Indonesia English French German Spain Italian
Dutch Russian Portuguese Japanese Korean Arabic


Ceck These Out


U'R Comment