How to Add Cool Vertical Menu for blogger part 2

This is cool vertical menu. I was posted first part earlier.
click here to visit first part

Demo here

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

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F  ]]>

4. Paste below code before ]]> tag

/* vertical menu*/
*{
 list-style:none;
 margin:0px;
 padding:0px;
}

 
#menu {
 width: 200px;
 border-style: solid solid none solid;
 border-color: #0e69be;
 border-size: 0px;
 border-width: 0px;

 }
 
#menu li a {
 height: 32px;
   voice-family: "\"}\""; 
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
 } 
 
#menu li a:link, #menu li a:visited {
 color: #0e69be;
 display: block;
 background: url(http://1.bp.blogspot.com/-1MihNvKwQCQ/TdE0wUij1-I/AAAAAAAAAXo/vf4Ib3QS1UE/s1600/Bloggertrix.jpg);
 background-repeat:no-repeat;
 padding: 8px 0 0 30px;
 }
 
#menu li a:hover {
 color: #0e69be;
 background: url(http://1.bp.blogspot.com/-1MihNvKwQCQ/TdE0wUij1-I/AAAAAAAAAXo/vf4Ib3QS1UE/s1600/Bloggertrix.jpg) 0 -32px;
 background-repeat:no-repeat;
 padding: 8px 0 0 10px;
 }
 
#menu li a:active {
 color: #0e69be;
 background: url(http://1.bp.blogspot.com/-1MihNvKwQCQ/TdE0wUij1-I/AAAAAAAAAXo/vf4Ib3QS1UE/s1600/Bloggertrix.jpg) 0 -64px;
 background-repeat:no-repeat;
 padding: 8px 0 0 10px;
 }

/* www.bloggertrix.com*/

5. Now Go to Design >> Page Element

6. Click Add Gadget and select 'HTML/Javascript'

7. Paste below one of below code.

 

#1

" title="Home">Home

#2

" title="About">About

#3

" title="Services">Services

#4

" title="Portfolio">Portfolio

#5

" title="Store">Download

* Replace red #1 to #5 with your URL
* You can change Blue color words(Title) as your like.

10. Save it. you are done.

Kindly Bookmark and Share it:

enter your email address to subscribe to information from Dhruva corporation: