segunda-feira, 20 de junho de 2011

Remover a Barra de Navegação e o Espaço do Blogspot

Este é um tutorial para remover a barra de navegação do Blogspot. Aprenda a editar o seu template para retirar a Navbar do seu blog hospedado no Blogger.

Para completar este processo você terá que fazer alterações ao código CSS do seu blog, é importante que guarde uma cópia primeiro no seu computador para o caso de fazer um erro e estragar o layout do seu blog.

O primeiro passo é ir a Design > Editar html e clicar em Transferir Modelo Completo para criar uma cópia de segurança do seu template, depois de clicar guarde a cópia no seu computador numa pasta onde seja fácil voltar a encontrar o modelo.

Depois de ter a sua cópia guardada passamos ao segundo passo e às alterações: 
  1. Usando a função de procura do seu navegador (Editar > Localizar. no Internet Explorer) localize a seguinte linha no código do template: /* Variable definitions
  2. Crie espaço antes desse texto e cole este código: #navbar-iframe {display: none !important;}
  3. Clique em guardar modelo e verifique se não aparece nenhuma mensagem de erro depois de guardar.
Ilustração da Alteração
remover a barra de navegação do blogspot

Agora refresque o seu blog e se tudo ficar como deve ser a barra de navegação do Blogspot será removida.

Reduzir o Espaço da Barra

Como deve reparar a barra desaparece mas agora parece que o seu blog fica deslocado para baixo, nada que um bocado de CSS não resolva.
  1.  Procure por /* Content usando o método da alteração ao código anterior e por baixo encontrará o CSS para a tag body
  2. Na linha acima de body cole #navbar{height:0px;}
  3. Guarde o seu template e veja se não aparecem nenhumas mensagens de erro
Ilustração da Alteração
diminuir navbar
Se tudo correu bem agora já conseguiu remover a barra de navegação do blogspot e diminuir o espaço que a Navbar deixa depois de desaparecer. Se algo correu mal durante as alterações e o desenho do seu template ficou estragado você pode carregar o modelo original que guardou no inicio em Design< > Editar html.

18 comentários:

  1. Oi, Pedro! Gostaria de te agradecer muito por essa dica! Você foi o único que conseguiu fazer o tal espaço desaparecer! Tentei outras dicas em outros blogs, mas acho que estavam com algum erro. Estou muito feliz por ter conseguido retirar o bendito espaço!
    Obrigada e parabéns pelo seu blog!
    Abraços.

    ResponderExcluir
  2. Fico contente por este post te ter ajudado Kaká.

    Abraços

    ResponderExcluir
  3. eu passei uma hora atras e graças a deus encontrei este site que e realmente fodastico parabens, consegui.

    ResponderExcluir
  4. Ainda bem que o post e as instruções para remover a barra de navegação foram úteis :)

    ResponderExcluir
  5. Olá, Pedro Gomes, gostei bastante da dica do seu blog. Gostaria que você me tirasse uma dúvida: como você fez para fazer o seu blog de forma que a barra de menu ficasse exatamente da largura da resolução de qualquer tela de computador.

    Como você fez o topo do seu blog também de forma que a larga se ajuste a resolução de qualquer tela de computador em que em que seu blog for aberto.

    ResponderExcluir
  6. Olá Amancio, este template faz isso tudo automaticamente. Dentro da área de administração do Blogger você encontra lá este e outros templates que pode usar para mudar o aspeto do seu blog.

    De qualquer forma para adaptar a largura de uma layer à área total em que está contida é usando o estilo de CSS {width: 100%;}

    Abraço

    ResponderExcluir
  7. Que Deus seja louvado por este post. Tentei várias vezes e nunca conseguia. Estava lendo desanimadamente este post, mas quando deu certo, eu ví que esse é um ótimo site. Muito obrigado! Mesmo! :D

    ResponderExcluir
  8. Muito obrigado por compartilhar a informação!
    Deu tudo certo!

    ResponderExcluir
  9. Perfeito! depois de horas pesquisando finalmente vc me ajudou muito! Um abraço!

    ResponderExcluir
  10. Boas Pedro!
    Muito obrigado pela dica, ajudaste muito!
    Por acaso, até gostei bastante do espaço que ficou e nem usei o segundo código! :D

    Já agora, sabes como tirar o rodapé que diz "Tecnologia do Blogger"?

    ResponderExcluir
  11. Gostei muito da dica ,conseguir ressolver este problema,o meu blog é http://favordicas.blogspot.com.br/

    ResponderExcluir
  12. Parabens muito obrigado, ajudou bastante mesmo!

    ResponderExcluir
  13. vcs são muito 10.. parabéns ai manos ...ficou 1000

    www.prandreroberto.org

    ResponderExcluir
  14. Meu blogger não cabe na tela do PC em outros computadores que não o meu. Você pode me ajudar nisso?

    ResponderExcluir
  15. Show de bola Pedro. Depois de ler os outros blog's, a sua dica realmente funciono.
    Obrigado

    ResponderExcluir
  16. Parabéns. Há tempos não encontrava um tutorial relacionado a essa parte de html tão simples e objetivo.

    Obrigado!

    ResponderExcluir