How to add Great vertical navigation menu bar for blogger

By : Follow Trends

On : 9/05/2015

In : Blogger Tips

0 comments

1.Log in to your Blogger account Go to  Design >> Edit HTML

2.Find this tag by using Ctrl+F ]]></b:skin>

3. Paste below code before ]]></b:skin> tag

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 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; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6-nhZmoH3ZuxjYeB98bD6mHePiDU0uUT2waKV1xgyFNxh3Zay5SXx1mkyak2i0zRdg7vh1iO-jXp425bjgtwqmGkH0MzmgAkZ6om37UWajQNIKV-DzS0ub1ao3tvFXrEgZ2yrMF__Wso/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6-nhZmoH3ZuxjYeB98bD6mHePiDU0uUT2waKV1xgyFNxh3Zay5SXx1mkyak2i0zRdg7vh1iO-jXp425bjgtwqmGkH0MzmgAkZ6om37UWajQNIKV-DzS0ub1ao3tvFXrEgZ2yrMF__Wso/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

4.Now save your template

5. Again go to Design >>Page Element >> 'Add a Gadget' on side bar

6.Select "HTML/Javascript" and paste below code.

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

7.Now Replace # with your page link and replace Title with your page title name.

8.Save your HTML JavaScript.you are done.