[Blogger - Hacks] - Esconder a navbar do Blogger e mostrá-la ao passar o mouse

No último artigo que publiquei, eu mostrei como remover a barra de navegação do Blogger. Depois de ter publicado este artigo, eu me lembrei que há um tempo atrás eu havia visitado um blog (que não me recordo o nome), que tinha um efeito interessante em sua navbar: ela ficava o tempo todo invisível e ao passar o mouse por cima de onde ela deveria estar aparecendo, ela ficava visível. Como eu disse no artigo de remover a navbar, muitas pessoas acham a barra de navegação do Blogger útil, e por mais que algumas delas achem que a barra não combina com o blog, elas a mantêm por não estar acostumadas a gerenciar o blog apenas pelo painel de controle.

Apenas para citar um exemplo, eu já vi em vários blogs pessoas questionando coisas do tipo: "eu retirei a navbar, mas agora eu não sei mais como fazer login nem como publicar um novo artigo, o que eu faço?" etc. Na época, eu não tinha muitos conhecimentos em CSS e cheguei até a pesquisar na web como fazer este tipo de efeito, mas não obtive sucesso — até agora!

Depois de visitar o blog El Escaparate de Rosa [BLOG DESATIVADO], eu encontrei por acaso como fazer esse efeito, e com permissão da autora, Rosa Torre, resolvi compartilhar com vocês. Vocês podem ver como ficará o efeito, visitando o nosso blog de testes, basta passar o mouse na área onde deveria estar a navbar. Agora vamos ao tutorial.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione este outro código.

/* ----- Efeito de esconder e mostrar a navbar ----- */
 
#navbar-iframe {
    opacity:0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
 
#navbar-iframe:hover {
    opacity:1;
}


4. Para finalizar clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Pronto, agora basta acessar a página inicial do seu blog e passar o mouse por cima da área da navbar para ter certeza de que o código está funcionando corretamente.

INFORMAÇÃO: este código foi testado nos navegadores: Mozilla Firefox, Google Chrome, Opera e Internet Explorer. Nos três primeiros o resultado foi perfeito, mas no Internet Explorer o código não funcionou. Confira mais artigos sobre a navbar visitando esse marcador.

Site de origem: El Escaparate de Rosa.

Atualização — 15.08.2011 às 11h15
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger, e para adição de um efeito de transição suave em CSS3. Devo informar também nessa atualização, que o blog El Escaparate de Rosa, que foi citado no artigo não está mais no ar, pois a nossa querida amiga, Rosa Torre, dona do blog supracitado, faleceu.

Atualização — 07.07.2012 às 02h55
Recentemente a equipe do Blogger adicionou uma opção nativa que permite remover a navbar de maneira simples e rápida. Caso você queira saber como removê-la utilizando esse novo recurso, visite nosso artigo sobre o assunto clicando neste link.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 17 comentários neste artigo!

  1. Boa, gostei dessa. Também sou um daqueles que não gosta dela, mas a acha bem útil, portanto não a tirava. Com essa de esconder ficou perfeito, valeu.

    ResponderExcluir
  2. Alguem sabe como excluir akela mensagem "Desgin fulano de tal. tecnologia do blogger???"

    ResponderExcluir
  3. Daybson: confira o novo artigo que foi publicado à partir de sua dúvida:

    Como remover o widget “Attribution” do rodapé do blog.

    Espero que lhe ajude.
    Forte abraço.

    ResponderExcluir
  4. Olá,
    Valeu, super dica e muito fácil de fazer. Estava a procura disso a algum tempo. Ficou 10. Parabéns

    ResponderExcluir
  5. Cara, obrigado por me responder. deu certo sim. super simples e bem explicado. grande ajuda. abraço.
    fábio

    ResponderExcluir
  6. Ae e se quiser sumir com ela de ver coloca opacicy 0 na ultima tbm xD
    Ninguém vai ver mas ainda vai ta lá...

    ResponderExcluir
  7. One piece e cia: isto fará com que a navbar fique oculta sim, mas para escondê-la de vez, eu aconselho este outro código: Como remover a barra de navegação do Blogger.

    ResponderExcluir
  8. Ficou super bem, funcionou perfeitamente e meu blog ta ficando show de tanta modificação !!!

    ResponderExcluir
  9. Infelizmente não consegui... Se não for pedir de mais; você não poderia fazer uma vídeo e postar no youtube para pessoas que assim como eu, não obtiveram sucesso em "Esconder a navbar do Blogger e mostrá-la ao passar o mouse".

    ResponderExcluir
  10. Olá Igor, estou aqui novamente pois consegui obter o efeito "esconder a navbar do Blogger e mostrá-la ao passar o mouse". Por tanto, pode desconsiderar o pedido que fiz anteriormente e, gostaria de lhe agradecer; muito obrigado mesmo...apesar da navbar ser muito útil ela dá uma aparência muito amadora ao Blog.

    ResponderExcluir
    Respostas
    1. Olá VPR, fico feliz que tenha conseguido aplicar o efeito em seu blog. Sou um dos adeptos dessa frase também, mas é inegável que para usuários inexperientes e até autores, ela pode fazer a diferença, então esse efeito pode ser uma ótima opção! Agradeço a visita e o comentário! Volte sempre.

      Excluir
  11. Respostas
    1. Olá Dessa, fico feliz que tenha gostado do blog! Espero que encontre artigos úteis para ti. Agradeço o comentário, volte sempre.

      Excluir
  12. estou aproveitando todas as dicas! obg

    ResponderExcluir
    Respostas
    1. Olá EikeWilla, que bom que as dicas estão sendo úteis para ti, faça bom uso! Volte sempre.

      Excluir
  13. Olá Igor, estou utilizando este recurso, amei o resultado.
    Posso postar em meu blog, claro com os devidos créditos?

    ResponderExcluir
    Respostas
    1. Olá Claudine, fico feliz que tenha conseguido utilizar o recurso e que esteja gostando. Pode postar em seu blog sim, só peço que não copie o meu artigo na integra, mas sim que crie seu tutorial com suas próprias palavras e explicações, para evitar que meu artigo seja visto como "duplicado" pelo Google Search. Os créditos são sempre bem-vindos! Agradeço a sua visita e o comentário, volte sempre. Um abraço.

      Excluir