Add JQuery Color fading Menu to blogger

Need a Additional navigation Menu For your blog just try this one,a cool widget navigation using jQuery with Black-grey hovering effect.

Follow the Steps And the Navigation could be yours:
1.Login to your dashboard
2.navigate through Layout->Edit HTML
3.Search for </head>  and add the below given code above </head>.
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /> <script type='text/javascript'><br /> //<![CDATA[<br /> <br /> /*<br /> * jQuery Color Animations<br /> * Copyright 2007 John Resig<br /> * Released under the MIT and GPL licenses.<br /> */<br /> <br /> (function(jQuery){<br /> <br /> // We override the animation for all of these color styles<br /> jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){<br />  jQuery.fx.step[attr] = function(fx){<br />   if ( fx.state == 0 ) {<br />    fx.start = getColor( fx.elem, attr );<br />    fx.end = getRGB( fx.end );<br />   }<br /> <br />   fx.elem.style[attr] = "rgb("   [<br />    Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0]))   fx.start[0]), 255), 0),<br />    Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1]))   fx.start[1]), 255), 0),<br />    Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2]))   fx.start[2]), 255), 0)<br />   ].join(",")   ")";<br />  }<br /> });<br /> <br /> // Color Conversion functions from highlightFade<br /> // By Blair Mitchelmore<br /> // http://jquery.offput.ca/highlightFade/<br /> <br /> // Parse strings looking for color tuples [255,255,255]<br /> function getRGB(color) {<br />  var result;<br /> <br />  // Check if we're already dealing with an array of colors<br />  if ( color && color.constructor == Array && color.length == 3 )<br />   return color;<br /> <br />  // Look for rgb(num,num,num)<br />  if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))<br />   return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];<br /> <br />  // Look for rgb(num%,num%,num%)<br />  if (result = /rgb\(\s*([0-9] (?:\.[0-9] )?)\%\s*,\s*([0-9] (?:\.[0-9] )?)\%\s*,\s*([0-9] (?:\.[0-9] )?)\%\s*\)/.exec(color))<br />   return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];<br /> <br />  // Look for #a0b1c2<br />  if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))<br />   return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];<br /> <br />  // Look for #fff<br />  if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))<br />   return [parseInt(result[1] result[1],16), parseInt(result[2] result[2],16), parseInt(result[3] result[3],16)];<br /> <br />  // Otherwise, we're most likely dealing with a named color<br />  return colors[jQuery.trim(color).toLowerCase()];<br /> }<br /> <br /> function getColor(elem, attr) {<br />  var color;<br /> <br />  do {<br />   color = jQuery.curCSS(elem, attr);<br /> <br />   // Keep going until we find an element that has color, or we hit the body<br />   if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )<br />    break;<br /> <br />   attr = "backgroundColor";<br />  } while ( elem = elem.parentNode );<br /> <br />  return getRGB(color);<br /> };<br /> <br /> // Some named colors to work with<br /> // From Interface by Stefan Petre<br /> // http://interface.eyecon.ro/<br /> <br /> var colors = {<br />  aqua:[0,255,255],<br />  azure:[240,255,255],<br />  beige:[245,245,220],<br />  black:[0,0,0],<br />  blue:[0,0,255],<br />  brown:[165,42,42],<br />  cyan:[0,255,255],<br />  darkblue:[0,0,139],<br />  darkcyan:[0,139,139],<br />  darkgrey:[169,169,169],<br />  darkgreen:[0,100,0],<br />  darkkhaki:[189,183,107],<br />  darkmagenta:[139,0,139],<br />  darkolivegreen:[85,107,47],<br />  darkorange:[255,140,0],<br />  darkorchid:[153,50,204],<br />  darkred:[139,0,0],<br />  darksalmon:[233,150,122],<br />  darkviolet:[148,0,211],<br />  fuchsia:[255,0,255],<br />  gold:[255,215,0],<br />  green:[0,128,0],<br />  indigo:[75,0,130],<br />  khaki:[240,230,140],<br />  lightblue:[173,216,230],<br />  lightcyan:[224,255,255],<br />  lightgreen:[144,238,144],<br />  lightgrey:[211,211,211],<br />  lightpink:[255,182,193],<br />  lightyellow:[255,255,224],<br />  lime:[0,255,0],<br />  magenta:[255,0,255],<br />  maroon:[128,0,0],<br />  navy:[0,0,128],<br />  olive:[128,128,0],<br />  orange:[255,165,0],<br />  pink:[255,192,203],<br />  purple:[128,0,128],<br />  violet:[128,0,128],<br />  red:[255,0,0],<br />  silver:[192,192,192],<br />  white:[255,255,255],<br />  yellow:[255,255,0]<br /> };<br /> <br /> })(jQuery);<br /> <br /> //]]><br /> </script><br /> <br /> <script type='text/javascript'><br /> //<![CDATA[<br /> <br /> var hoverColour = "#FFF";<br /> <br /> $(function(){<br /> $("a.hoverBtn").show("fast", function() {<br />  $(this).wrap("<div class=\"hoverBtn\">");<br />  $(this).attr("class", "");<br /> });<br /> <br /> //display the hover div<br /> $("div.hoverBtn").show("fast", function() {<br />  //append the background div<br />  $(this).append("<div></div>");<br /> <br />  //get link's size<br />  var wid = $(this).children("a").width();<br />  var hei = $(this).children("a").height();<br /> <br />  //set div's size<br />  $(this).width(wid);<br />  $(this).height(hei);<br />  $(this).children("div").width(wid);<br />  $(this).children("div").height(hei);<br /> <br />  //on link hover<br />  $(this).children("a").hover(function(){<br />   //store initial link colour<br />   if ($(this).attr("rel") == "") {<br />    $(this).attr("rel", $(this).css("color"));<br />   }<br />   //fade in the background<br />   $(this).parent().children("div")<br />    .stop()<br />    .css({"display": "none", "opacity": "1"})<br />    .fadeIn("fast");<br />   //fade the colour<br />   $(this) .stop()<br />    .css({"color": $(this).attr("rel")})<br />    .animate({"color": hoverColour}, 350);<br />  },function(){<br />   //fade out the background<br />   $(this).parent().children("div")<br />    .stop()<br />    .fadeOut("slow");<br />   //fade the colour<br />   $(this) .stop()<br />    .animate({"color": $(this).attr("rel")}, 250);<br />  });<br /> });<br /> });<br /> <br /> //]]><br /> </script><br /> <br /> <style type='text/css'><br /> div.hoverBtn {<br /> position:   relative;<br /> float:   left;<br /> background:  #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvjrb6pelxp55dhBl0AUS9sEjVlC-rW8FXgawL7ROdvU6aiaZy0z32b4abvcQaNLZ2HkP3T8B5ffMBx9v1YkdHlc58mKsePYSueOBE0Uwje9AI1eTGXAhUdeozE7Svjt2hCkQPqRlZKtXI/) repeat-x 0 0 scroll;<br /> }<br /> div.hoverBtn a {<br /> position:   relative;<br /> z-index:   2;<br /> display:   block;<br /> width:    100px;<br /> height:   30px;<br /> line-height:   30px;<br /> text-align:   center;<br /> font-size:  1.1em;<br /> text-decoration: none;<br /> color:   #000;<br /> background:  transparent none repeat-x 0 0 scroll;<br /> }<br /> div.hoverBtn div {<br /> display:  none;<br /> position:   absolute;<br /> z-index:   1;<br /> top:    0px;<br /> background:  #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiozahVrztnbB4nLuBeZlXsUkgIZaIFoRWSIwHOSXZb6LyebP3OaAWe0Df6J29_x3EmIVhFiLcFbEXCvLpyN3IzgJVpe6SQHsJo6u_l5AX5t-RaWQPr_42_j1rruSznXva_7h4WonEoSX2V/) repeat-x 0 0 scroll;<br /> </style>

4.Click on Save Template
Note:I suggest you to host images yourself.

5.Now go to layout -> page element  and Click on Add a .Gadget and choose Html/javascript From the popup.

6.Now Add the below given Html modifying according to your need

<a class="hoverBtn" href="#">Home</a>
<a class="hoverBtn" href="#">HTML</a>
<a class="hoverBtn" href="#">CSS</a>
<a class="hoverBtn" href="#">About</a>
<a class="hoverBtn" href="#">Contact</a>

Just Reply back..!! to say thanks...OR you have any problem with this tricks..