Colocar Menu de Navegação Efeito jquery

Colocar um Menu de Navegação em Efeito jQuery pode ser uma boa forma de deixar seu Blog muito mais otimizado e deixando o Blog com um "Ar de Profissional",  sempre em minhas criações e personalizações desejei colocar menus bem equipados para tipos diferentes de assuntos para Blogs e acabei de encontrar e agora estou passando para você.

Como na imagem acima você vê um circulo em cada link do menu personalizado, em que nele ao passar o mouse o circulo o segue deixando um efeito bem legal. Agora vamos deixar de conversa e começar a passa os passos para você instalar ou personalizar de sua forma:

Entre no Blogger, vá em seu Painel, depois em Layout > Adicionar Gadget >  Javascript/HTML depois cole esse código abaixo:

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="LINK">TITULO</a></li> <li><a href="LINK">TITULO</a></li> <li><a href="LINK">TITULO</a></li> <li><a href="LINK">TITULO</a></li> <li><a href="LINK">TITULO</a></li> <li><a href="LINK">TITULO</a></li> </ul><script> gooeymenu.setup({id:'gooeymenu4', selectitem:0, snapdelay:500}) </script>

OBS: Onde estiver com o nome TITULO você coloca o nome de link que irá aparecer tipo "Home" e onde estiver LINK você coloca o endereço URL, para ser seguido ao clicar.

Este menu irá ficar bem melhor se posicionado em cima da caixa de postagem do seu Blogger, pois ali estará com o tamanho e organização bem melhor.

Veja Também:

Marcadores em nuvens

Como Instalar Ferramenta do Breadcrumb no seu Blog 

Marcadores Ocultos e Personalizados

Css modificando Corpo, fonte, cores das suas postagens

ADM: Gostou do Post, então não fique acanhado e nem deixe de seguir nosso Blog curtindo e seguindo o nosso Blog.

Gostou? Compartilhe:

Tweet