Como Retirar Navbar do Blogger - Ocultar a Barra Padrão do Blog

Você pode tirar a barra do blogger (navbar) facilmente sem precisa editar códigos HTML no seu blogspot. Agora o Blogger tem a opção de ocultar a barra nas suas configurações. Nós já mostramos como fazer isso pela pagina editar HTML: Retirar a barra do blogspot, mas agora ficou muito mais simples. Além disso, o blogger permite que você use a barra com uma cor de fundo semitransparente.

Como retirar navbar do blogger

Entre na pagina layout, clique para editar a Navbar depois é só escolher a opção "desativado" ou se quiser uma das opções e cores de fundo da barra do blog.

Clique em salvar e já está pronto. Essa novidade vai facilitar bastante porque muitos blogueiros tinham problemas ou duvidas sobre ocultar a barra principalmente em templates prontos onde as tags personalizadas geram alguns erros. Veja outras mudanças recentes do blogger:
Blogger Melhora Recursos de SEO (Personalizar Preferências de Busca)
Colocar Descrição em cada Postagem do Blogger - Usar Meta Tags
Como Enviar Automaticamente as Atualizações do Blog para o Google Plus

E aproveite para ver também:
Criar barra de ferramentas (Wibiya)
Criar barra com acessórios no blog (Conduit)

Parece que esse ano o Blogger está mesmo disposto a realizar melhorias na sua plataforma de blogs e com isso deixar mais fácil o processo de criação e otimização de blogs. Agora é só aguardar por mais novidades do blogspot.

19 comentários :

  1. mas fica um espaço vazio no topo do blog :-(
    fica muito feio

    ResponderExcluir
  2. Bia
    o blogger tem feito muitas mudanças e as vezes falta algum ajuste.

    mas enquando o blogger não resolve isso podemos colocar no html do blog essa linha:

    #navbar{display:none}

    como faziamos anteriormente, mas é claro isso é uma opção para quem não gostar do espaço que ficar no topo da pagina.

    ResponderExcluir
  3. Fabiano, descobri essa opção ao acaso um tempo atrás e adorei. Contudo percebi um bug, tbm por acaso, qdo estava customizando a parte dos comentários. A opção excluir comentário não aparecia. Não imaginava q pudesse ter relação com a navbar. Só descobri isso testando o template em outro blog q por sorte tinha a navbar. Então qdo tirei a navbar a opção excluir saiu de novo. Reativei navbar e a opção excluir reapareceu, bingo! Então testei tirar navbar apenas pelo código HTML, e não deu mais bug.
    Vim aqui dizer, porq quase achei q meu template estava estragado, e já ia jogar fora todo meu trabalho por algo tão simples de resolver. Talvez possa ajudar alguém aí.
    Abraço.

    ResponderExcluir
  4. Excelente!
    Obrigada pela dica e parabéns por seu ótimo trabalho.
    Abraços.

    ResponderExcluir
  5. o blogger percebeu q queremos mudar o favicon, retirar a navbare personalizar nossos links...
    estao no caminho certo

    ResponderExcluir
  6. Fabiano gostaria de saber se usar agregadores de links pode nos deixar mal vistos pelo google e se você conhece uma maneira de divulgar o blog sem agregadores pois vejo muitos blogueiros fazendo isso hoje divulgo mais meu blog conversando com amigos já que tenho um site que trabalho de consultor

    ResponderExcluir
  7. e também colocar plano de fundo ^_^

    ResponderExcluir
  8. Rodrigo Rocha o problema dos agregadores de links é o conteudo duplicado.

    por exemplo se postar o mesmo texto em alguns casos o google vai mostrar o agregador antes do seu blog.

    já usei esse tipo de site por um tempo, mas não uso mais porque acho que não vale a pena.

    ResponderExcluir
  9. me desculpe perguntar isso aki mais como faz para botar um banner de parceiros com gifs animados tipo a desse site: http://pokemonmythology.110mb.com/news.php mais e claro uma que se adpte ao template Espetacular Ltda. e que seja todo quadrado msm = os outros gadget me desculpe por perguntar aki mais e pq eu não achei na net explicando como é que faz isso.

    ResponderExcluir
  10. o banner com gif animado é como qualquer outra imagem, mas precisa hospedar fora do blogger porque o blogger converte a imagem para .jpg

    ResponderExcluir
  11. valeu pela ajuda eu sou meio leigo em blogs :/ mais seu blog ta sendo uma grande ajuda pra min.

    ResponderExcluir
  12. não sabia estava apanhando pra retirar oespaço vazio mais você respondeu a pergunta a Bia que era minha mesma pergunta solução para o espaço vazio #navbar{display:none}

    ResponderExcluir
  13. Fabiano, onde no HTML do blog que é para colocar #navbar{display:none}? Tem que retirar os códigos referentes à navbar que já estão no HTML? Obrigada!

    ResponderExcluir
  14. Fabiano, encontrei outro código que funcionou comigo. Retirou a barra e o espaço. Créditos ao http://www.alexsandersilva.com/2011/08/tirar-navbar-do-blogger-e-tirar-espaco.html

    No seu html procure por /* Variable definitions , acima dela coloque este código:
    #navbar-iframe {
    display: none !important;
    }
    body .navbar {
    height:0px;
    }
    .content-outer {
    margin-top:0px;
    }

    ResponderExcluir
  15. pode ser antes de linha body{......

    isso fica no começo do html

    ResponderExcluir
  16. Oi Fabiano.
    Estão aparecendo três linhas de código tipo html, logo acima da navbar no meu blog. Não sei como e quando começou. Já tentei retirar a navbar conforme sua dica, mas as linhas aparecem com ou sem a navbar. Vc poderia me ajudar?
    meu blog: http://potpourridakaren.blogspot.com.br/
    Obrigada

    ResponderExcluir
  17. Karen você colocou o trecho:

    .comments-page {background-color: #f2f2f2;}
    #blogger-comments-page {padding: 0px 5px;display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

    -->


    tem que colocar esse código antes de < /style >

    veja que no seu html tem isso duas vezes então apague uma delas

    ResponderExcluir
  18. Fabiano, muito obrigada por sua gentileza em responder.
    Resolveu parcialmente. Deletei o código depois de < /style >, mas ainda ficou aparecendo em cima da navbar o código -->
    No html ficou assim:
    < /style >

    ]]>/b:skin>




    Se tiro o código ]]>, dá erro e não consigo salvar a modificação.
    Muitíssimo obrigada desde já.
    Um abraço.

    ResponderExcluir
  19. Nossa parabéns pela informação muito fácil, procurei outros que ensinavam entrar e modificar pelo código e tal mas, com as novas mudanças não conseguia alterar. Valeu!
    sweetbulunga.com

    ResponderExcluir