Add Pink Vertical CSS Navigation Menu to Blogger

In this Post I am going to tell you how to add a beautiful Vertical Pink css Menu to Blogger,this menu is based on css so first we add .
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.

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


#menu {
width: 200px;
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: #C7377D;
display: block;
background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqpJpLmQ7qfTFBIY1jC0zaDiWc0qBTaHPfxb3Qio4FuEQQaK_n4LWk-ZUsLtfaCINrVtd76ghjq55tHf_5TeiOvUaU06_tvRVTOAmvLCYVBYzpMrQ5begHNc082SE5r1_bQVyoV6joEEs/s1600/menu.gif);
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #C7377D;
background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqpJpLmQ7qfTFBIY1jC0zaDiWc0qBTaHPfxb3Qio4FuEQQaK_n4LWk-ZUsLtfaCINrVtd76ghjq55tHf_5TeiOvUaU06_tvRVTOAmvLCYVBYzpMrQ5begHNc082SE5r1_bQVyoV6joEEs/s1600/menu.gif) 0 -32px;
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.

• 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">
  <TW>
    <li><a href="http://egytricks.com/">Link 1</a></li>
    <li><a href="http://egytricks.com/">Link 2</a></li>
    <li><a href="http://egytricks.com/">Link 3</a></li>
    <li><a href="http://egytricks.com/" title="Egytricks CSS Menus">Egytricks CSS Menus</a></li>
    <li><a href="http://egytricks.com/">Link 5</a></li>
    <li><a href="http://egytricks.com/">Link 6</a></li>
    <li><a rel="nofollow" target="_blank" href="http://egytricks.com/" title="egytricks.com">egytricks.com</a></li>
  </TW>
</div>

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