Simple Vertical CSS Menu for Blogger

Simple Vertical  CSS Menu for Blogger

This is quite simple look vertical menu for blogger ,Well in past posts we have paste many article about blogger menu like Pearl White Menu to Blogger and In this Post I am going to share a another Vertical CSS Menu for Blogger to you ,all have a look at our others menu blogger Menu

ADDING CSS EFFECT

Now we will add the CSS Code in Blogger Template ..  so follow my Simple below Instruction..

• Login to Blogger  >> Click on drop down menu >>then select "Template".
• Now you will see  "EDIT HTML" Button ,Click on it >>  and then click Proceed button .
• Now find this tag ]]></b:skin> by using CTRL + F 
• Paste below code Just Before/above ]]></b:skin> tag  and Save the Template.

ul {
list-style: none;
margin: 0;
padding: 0;
}

#TWmenu {
width: 200px;
border-style: solid solid none solid;
border-color: #677D92;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#TWmenu li a {
height: 32px;
  voice-family: "\"}\"";
  voice-family: inherit;
  height: 24px;
text-decoration: none;
}

#TWmenu li a:link, #TWmenu li a:visited {
color: #fff;
display: block;
background: url(menu.gif);
padding: 8px 0 0 10px;
}

#TWmenu li a:hover {
color: #283A50;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#TWmenu li a:active {
color: #283A50;
background: url(menu.gif) 0 -64px;
padding: 8px 0 0 10px;
}

ADDING MENU CODE

Now you can use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout.

• Login to Blogger  >> Click on drop down >> Now select "Layout"
• Now you will see "Add a Gadget" button click any of them
• A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
• Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.

 <div id="TWmenu">
  <ul>
    <li><a href="http://www.egytricks.com/">Your Link 1</a></li>
    <li><a href="http://www.egytricks.com/">Your Link 2</a></li>
    <li><a href="http://www.egytricks.com/">Your Link 3</a></li>
    <li><a href="http://www.egytricks.com/" title="Free CSS Menus">EgyTricks blogger Menus</a></li>
    <li><a href="http://www.egytricks.com/">Your Link 5</a></li>
    <li><a href="http://www.egytricks.com/">Your Link 6</a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.egytricks.com/" title="E-lusion">EgyTricks Blogger Menus</a></li>
  </ul>
</div>>

Customization the Menu

• Replace the links in menu code http://www.egytricks.com/ to yours Links
• and text name Link Name to your link text name

Now all done if have any question or Problem according to this Vertical CSS Navigation Menu for Blogger then Comment below