Blogger9:- Learn How To Add Black Vertical Sliding jQuery Dancing Menu For Blogger. 0

| | , , ,

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(http://lh3.ggpht.com/_u4rBCfM4eII/TP_BdUM-3II/AAAAAAAAAus/UtjrhgILN0w/heading_bg.jpg) repeat-y;font-weight: normal;}#hide {position:absolute;top:30px;left:-190px;}ul#sliding-navigation{background:url(http://lh4.ggpht.com/_u4rBCfM4eII/TP_BQHJkJnI/AAAAAAAAAuo/2ezLOwExjeA/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; }

 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

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Blogger9:- Learn How To Add Black Vertical Sliding jQuery Dancing Menu For Blogger. ~ Twitter FaceBook

0 Responses So Far:

Categories

Select Your Categories