Quer dar uma cara nova ao seu blog? Um dos primeiros passos para personalizar seu layout é trocar as cores do template. Neste tutorial rápido, você vai aprender como fazer isso usando apenas um código simples de CSS.
1. Escolha a Cor Desejada
Antes de começar, você precisa saber o código hexadecimal da cor que deseja usar. Esses códigos sempre começam com um # e são seguidos por números e letras (ex: #000000
para preto, #ffffff
para branco).
Clique aqui para acessar uma tabela de cores completa
2. Entendendo o Código
O comando que você vai usar é:
background: #000000;
Esse exemplo aplica um fundo preto. Para mudar para outra cor, basta substituir o código. Por exemplo, para um fundo branco:
background: #ffffff;
Dica: Se o trecho de código que você quer editar já tiver background
, é só trocar o código da cor, sem duplicar a linha.
3. Como Aplicar as Mudanças no Blogger
Agora que você já escolheu as cores, siga os passos abaixo:
🔧 Acesse o HTML do seu template:
- Vá em Layout > Editar HTML.
- Antes de tudo, clique em "Baixar modelo completo" para salvar uma cópia de segurança do seu template.
4. Onde Alterar as Cores
Aqui estão as principais áreas do blog e onde você pode mudar a cor de fundo:
Fundo geral do blog
body {
background: #sua-cor;
}
📄 Área principal do conteúdo
#outer-wrapper {
background: #sua-cor;
}
Cabeçalho (header)
#header {
background: #sua-cor;
}
Barra lateral (sidebar)
#sidebar-wrapper {
background: #sua-cor;
}
Área dos posts
#main-wrapper {
background: #sua-cor;
}
Rodapé (footer)
#footer {
background: #sua-cor;
}
5. Visualize e Salve
Depois de aplicar as alterações, clique em "Visualizar" para conferir como ficou. Se estiver tudo certo, clique em "Salvar". E pronto — seu blog estará com um visual totalmente novo!
💬 Gostou da dica?
Se esse tutorial te ajudou, compartilhe com outros blogueiros! E não esquece de seguir nossa página no Facebook para mais dicas como essa.