🧱 O que é a Navbar do Blogger e por que removê-la?

10:48

🧱 O que é a Navbar do Blogger e por que removê-la?

A Navbar (barra de navegação) é aquela faixa cinza, azul ou preta que o Blogger insere automaticamente no topo de todos os blogs hospedados na plataforma. Ela contém links como "Pular para o conteúdo", "Pesquisar", "Compartilhar", "Denunciar abuso" e o logotipo do Blogger.

Embora útil para quem está começando, muitos blogueiros preferem removê-la por razões estéticas (para não quebrar o design personalizado) ou para ganhar alguns pixels extras de espaço no topo da página.

⚠️ Aviso importante antes de modificar o template

Faça backup do seu tema antes de qualquer alteração no código HTML.
No Blogger, vá em Tema → Fazer backup / Restaurar → Baixar modelo completo.
A remoção da Navbar não viola os Termos de Serviço do Blogger, desde que você não remova outros elementos obrigatórios (como o aviso de cookies ou links de atribuição, se exigidos).

🔧 Método 1 – Remover a Navbar com CSS (recomendado e mais seguro)

Este método apenas esconde a Navbar, sem removê-la do código. É reversível e não quebra outros recursos.

Passo a passo:

No painel do Blogger, acesse Tema → Editar HTML.
Dentro do editor, use Ctrl + F (ou Cmd + F no Mac) para localizar a tag:
html
```
]]></b:skin>
```

Logo acima dessa tag, cole o seguinte código CSS:

/* Remove a Navbar do Blogger (esconde completamente) */
#navbar-iframe,
.navbar,
.navbar-iframe {
    display: none !important;
    height: 0px;
    visibility: hidden;
    opacity: 0;
}
body {
    margin-top: 0 !important; /* Remove espaçamento extra que a Navbar poderia deixar */
}

Clique em Salvar tema.

💡 Por que esse código é melhor?
Inclui !important para sobrescrever estilos conflitantes.
Adiciona opacity: 0 e margin-top: 0 para garantir que nenhum espaço vazio permaneça.
Usa os seletores .navbar e .navbar-iframe para maior compatibilidade com diferentes versões do Blogger.

🧪 Método 2 – Remover via HTML (remove o elemento fisicamente)

Se você deseja que a Navbar nem seja carregada no código-fonte, pode apagar manualmente o trecho que a insere. Porém, isso exige mais cuidado e pode ser desfeito ao atualizar o template.

Passos:

No editor HTML, marque a opção "Expandir modelos de widgets".

Procure por:

<b:include data='blog' name='navbar'/>

<div id='navbar-iframe-container'>

Remova completamente essas linhas (ou comente-as usando ).
Salve o tema.

⚠️ Cuidado: Esse método pode causar erros em alguns temas antigos. Prefira sempre o método CSS (Método 1).

🖼️ Exemplo visual do antes e depois

Antes da remoção	Depois da remoção
Barra colorida no topo com ícones do Blogger	Topo limpo, sem nenhuma barra, integrado ao seu design

✅ Verificação e solução de problemas

Após salvar, acesse seu blog em uma janela anônima (ou limpe o cache do navegador). Se a Navbar ainda aparecer:

Verifique se o código foi colado antes de ]]></b:skin> e não depois.
Teste o tema padrão do Blogger (ex: "Contempo") – alguns temas personalizados podem ter seletores CSS diferentes.
Certifique-se de que não há outro CSS conflitante no template.

🔗 Links úteis (novos e válidos)

Central de Ajuda do Blogger – Personalizar tema (oficial)
Fórum de desenvolvimento do Blogger (inglês) – para dúvidas avançadas
Gerador de backup automático de tema (ferramenta externa confiável)

📚 Resumo

Remover a Navbar do Blogger é um procedimento simples e seguro, especialmente usando o método CSS. Isso deixa o visual do seu blog mais profissional e livre de elementos indesejados no topo. Lembre-se sempre de fazer backup antes de qualquer edição no HTML.

🔑 Keywords:

remover navbar blogger, esconder barra do blogger, css navbar-iframe, tirar navbar blogspot, personalizar tema blogger, editar html blogger, remover barra superior blogger, display none blogger, navbar hidden, blog sem navbar, dicas blogger brasileiro, template limpo