August 12, 2011

How To Add Black Vertical Sliding jQuery Dancing Menu For Blogger


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/AVvXsEgcyJRWjo15EIh4UiRA3AYhL_Uq1LpOru5LuahURvliV5CfU1WVrHReCoYkXDsJQv0IMWbGW7HEqMUy1TDdmlhliR1YnOt46AaKcjhmiDCyVl7vPH6fbaRTApWv6koqf2XLbKJuW-WeYFM/) repeat-y;font-weight: normal;}#hide {position:absolute;top:30px;left:-190px;}ul#sliding-navigation{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZ8YZJoKHTS4ApONZ91elhZWpqhoyhsVd95Z2iNik_lMBD8FsOohlYGc7MTSfb3_J7-2BLo8SIrKHrUA_mgelQD0Mxu2oudSl1nLU-KDCbSA8Uza9UvHpKCXnXo_mOF5V0UFHZOsQV_o/);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

Cheers

No comments:

Post a Comment