Se você está procurando dar uma cara nova ao seu blog, uma das primeiras coisas que muita gente quer mudar é o rodapé das postagens. Aquela área que aparece depois do texto, com data, autor, comentários e labels — o famoso .post-footer do Blogger. Às vezes ele polui o visual, outras vezes você quer um layout mais limpo e moderno.
Neste guia completo, vou te mostrar como ocultar ou personalizar completamente o rodapé das postagens do seu Blog da Mi (ou qualquer template do Blogger) usando CSS. Você não precisa mexer em HTML complicado, nem ter medo de quebrar o blog. Vamos fazer isso de um jeito simples e seguro!
O que é o Rodapé das Postagens?
No template clássico do Blogger, toda postagem tem uma área no final chamada .post-footer. Dentro dela, você encontra:
- Data da postagem: geralmente exibida no cabeçalho ou no próprio rodapé.
- Nome do autor: quem escreveu o post.
- Links de comentários: "Nenhum comentário" ou o número de comentários.
- Labels (marcadores): as categorias do post.
- Ícones de compartilhamento: dependendo do template.
Para muitos blogs, principalmente os de beleza, moda e estilo de vida como o Blog da Mi, essa área pode acabar poluindo o design. A boa notícia é que com algumas linhas de CSS, você pode remover ou estilizar cada um desses elementos.
Método 1: Ocultar Todo o Rodapé com CSS
Se você quer simplesmente fazer sumir toda a área do rodapé dos posts, o CSS mais direto é:
.post-footer {
display: none;
}
Onde colocar esse código?
No painel do Blogger, vá em Tema > Personalizar > Avançado > Adicionar CSS. Cole o código e clique em "Salvar". Pronto! O rodapé de todas as postagens do seu blog vai desaparecer.
Dica importante: Sempre tire um print ou salve o código original do seu template antes de fazer qualquer alteração. Assim, se algo der errado, você volta ao normal rapidinho.
Método 2: Remover Itens Específicos do Rodapé
Talvez você não queira remover tudo. Quem sabe você quer manter os marcadores, mas tirar a data e o autor? Também dá pra fazer!
O Blogger organiza o rodapé com classes específicas. Você pode usar estas regras CSS para ocultar só o que te incomoda:
/* Remove a data */
.date-header {
display: none;
}
/* Remove o nome do autor */
.post-author {
display: none;
}
/* Remove os links de comentários */
.post-comment-link {
display: none;
}
/* Remove os marcadores (labels) */
.post-labels {
display: none;
}
/* Remove os ícones de compartilhamento, se houver uma classe específica */
.post-share {
display: none;
}
Você pode combinar essas regras ou usar só as que quiser. O legal do CSS é que você tem o controle total.
Método 3: Personalizar o Rodapé em vez de Ocultar
Se você acha que ocultar é radical demais, que tal dar uma renovada no visual do rodapé? Você pode mudar cores, fontes, bordas e até mesmo a disposição dos elementos.
Que tal um rodapé mais discreto e elegante?
.post-footer {
background: #faf6f8;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
color: #666;
text-align: center;
border-top: 1px solid #fee0ea;
}
.post-footer a {
color: #ad3063;
font-weight: 600;
}
.post-footer a:hover {
color: #ff5600;
text-decoration: underline;
}
Com esse código, você transforma aquele rodapé padrão em uma área estilizada e combinando com a paleta de cores do seu blog. Pode aplicar essa mesma ideia para qualquer elemento!
Minha dica pessoal: Eu gosto de manter os marcadores (labels) e o link para comentários, mas com um visual bem clean. Deixo o rodapé com fundo rosado claro e fonte menor, combinando com o estilo feminino do blog. Fica uma graça!
Dicas Importantes Antes de Sair Mudando Tudo
- Responsividade: Depois de aplicar as alterações, teste no celular e no computador. O que fica bom no desktop pode quebrar no mobile. No nosso template responsivo, essas alterações funcionam de boa, mas é sempre bom verificar.
- Backup do Template: Antes de qualquer alteração, vá em Tema > Fazer download. Se algo der errado, você restaura o backup.
- Específico para uma postagem: Se você só quer ocultar o rodapé em um post específico, pode usar a classe
#post-XXXX(substitua pelo ID da postagem) antes do seletor. Exemplo:#post-123456 .post-footer { display: none; }.
Perguntas Frequentes (FAQ)
Ocultar o rodapé afeta o SEO do meu blog?
Não, ocultar o rodapé com CSS não afeta o SEO. O Google continua lendo todo o conteúdo da página, inclusive o que está oculto por display: none. Você só está mudando a aparência para os visitantes.
Esse código funciona em qualquer template do Blogger?
Sim, as classes .post-footer, .date-header e .post-author são padrão do Blogger. Mesmo que seu template seja diferente, essas classes existem. O que pode mudar é a forma como estão organizadas, mas o CSS ainda funciona.
E se eu quiser que o rodapé apareça de novo?
É só remover ou comentar o CSS que você adicionou. Vá em Adicionar CSS, apague as linhas e salve. Pronto, o rodapé original volta ao normal.
Posso esconder o rodapé só nas páginas estáticas?
Sim! Use o seletor .static_page .post-footer { display: none; } para ocultar apenas nas páginas (como Sobre, Contato).
Conclusão
Personalizar o blog é uma delícia, não é? Com essas dicas, você já consegue deixar o rodapé das postagens exatamente do seu jeito, seja ocultando completamente ou só dando uma ajustada no visual. O importante é que o layout fique com a sua cara e agradável para quem lê.
Gostou do tutorial? Se tiver qualquer dúvida, é só deixar um comentário ou me procurar nas redes sociais. Vou adorar ver como ficou o seu blog! 💖