Como mudar a posição da barra de navegação (navbar) do Blogger

Hoje veremos como mudar a posição da barra de navegação (navbar) do Blogger, que por padrão fica localizada no topo dos blogs, para o rodapé do mesmo. Você pode ver um exemplo de como a navbar ficará visitando nosso blog de testes. Esse artigo foi postado originalmente no blog El Escaparate de Rosa, mas a ideia de mudar a posição da navbar surgiu da Mama, dona do blog Mamanunes.

Imagem por: Toolmantim

Mudando a posição da barra de navegação do Blogger


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, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

]]></b:skin>

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

/* ----- CSS para mudar a posição da barra de navegação ----- */

.navbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
}


4. Para ter certeza de que o código funcionou e a barra de navegação agora está localizada no rodapé do blog, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Pronto, agora basta ir em seu blog e conferir como ficou. Se você gostou deste artigo, achou ele útil ou ficou com dúvidas, participe deixando um comentário. E não se esqueça de conferir nossos outros artigos sobre a navbar nos links abaixo:
Site de origem: El Escaparate de Rosa e Mamanunes.

Atualização — 08.10.2011 às 18h30
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger. Devo informar também nesta 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.
É 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 4 comentários neste artigo!

  1. Saudações,
    excelente suas dicas! Porém gostaria de uma ajuda. Tentei trocar o template do blog e a navbar ficou fixa na coluna lateral. Como a recoloco no topo (da forma tradicional)?
    Desde já obrigado.

    ResponderExcluir
    Respostas
    1. Olá Milton, acabei de visitar o seu blog, e pude ver que a navbar se encontra no topo do blog. Caso você tenha consigo resolver o problema, tudo bem, caso ainda não tenha, por favor, informe o endereço do blog aonde está ocorrendo o problema. Eu que agradeço a visita. Abraços.

      Excluir
  2. Olá, e a barra de menu do blog, você sabe onde posso muda-la de posição? Não exatamente pro rodapé, quero apenas baixa-la.

    ResponderExcluir
    Respostas
    1. Olá Ronny, assim como a barra de navegação, você pode alterar a posição de qualquer elemento do blog usando códigos CSS. Porém, como cada template possui uma estrutura diferente fica difícil dizer qual é o código exato. E depende também do efeito (posição) que você quer aplicar à barra de menu.

      Excluir