Add jQuery Gooey Tab Menu to Blogger Blogs?

jQuery Gooey Tab Menu is a very attractive and eye-catching menu. Its unlike the other tab menus, whenever you move your mouse cursor on a menu item, the gooey moves dynamically as you move right and left. Its quite easy to add it to your blogspot blogs, just follow the steps below:

       Add jQuery Gooey Tab

1. Go to Blogger > Design
2. Choose to add HTML/JavaScript widget (the one just below your header)
3. Paste the following code inside 

1. 
   
   <script type="text/javascript">
   /* jQuery Gooey Menu
   * Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
   * Author: Dynamic Drive at http://www.dynamicdrive.com/
   * Visit http://www.dynamicdrive.com/ for full source code
   */
   
   jQuery.noConflict()
   
   jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //seehttp://gsgd.co.uk/sandbox/jquery/easing/
           if (s == undefined) s = 1.70158;
           return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
       }
   })
   
   var gooeymenu={
       effectmarkup: '<li class="active"></li>',
   
       setup:function(usersetting){
           jQuery(function($){ //on document.ready
               function snapback(dur){
                   if ($selectedlink.length>0)
                       $effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx)
               }
               var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting)
               var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL
               var $menulinks=$menu.find('li a')
               var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL
               $effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window
               if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined
                   var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')
               }
               else{
                   var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined
               }
               setting.defaultselectedBool=$selectedlink.length
               $menulinks.mouseover(function(){
                   clearTimeout(setting.snapbacktimer)
                   var $target=$(this)
   //alert($target.position().left+" "+$target.get(0).offsetLeft)
   
                   $effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx)
                   if (setting.defaultselectedBool==0) //if there is no default selected menu item
                       $selectedlink=$target //set current mouseover element to selected element
               })
               if ($selectedlink.length>0){
                   snapback(0)
                   $menu.mouseleave(function(){
                       setting.snapbacktimer=setTimeout(function(){
                           snapback(setting.fxtime)
                       }, setting.snapdelay)
                   })
               }
                   $(window).bind('resize', function(){
                       snapback(setting.fxtime)
                   })
           })
       }
   }
   </script>
   
   <style>
   
   ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
   _visibility: hidden; /*IE6 rule*/
   }
   
   /* -------MBT Gooey Menu--------*/
   ul.framemenu{
   margin-top:6px;
   margin-bottom:15px;
   padding: 0;
   list-style: none;
   position:relative;
   text-align: left; //set value to "left", "center", or "right"*/
   }
   
   ul.framemenu li{
   display: inline;
   }
   
   ul.framemenu li a{
   font: bold 14px Arial, Verdana, sans-serif;
   color: black;
   padding: 12px 10px 5px 18px;
   margin-right: 10px; /*spacing between each menu link*/
   text-decoration: none;
   }
   
   ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
   position:absolute;
   width:0;
   border:4px solid #FFA500; border-radius:15px; -moz-border-radius:15px; -moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
   -webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
   box-shadow: 0 0 4px rgba(120,120,120,0.7);
   }
   </style>
   
   
   
   <ul id="gooeymenu4" class="framemenu">
   <li><a href="#">Home</a></li>
   <li><a href="#">CSS Codes</a></li>
   <li><a href="#">Forums</a></li>
   <li><a href="#">Tools</a></li>
   <li><a href="#">JavaScript</a></li>
   <li><a href="#">CSS Gallery</a></li> </ul>
   
   <script>
   gooeymenu.setup({id:'gooeymenu4', selectitem:0, snapdelay:500})
   
   </script>
   
   
   

Edit the highlighted parts with your page titles and URLs. To change the Color of the border, replace #FFA50 with your own value.
To change the rounded borders of frame to rectangular then simple delete the following code from above,

border-radius:15px; -moz-border-radius:15px;

Save and you are done.

Credits to Mustafa of MBT. I loved this new Gooey Tab and thought i would share it with my readers here. Enjoy the cool Gooey tab menu :)

Enjoy Pals!

Peace and Happy Blogging!