Se você gostar do post abaixo, por favor, clique aqui para se inscrever gratuitamente através do e-mail, assim você terá um post a cada e-mail recebido, podendo baixar nossos ebooks

Colocar Menu de Navegação Efeito jquery

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ê.

Colocar Menu de Navegação Efeito jquery

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 
#FFA500border-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.
Colocar Menu de Navegação Efeito jquery
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:

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:
Ruan Phablo

Ruan Phablo é blogueiro desde 2009, mas só a partir de 2012 começou a levar a blogosfera a sério. Foi aí que ele criou o Phablo Projetos, um blog que tem por objetivo ajudar outros blogueiros. Você pode encontrá-lo no Facebook, no Twitter e no Google+.

Um comentário:

  1. Me add la no facebook


    frank.lucas_@hotmail.com



    Esse site é show gostei muito dele phabloprojetos parabens pelo bom trabalho, se não for pedir muito gostaria de compartilhar meu site aqui pra quem quizer visitar



    Site de tattoo:







    http://tatuagens-feminina.blogspot.com












    .

    ResponderExcluir

Seu Comentário estará enriquecendo o conteúdo acima. Fico grato com sua participação! Qualquer dúvida relacionada a outro assunto use o nosso formulário de contato "Fale Conosco". Obrigado

Por favor me adicione no Google + para eu poder te responder de imediato!

 
Copyright © 2012 - Phablo Projetos - Direitos Reservados | Page Rank Licença Creative Commons
Desenvolvido por Carlos Vínicius | Tecnologia do Blogger | Páginas: Termos de Uso e Licença
    Twitter Facebook Google + YouTube