Black Vertical Sliding jQuery Menu For Blogger Blogspot

Demo

Look at the demo.This Black sliding jQuery Navigation menu can impart a good style statement your blog.Installation is simple.I have already uploaded all files required in its installation.So lets begin ...




Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

• 
  Download Scripts!

Step 1

Login to Blogger>>>Go To LAYOUT>>>Then Click On Edit HTML>>>Check Mark Expand Widgets>>>Press Ctrl+F

Step 2
Search For </head> code:

Copy below code and paste it just before the </head> tag.

<script src='http://files-teckzest.bravehost.com/jquery.js' type='text/javascript'/><script src='http://files-teckzest.bravehost.com/sliding_effect.js' type='text/javascript'/>

Step 3

copy below code and paste it just before the ]]></b:skin> code

ul#sliding-navigation li.sliding-element h3{color: #fff;background:url(http://3.bp.blogspot.com/_JUJEXEamsyU/Spj3mH2QXuI/AAAAAAAAAXc/8B5-cqwIAI8/heading_bg.jpg) repeat-y;font-weight: normal;}#hide {position:absolute;top:30px;left:-190px;}ul#sliding-navigation{background:url(http://1.bp.blogspot.com/_JUJEXEamsyU/Spj3llCYM9I/AAAAAAAAAXU/qft56tBlT0w/background.jpg);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 15px;margin: 0;margin-bottom: 5px;}ul#sliding-navigation li.sliding-element h3{color: #fff;background: #333;border: 1px solid #1a1a1a;font-weight: normal;}ul#sliding-navigation li.sliding-element a{color: #999;background: #222;border: 1px solid #1a1a1a;text-decoration: none;}ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Click on "Save Templates"

Step 5

Now Go To LAYOUT>>>Add a Gadget>>>Select HTML and Java>>>Paste the Below Code

<ul id="sliding-navigation"><li class="sliding-element"><h3>Navigation Title</h3></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="#">Link 5</a></li></ul>

<span style="font-size:4px;"><a href="http://bloggerplugnplay.blogspot.com/" target="_blank">Plug it</a></span>

Click SAVE its Done ! =)