How To Add New “Vertical” Navigation Menu For Blogger

In many sites you have seen horizonal menu.Now I am going to give a widget which increases you traffic
.It looks awesome in all sites then horizontal menu.Let us see how to do this trick.Just follow these steps.

Demo

1.Login to your blogger dashboard--> Desing- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag.

3.Copy below code and paste it just before ]]></b:skin> tag.

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqysdbe9QFPeT4kFqNAidy47LpJkpecBYjd3-7pJtcxIYKNw-wAvyOwUdaO66k79fNYyqoUJfk99VgLx8KoLKHxL7FqOvl4jcR8Tfo5z6sjey6YQJpKX3NBZMfAtAIazSO8OK3v_5lOw/); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqysdbe9QFPeT4kFqNAidy47LpJkpecBYjd3-7pJtcxIYKNw-wAvyOwUdaO66k79fNYyqoUJfk99VgLx8KoLKHxL7FqOvl4jcR8Tfo5z6sjey6YQJpKX3NBZMfAtAIazSO8OK3v_5lOw/) 0 -32px; padding: 8px 0 0 10px; }

4. Save Your Template.

5.Now Go to Desing --&-- Page Elements.

6.Click on 'Add a Gadget' on the sidebar.
7.Select 'HTML/Javascript' and add the one of code given below

<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a> </li> </ul> </div> 

Note: Replace the hash (#) sign with your Page Links / URL and replace Link1, Link2, Link3 etc with your Page Titles

8.Now save your "HTMl JavaScript" you are done..Cheers