How To Add Cool Vertical Jquery Slide Menubar To Blogger

Vertical bar is also really helpful, when
we need to keep some link on side bar.
So, this vertical bar include nice hover
style like dancing style.Earlier i posted
about How To Add Cool Vertical Drop
Down Menu For Blogger. Its also include
nice style with drop down.You can follow
this easy steps to add it to your blog.

DEMO

1. Log in to blogger  Design > Edit HTML.

2. Find this tag by using Ctrl+F   </head>

3. Paste below code Before </head> tag

<script src='http://bloggtrix.googlecode.com/files/jquery.js' type='text/javascript'/><script src='http://bloggtrix.googlecode.com/files/sliding_effect.js' type='text/javascript'/>
<style>
ul#sliding-navigation li.sliding-element h3{color: #none;background:url() repeat-y;font-weight: normal;}
#hide {position:absolute;top:30px;left:-190px;}
ul#sliding-navigation{background:url();list-style: none;font-size: 14px;margin: 30px 0;}
ul#sliding-navigation li.sliding-element h3,ul#sliding-navigation li.sliding-element a{display: block;width: 150px;padding: 5px 2px;margin-top:-7px;margin-left:10px;margin-bottom: -2px;}
ul#sliding-navigation li.sliding-element h3{color: #fff;background: #none;border: 1px solid #1a1a1a;font-weight: normal;}
ul#sliding-navigation li.sliding-element a{color: #999;background: #none;border: 0px solid #1a1a1a;text-decoration: none;padding:6px 0 6px 12px;margin:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcoQTxhjoKWZ62tOdmtH7Uiu2jKefnIDJ6Wrj_6f8x-eYRgFppLxC5bVHRlSCKA_p9RhM8nzwrdPi7mbh6nvRmmprYrJBvTaRFQQ9cesEiW67GcFp_BbKj2aeobXh7kWOdIVieLKRHT4A/s1600/widget-list.png) left 11px no-repeat;border-bottom:1px solid #e6f2fa;}}
ul#sliding-navigation li.sliding-element a:hover { color: #000000; }
</style>

4. Now Go to Design >  Page Element.

5.Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<ul id="sliding-navigation"><center><h2>
Navigation Title</h2>
</center>
<li class="sliding-element"></li>
<li class="sliding-element"><a href="#">Link 1</a></li>
<li class="sliding-element"><a href="#">Link 2</a></li>
<li class="sliding-element"><a href="#">Link 3</a></li>
<li class="sliding-element"><a href="#">Link 4</a></li>
<li class="sliding-element"><a href="http://www.bloggertrix.com/">Get This</a></li>
</ul>

Replace # with your Links
Replace Links name with your any name.

7. Now save your HTML/Javascript'.

    You are done...