Blogger9:- Learn How To Add Black Vertical Sliding jQuery Dancing Menu For Blogger. ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

This is cool black vertical sliding jQuery dancing menu for your blog. do you want to add this your blog, here's how.

How To Add Black Vertical Sliding jQuery Dancing Menu For Blogger

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.

<script src='https://sites.google.com/site/bloggertricksandtoolz/jquery.js' type='text/javascript'/><script src='https://sites.google.com/site/bloggertricksandtoolz/sliding_effect.js' type='text/javascript'/>

5-Copy below code and paste it just before the ]]></b:skin> code.

ul#sliding-navigation li.sliding-element h3{color: #fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqxUYU8baEPuzt2_J3awMR4hI-yaKG2EiqEKivA4PJvgRaenJ3jOz96bllmVS84Y98gzOczAx-CGGo0U1gaHwCWZPsQWlOSrINWalv80UIJecIBTi2FYIvhyOjEVCmgrkjkD8OiGq0Gts/) repeat-y;font-weight: normal;}#hide {position:absolute;top:30px;left:-190px;}ul#sliding-navigation{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHrNh4AYEUtxSv8DXJIK-V2CkSGgd5Z-oPIKohIQBurosazu01cM7J9jIxLuMDbXilXF2Gpk6qWC5aPtRercMpMG6B8ywO1rhFj92SsIqV2ZfmdwHd3bspjYNEPfMCvAabM6Xllxa-gA/);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; }

7.Click on "Save Templates"

8.Now Go To Desing--->Add a Gadget--->Select Html Java Script--->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://www.bloggertricksandtoolz.com/" target="_blank">Blogger Tricks And Tools</a></span>

Now Save your "Html Java Script" You are Done