Olá, pessoal! Tudo bem com vocês?
Hoje vim responder a uma dúvida que muita gente me manda no direct do Instagram e também nos comentários aqui do blog: como ocultar o rodapé (footer) apenas em algumas postagens específicas no Blogger.
Seja para criar uma landing page de afiliado, uma página de vendas de um produto digital, um post de sorteio ou até mesmo um agradecimento pós-compra, esconder o rodapé pode dar um aspecto mais limpo e profissional para a página, tirando distrações e focando o leitor no conteúdo principal.
Mas calma, não precisa ter medo de quebrar o template! Separei 3 métodos bem práticos e seguros para você fazer isso. Vamos começar?
Por que ocultar o rodapé?
O rodapé do Blogger normalmente exibe informações como copyright, créditos do template e links de navegação. Em páginas de conversão, como um post de venda, ter muitos links pode fazer o visitante sair da página. Por isso, ocultar estrategicamente o footer pode aumentar o foco no seu CTA (chamada para ação).
Método 1: Usando Condicionais no Template (O Mais Recomendado)
Esse método é o mais elegante e profissional, pois não agride o código do template e mantém a organização.
- Passo 1: Vá em Tema > Editar HTML.
- Passo 2: Localize a seção do rodapé. No template clássico do Blogger, é geralmente a div
<div id='footer-wrapper'>. Em templates modernos, pode ser a tag<footer>,<div class='site-footer'>ou<div class='footer-outer'>. - Passo 3: Agora, vamos usar as tags condicionais do Blogger para exibir o rodapé apenas quando NÃO for a postagem desejada.
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.url == "https://www.michelleoliveira.com/2018/07/ocultar-o-rodape-das-postagens-no.html"'>
<!-- Não exibe nada (postagem específica) -->
<b:else/>
<div id='footer-wrapper'>
<!-- Coloque aqui o código COMPLETO do seu rodapé -->
</div>
</b:if>
<b:else/>
<div id='footer-wrapper'>
<!-- Coloque aqui o código COMPLETO do seu rodapé -->
</div>
</b:if>
Vantagem: O rodapé simplesmente não é carregado no HTML da página, o que é ótimo para performance e SEO da página em questão.
Desvantagem: Exige acesso ao template e conhecimento básico para não cometer erros.
Método 2: CSS Específico para a Postagem (O Mais Prático)
Se você não quer mexer no template ou só precisa ocultar o rodapé de vez em quando, o CSS direto na postagem é a melhor solução.
- Passo 1: Na edição da postagem, clique em HTML.
- Passo 2: Cole o seguinte código no início do conteúdo:
<style>
#footer-wrapper, .footer-outer, .site-footer {
display: none;
}
</style>
Importante: Use o ID ou classe exata do seu rodapé. Se você não sabe qual é, use a ferramenta "Inspecionar" do navegador (botão direito > Inspecionar) para descobrir.
Dica bônus: Se quiser ocultar apenas no celular, use:
@media (max-width: 767px) {
#footer-wrapper { display: none; }
}
Vantagem: Rápido e não altera o template global.
Desvantagem: O rodapé ainda é carregado, apenas fica invisível. E você precisa fazer isso post por post.
Método 3: Ocultar com JavaScript (O Mais Versátil)
Para quem tem um template muito dinâmico ou precisa de uma solução que funcione com qualquer tema, o JavaScript pode ser a saída.
Adicione este script no final do conteúdo da sua postagem (no modo HTML):
<script>
//<![CDATA[
(function() {
var rodape = document.querySelector('#footer-wrapper, .site-footer, .footer-outer');
if (rodape) {
rodape.style.display = 'none';
}
})();
//]]>
</script>
Vantagem: Funciona em qualquer template, mesmo os mais complexos.
Desvantagem: O rodapé pisca rapidamente antes de ser ocultado (se a página for muito pesada). Depende do JavaScript estar habilitado.
Cuidados Importantes ao Ocultar o Rodapé
- SEO: O rodapé geralmente contém links importantes para o PageRank. Ocultá-lo em massa não é recomendado. Use apenas em páginas específicas e com um objetivo claro.
- Navegação: Seu visitante pode querer acessar a página "Sobre" ou "Contato" que está no footer. Em landing pages, isso não é um problema, mas em posts normais, talvez seja melhor deixar visível.
- Links de Afiliado: Muitos blogs colocam links de afiliado no rodapé. Ao ocultar o footer, você pode estar perdendo potenciais comissões.
- Acessibilidade: Leitores de tela podem se beneficiar dos links de navegação do footer.
Perguntas Frequentes (FAQ)
1. Preciso de conhecimentos avançados?
Não. O método CSS é bem simples e qualquer pessoa consegue aplicar. O método do template requer um pouco mais de cuidado, mas seguindo o passo a passo fica fácil.
2. Isso funciona em qualquer template?
Os métodos CSS e JavaScript funcionam em praticamente qualquer template. O método das condicionais funciona em todos os templates do Blogger, mas você precisa localizar o código exato do seu rodapé.
3. Como faço para ocultar o rodapé de várias postagens ao mesmo tempo?
No método das condicionais, você pode usar: <b:if cond='data:blog.url == "URL1" or data:blog.url == "URL2"'>. No JavaScript, você pode criar uma lista de URLs.
4. O rodapé oculto ainda conta para o carregamento da página?
No método CSS e JavaScript, sim, o HTML ainda é baixado, mas fica oculto. No método das condicionais, ele nem é carregado.
5. Posso reverter a alteração facilmente?
Sim! É só apagar o código que você adicionou no post (CSS ou JS) ou reverter a alteração no template.
Conclusão
Agora você já sabe 3 maneiras diferentes de ocultar o rodapé das postagens no Blogger. Escolha a que mais se adapta ao seu nível de conhecimento e às necessidades do seu blog. Lembre-se sempre de testar as alterações e priorizar a experiência de navegação dos seus leitores.
Se você gostou deste tutorial, compartilhe com as amigas e deixe o seu comentário aqui embaixo contando qual método você usou e se deu certo! Fico muito feliz em ajudar.
Beijos e até o próximo post!
Comentário em Destaque
Oi Michelle! Muito obrigada pelo tutorial. Eu estava quebrando a cabeça para ocultar o rodapé nos meus posts de divulgação de afiliados. O método do CSS direto no post funcionou perfeitamente e foi super rápido de aplicar. Valeu mesmo pela dica, seu blog é uma referência para mim!