Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Menus Vanessa S.

Menu auto ocultável no topo do blog

Neste tutorial você vai aprender como adicionar um menu no topo do blog.
A diferença deste menu é que ele é auto ocultável e utiliza o efeito opacity e JQuery.
Este script funciona em conjunto com a biblioteca do JQuery na versão 1.4.2, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela.

1º passo – Instalar o Javascript:

Copie o código abaixo e cole-o antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var topbarME = function() { $(&#39;#menuopacity&#39;).fadeTo(fadeSpeed,1); }, topbarML = function() { $(&#39;#menuopacity&#39;).fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position &gt; topDistance &amp;&amp; !inside) {
//add events
topbarML();
$(&#39;#menuopacity&#39;).bind(&#39;mouseenter&#39;,topbarME);
$(&#39;#menuopacity&#39;).bind(&#39;mouseleave&#39;,topbarML);
inside = true;
}
else if (position &lt; topDistance){
topbarME();
$(&#39;#menuopacity&#39;).unbind(&#39;mouseenter&#39;,topbarME);
$(&#39;#menuopacity&#39;).unbind(&#39;mouseleave&#39;,topbarML);
inside = false;
}
});
})();
});
</script>

2º passo – Aplicar estilos CSS:

Vá no menu “modelo”, entre na edição HTML do seu template, não precisa clicar em “expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole o seguinte código logo ACIMA dela:

#menuopacity {
border-bottom:1px solid #ECF1EF; /*--Edite borda--*/
background:#151715; /*--Edite cor de fundo--*/
padding:10px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
#menuopacity a:link {
color:#fff; /*--Edite cor--*/
padding:3px 3px 3px 3px;
border:1px solid #666; /*--Edite borda--*/
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border-radius: 5px;
}

Não esqueça de editar as cores.

3º passo – Inserir o código html:

Agora vamos inserir o menu para que ele fique visível acima da barra de cabeçalho.
Procure por:

<div id='header-wrapper'>

e cole o seguinte código logo ACIMA dele:

<div id='menuopacity'>
<a href='SEU-LINK'>TITULO 1</a>
<a href='SEU-LINK'>TITULO 2</a>
<a href='SEU-LINK'>TITULO 3</a>
</div>

Insira seus links no menu nos locais destacados, e não esqueça de incluir também o nome de seus links.

Se estiver usando template designer de modelo do blogger, cole o código logo acima da tag <header>
Demo



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

| Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

23 Comentários

  1. Vanessa,
    Fico feliz que tenha gostado da modificação que fiz no menu que você nos ensinou a fazer. E muito obrigado pelo convite para fazer uma Guest post, vou preparar o material e assim que eu terminar envio pra você.
    Abraço e até a próxima.

  2. Gostaria de saber se posso fazer algumas vídeo aulas baseado nos seus tutoriais. Desde já agradeço, abraço e até mais.

    • Vanessa disse:

      OI Sandro,
      Eu te autorizo sim, mas desde que vc faça uma menção ao artigo que vc se baseou 🙂
      Abraços.

      • Primeiramente muito obrigado por me autorizar a fazer as vídeo aulas baseado nos seus tutoriais mas venho te perguntar como registrar a autoria de algum widget pois criei um baseado no seu tutorial você pode dar uma olhada no meu blog, é a barra de pesquisa auto ocultável. Muito obrigado por tudo e desde já agradeço pela a atenção.

        • Vanessa disse:

          Geralmente qdo eu desenvolvo algum widget, eu só incluo o link no rodapé do widget, tipo: “Widget By MB”ou então coloco só o link para o post onde eu ensino a instalar o widget com um “instale este widget”.
          Gostei do efeito na barra de pesquisa…Vc quer publicar um tutorial Guest post, aqui no Mundo Blogger, ensinando a instalar o widget que vc desenvolveu?

  3. Shopping Photoscape disse:

    Clau gostaria de saber como colocar ele em outros locais,exemplo acima das postagens

  4. AMP_ disse:

    Tem como colocar hover nessa barra??

  5. Dr Marcelo Quirino disse:

    Po, alguem tem algum exemplo dele ai funcionando?

  6. Potter disse:

    e para aplicar um efeito 'zoom' quando se passa o mouse sobre um dos links do menu?

  7. Potter disse:

    E como eu faço para fazer um menu assim, porém fixo no cabeçalho do blog? E para mudar a font?

  8. .:: Clau ::. disse:

    Lucas Rafael
    Por favor leia o meu comentário de nº2.

  9. Lucas Rafael disse:

    Clau tem como o menu ficar fixo no topo?
    Se tiver está opção me responda pf, bjos!

  10. ::Clau:: disse:

    @Nauan:
    Se existe esta possibilidade, eu não conheço.

  11. Nauan disse:

    Tem como colocar pra fechar o Menu Auto Ocultável não?

  12. ::Clau:: disse:

    @Orichalcum the Hedgehog:
    Vc tem q aplicar estilos ao texto. Dá uma olhada neste artigo que vai te ajudar:
    A propriedade CCS Text (text-transform)

  13. Orichalcum the Hedgehog disse:

    Boa tarde.

    Tem uma forma de deixar as letras do menu começando a primeira letra em Maiuscula? Pois no padrão ele as deixa todas em MAIUSCULA.

  14. GilgamesH disse:

    Ah sim descobri… Eu estava add as etapas 1,2,3 todas de uma vez só sem salvar o template. Quando passei a add um por vez e salva-las funcionou perfeitamente…Muito bom mesmo esse menu.

    Parabéns.

  15. Importados SP disse:

    Showwwwwwwwwwwwwwwwwwwwww de bolaaaaaaaaaaaaaaaaaaaaa

    facim facim

    valew

  16. GilgamesH disse:

    Olá eu excutei esse seu menu no meu blog de teste "http://keepersofmetal1.blogspot.com&quot;, mas de alguma forma ele não funcionou principalmente a parte ocultável que achei show no seu blog demo.

    Parabéns ::Clau:: como sempre fazendo excelentes trabalhos.

  17. Dantas Neto disse:

    Sim, eu li, mas eu achava que poderia fazer algum outro tipo de efeito, com algum codigo, etc, mas ta tudo bem.

    Obrigado

    E eu vi sim, aqui outro tipo de menu e acho que vou usar ele em meu blog, Obrigado pela atenção.

  18. ::Clau:: disse:

    @Dantas Neto:
    Se vc leu o tutorial percebeu q este menu é assim, este é o efeito dele! Mas se vc quiser outro tipo de menu, aconselho a procurar no nosso indice "Tutoriais Blogger", que lá vc vai encontrar outros menus e pode escolher alguns dos que estão lá.

  19. Dantas Neto disse:

    Oi, eu visito o site a pouco tempo e o mesmo e um dos melhores que já vi, mas eu tenho uma pergunta, será que não tem como dar um efeito diferente no menu?

    Agradeço a resposta e parabéns pelo ótimo trabalho que faz aqui.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.