Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1513083632
Vida do cache: 1513126832
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

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

Hospedagem - 728 x 90

Menus

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.

Sobre o autor | 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.

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.

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

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