Se você usa o Blogger para criar conteúdo, seja profissional ou por hobby, já deve ter percebido que o visual do seu site faz toda a diferença. Um bom design atrai, prende e valoriza a sua marca pessoal. E um dos elementos mais subestimados, mas que tem um peso enorme, é o rodapé.
Neste tutorial completo, você vai aprender como inserir um rodapé personalizado no seu blog Blogger, com um estilo moderno, funcional e totalmente adaptável à sua identidade visual. O melhor? Tudo isso sem precisar ser expert em código!
Além de deixar o visual mais bonito, um rodapé bem feito organiza links importantes como Sobre, Políticas e Contato; centraliza suas redes sociais de forma elegante; transmite profissionalismo e melhora a experiência do visitante.
Acesse o código do seu blog
1. Acesse www.blogger.com e entre na sua conta.
2. Vá até o menu lateral esquerdo e clique em Tema.
3. Clique na setinha ao lado de Tema e selecione o local, na parte debaixo, clique em adicionar um Gadgeg e em seguida em HTML/Javascript.
Logo em seguida
Cole o código que está aqui abaixo, dentro desse gadget e clique em Salvar
Estrutura ideal do rodapé
Uma estrutura ideal para rodapé contém três colunas bem organizadas:
- Coluna 1: Links de navegação (Home, Sobre, Políticas, etc.)
- Coluna 2: Redes sociais com ícones clicáveis
- Coluna 3: Formulário de contato funcional
Isso deixa o visual elegante, limpo e fácil de navegar — ideal para usuários e para os critérios do Google AdSense.
Além disso, essa organização ajuda o visitante a encontrar rapidamente o que precisa, sem poluição visual.
Código HTML do rodapé personalizado
Abaixo está o código pronto para ser inserido no seu layout do Blogger.
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
.footer-rainbow {
border: 5px solid;
border-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet) 1;
padding: 30px;
margin: 40px 0 0;
background-color: #111;
color: white;
font-family: 'Arial', sans-serif;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer-col {
flex: 1;
min-width: 220px;
margin: 10px;
}
.footer-col h3 {
margin-bottom: 15px;
font-size: 22px;
color: #fcd12a;
}
.footer-col a {
display: flex;
align-items: center;
gap: 8px;
color: #ddd;
text-decoration: none;
margin-bottom: 10px;
font-size: 25px;
transition: 0.3s;
}
.footer-col a:hover {
color: #fcd12a;
}
/* Ícones brilhantes nas redes */
.redes-sociais-brilho a {
color: #fff;
text-shadow: 0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff;
transition: text-shadow 0.3s ease;
}
.redes-sociais-brilho a:hover {
color: #fcd12a;
text-shadow: 0 0 10px #fcd12a, 0 0 20px #fcd12a, 0 0 30px #fcd12a;
}
.footer-form input,
.footer-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
}
.footer-form button {
padding: 10px 20px;
background-color: #fcd12a;
border: none;
color: #111;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
.footer-form button:hover {
background-color: #e0b800;
}
/* Frase colorida animada */
.random-quote {
text-align: center;
margin-top: 30px;
font-size: 26px;
font-weight: bold;
background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbowText 4s linear infinite;
}
@keyframes rainbowText {
0% { background-position: 0% }
100% { background-position: 100% }
}
</style>
<div class="footer-rainbow">
<div class="footer-content">
<div class="footer-col">
<h3>Links</h3>
<a href="#"><i class="fas fa-home"></i>Home</a>
<a href="#"><i class="fas fa-user"></i>Sobre</a>
<a href="#"><i class="fas fa-file-contract"></i>Termos de uso</a>
<a href="#"><i class="fas fa-shield-alt"></i>Políticas de privacidade</a>
<a href="#"><i class="fas fa-cookie-bite"></i>Políticas de Cookies</a>
<a href="#"><i class="fas fa-eye"></i>Página de transparência</a>
</div>
<div class="footer-col redes-sociais-brilho">
<h3>Redes Sociais</h3>
<a href="#"><i class="fab fa-instagram"></i>Instagram</a>
<a href="#"><i class="fab fa-tiktok"></i>TikTok</a>
<a href="#"><i class="fab fa-facebook-f"></i>Facebook</a>
<a href="#"><i class="fab fa-youtube"></i>YouTube</a>
</div>
<div class="footer-col">
<h3>Entrar em Contato</h3>
<form action="#" method="POST" class="footer-form">
<input type="text" name="name" placeholder="Seu nome" required />
<input type="email" name="email" placeholder="Seu e-mail" required />
<textarea name="message" rows="4" placeholder="Sua mensagem" required></textarea>
<button type="submit">Enviar</button>
</form>
</div>
</div>
<div class="random-quote" id="quoteDisplay">✨ Carregando inspiração...</div>
</div>
<script>
const frases = [
"Espalhe amor por onde for 🌈",
"Crie com o coração 💖",
"Seja luz onde houver escuridão. ✨",
"Brilhe sem medo de ofuscar ninguém 🔥",
"O mundo precisa do seu talento 🎨",
"Transforme o simples em mágico 💫",
"Sua criatividade é seu superpoder 💥",
"Ame o processo, não só o resultado 💡"
];
document.getElementById("quoteDisplay").innerText =
frases[Math.floor(Math.random() * frases.length)];
</script>
Salve e teste seu novo rodapé
Depois de inserir o código, clique em Salvar tema no Blogger. Em seguida:
- Abra seu blog em outra aba;
- Teste a exibição em computador e celular;
- Verifique se os links estão funcionando;
- Veja se o design ficou como você imaginava!
Se precisar de ajustes visuais ou responsivos, posso ajudar com prazer!
Agora é só salvar e aproveitar seu rodapé estilizado com borda arco-íris.
Benefícios de um Rodapé Personalizado
Um rodapé bem estruturado não apenas melhora a estética do seu blog, mas também oferece vantagens funcionais:
- Navegação Aprimorada: Facilita o acesso a páginas importantes, como "Sobre", "Contato" e "Políticas".
- Engajamento nas Redes Sociais: Incentiva os visitantes a seguirem suas redes sociais, aumentando sua presença online.
- Profissionalismo: Transmite uma imagem mais profissional e confiável aos leitores.
- Conformidade Legal: Ajuda a manter seu blog em conformidade com leis de privacidade e termos de uso.
Personalizando o Código do Rodapé
Para adaptar o rodapé ao seu estilo e necessidades, você pode personalizar o código conforme desejar. Aqui estão algumas dicas:
Adicionar Novos Links
Para incluir mais links na seção de navegação, copie uma das linhas existentes e modifique o texto e o ícone conforme necessário. Exemplo:
<a href="#"><i class="fas fa-blog"></i>Blog</a>Atualizar Redes Sociais
Substitua os links e ícones das redes sociais pelos seus próprios perfis. Exemplo:
<a href="https://twitter.com/seuperfil"><i class="fab fa-twitter"></i>Twitter</a>Configurar o Formulário de Contato
Altere o atributo action do formulário para o seu e-mail utilizando o serviço FormSubmit. Exemplo:
<form action="https://formsubmit.co/[email protected]" method="POST">Modificar Cores e Estilos
Ajuste as cores, fontes e estilos no bloco <style> para combinar com a identidade visual do seu blog.
8. Dicas de SEO para o Rodapé
Um rodapé bem otimizado pode contribuir para o SEO do seu blog:
- Links Internos: Inclua links para as principais páginas do seu site, facilitando a navegação e a indexação pelos motores de busca.
- Palavras-chave Relevantes: Utilize textos âncora que contenham palavras-chave relacionadas ao conteúdo do seu blog.
- Evite Excesso de Links: Mantenha o rodapé limpo e organizado, evitando a sobrecarga de links que possam confundir os visitantes.
9. Testando e Publicando o Rodapé
Antes de publicar as alterações:
- Visualize as Mudanças: Utilize a opção de visualização do Blogger para verificar como o rodapé aparece em diferentes dispositivos.
- Teste os Links: Certifique-se de que todos os links e o formulário de contato funcionam corretamente.
- Salve as Alterações: Após confirmar que tudo está funcionando, salve as mudanças e publique o blog.
Conclusão
Personalizar o rodapé do seu blog no Blogger é uma excelente maneira de melhorar a experiência do usuário, reforçar sua marca e manter a conformidade com as diretrizes do Google AdSense. Com as instruções e dicas fornecidas, você pode criar um rodapé funcional e esteticamente agradável que atenda às necessidades do seu público.
Dica extra
Como ter uma bio igual Linktree no blogger toda personalizada
Quer ter uma visão profissional de outras pessoas? Use esse modelo de Linktreen igual o que uso na bio das minhas redes sociais, ideal para um visual jovem e atualizado:
Um rodapé bem feito não é apenas o fim da página, é o começo de uma boa impressão. Dê ao seu blog o destaque que ele merece — até no último detalhe.
