How to Add Cool Vertical Menu for blogger part 3

 This is cool vertical menu. I was posted first part earlier.

Click here to visit  Part 1

Click here to visit  Part 2

You can see the DEMO of vertical menu
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  ]]></b:skin>

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

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

 
#menu2 {
 width: 200px;
 border-style: solid solid none solid;
 border-color: #94AA74;
 border-width: 0px;

 }
#menu2 ul{
 list-style:none;
 margin:0px;
 padding:0px;
 }
 
#menu2 li a {
 height: 32px;
   voice-family: "\"}\""; 
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
 font-weight:normal;
 } 
 
#menu2 li a:link, #menu li a:visited {
 color: #FFFFFF;
 display: block;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcFRL6B5xq1FMh2aKOsk_8esznzr2-2IXiQ_9YA4WKBY9NLjFCSpOVF-0J6M1MnM3Jpyp_f61DiNpDJCvgFrJb3_iRSJneV4_sAY4AJXe5MxCvwRHb7nzGbrr9DfxuPnScawEJe0cwHiK/s1600/image.gif);
 background-repeat:no-repeat;
 padding: 8px 0 0 50px;
 }
 
#menu2 li a:hover {
 color: #666666;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcFRL6B5xq1FMh2aKOsk_8esznzr2-2IXiQ_9YA4WKBY9NLjFCSpOVF-0J6M1MnM3Jpyp_f61DiNpDJCvgFrJb3_iRSJneV4_sAY4AJXe5MxCvwRHb7nzGbrr9DfxuPnScawEJe0cwHiK/s1600/image.gif) 0 -32px;
 background-repeat:no-repeat;
 padding: 8px 0 0 50px;
 }
 
#menu2 li a:active {
 color: #666666;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcFRL6B5xq1FMh2aKOsk_8esznzr2-2IXiQ_9YA4WKBY9NLjFCSpOVF-0J6M1MnM3Jpyp_f61DiNpDJCvgFrJb3_iRSJneV4_sAY4AJXe5MxCvwRHb7nzGbrr9DfxuPnScawEJe0cwHiK/s1600/image.gif) 0 -64px;
 background-repeat:no-repeat;
 padding: 8px 0 0 50px;
 }

/* 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.

<div class="outer">
<div id="menu2"><ul>
   <li><a href="#1" title="Home">Home</a></li>
   <li><a href="#2" title="About">About</a></li>
   <li><a href="#3" title="Services">Services</a></li>
   <li><a href="#4" title="Portfolio">Portfolio</a></li>
   <li><a href="#5" title="Store">Download</a></li>
   
 </ul>
</div>
</div>

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

10. Save it. you are done.