Simple Green Vertical CSS Navigation Menu

Vertical CSS Navigation Menu

In this Post I am going to tell you how to add a Simple Green Vertical CSS Navigation Menu to Blogger.

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.

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
font-weight: bold;
}

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

#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

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

#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8Cc9k-0JD-Zq-QuBeVmvXcqUYvEWSf3X3TZ6UTED4sXxgtIbzFvEES286kRbyw29DIMgOUfaWQrNYVyTAKu73SmddvvRXsKsJFoW2tY8zXQBu9HEtVDY09w2rz4MTjn_8uNuvV49_FQ/s1600/menu.gif);
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #26370A;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8Cc9k-0JD-Zq-QuBeVmvXcqUYvEWSf3X3TZ6UTED4sXxgtIbzFvEES286kRbyw29DIMgOUfaWQrNYVyTAKu73SmddvvRXsKsJFoW2tY8zXQBu9HEtVDY09w2rz4MTjn_8uNuvV49_FQ/s1600/menu.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu li a:active {
color: #26370A;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8Cc9k-0JD-Zq-QuBeVmvXcqUYvEWSf3X3TZ6UTED4sXxgtIbzFvEES286kRbyw29DIMgOUfaWQrNYVyTAKu73SmddvvRXsKsJFoW2tY8zXQBu9HEtVDY09w2rz4MTjn_8uNuvV49_FQ/s1600/menu.gif) 0 -64px;
padding: 8px 0 0 10px;
}

MENU CODE

Now we can  use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout,But i will  Recommend You to Replace this menu code in your Blogger Template with already existing one., or add below code before or after already existing one menu code.

• 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="menu">
  <ul>
    <li><a href="http://www.egytricks.com/">Link Name</a></li>
    <li><a href="http://www.egytricks.com/">Link Name</a></li>
    <li><a href="http://www.egytricks.com/">Link Name</a></li>
    <li><a href="http://www.egytricks.com/">Link Name</a></li>
    <li><a href="http://www.egytricks.com/">Link Name</a></li>
    <li><a href="http://www.egytricks.com/">Link Name</a></li>
    <li><a href="http://www.egytricks.com/">Link Name</a></li>
  </ul>
</div>

Customization

• 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