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.

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.

Postagens mais Comentadas Receba Dicas por E-mail Recomendações dos Leitores

Link desta Pagina

19Comentários:

Bia disse...: mas fica um espaço vazio no topo do blog :-(
fica muito feio; 25 de julho de 2012 09:17
Fabiano Roberto disse...: 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.; 25 de julho de 2012 09:33
Meri Pellens disse...: 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.; 25 de julho de 2012 11:32
Daniela disse...: Excelente!
Obrigada pela dica e parabéns por seu ótimo trabalho.
Abraços.; 25 de julho de 2012 15:54
Free Step Tube disse...: o blogger percebeu q queremos mudar o favicon, retirar a navbare personalizar nossos links...
estao no caminho certo; 26 de julho de 2012 00:36
Rodrigo Rocha disse...: 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; 26 de julho de 2012 09:32
Brunolind disse...: e também colocar plano de fundo ^_^; 26 de julho de 2012 19:29
Fabiano Roberto disse...: 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.; 26 de julho de 2012 22:31
sr.chrono trigger disse...: 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.; 27 de julho de 2012 04:00
Fabiano Roberto disse...: o banner com gif animado é como qualquer outra imagem, mas precisa hospedar fora do blogger porque o blogger converte a imagem para .jpg; 27 de julho de 2012 08:46
sr.chrono trigger disse...: valeu pela ajuda eu sou meio leigo em blogs :/ mais seu blog ta sendo uma grande ajuda pra min.; 29 de julho de 2012 00:11
Elielton Queiroz disse...: 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}; 4 de agosto de 2012 00:54
Anna disse...: 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!; 15 de agosto de 2012 16:15
Anna disse...: 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;
}; 15 de agosto de 2012 16:44
Fabiano Roberto disse...: pode ser antes de linha body{......

isso fica no começo do html; 15 de agosto de 2012 18:24
Karen RZ disse...: 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; 17 de março de 2013 21:23
Fabiano Roberto disse...: 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; 18 de março de 2013 00:06
Karen RZ disse...: 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.; 18 de março de 2013 15:16
SB TT disse...: 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; 26 de abril de 2013 10:36

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

19Comentários:

Postar um comentário