Como Alterar o Plano de Fundo do Rodapé do Blog?

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como alterar o plano de fundo do rodapé do blog, substituindo a cor sólida por uma imagem.

Esse tutorial é indicado para os blogs que utilizam o tema Awesome Inc. ou Espetacular Ltda na plataforma do Blogger. Para baixar um modelo no tema Awesome, clique aqui.

Antes de realizar qualquer um dos procedimentos a seguir, primeiramente faça um backup do seu blog. Se ocorrer algum problema durante o procedimento, o blog poderá ser restaurado com o arquivo do backup realizado. Se tiver alguma dúvida sobre o backup, clique aqui.

COMO ALTERAR O PLANO DE FUNDO DO RODAPÉ COM IMAGEM?

Confira como alterar o plano de fundo do rodapé do blog (footer background) em 29 passos, substituindo a cor sólida por imagem. Do primeiro ao décimo quinto passo, será mostrado como adquirir o URL da imagem que será exibida no rodapé. A partir do décimo sexto passo, será mostrado realmente como alterar o fundo do rodapé do blog.

1º Passo: acesse a página inicial do Blogger.

2º Passo: selecione o nome do seu blog.

3º Passo: clique em Página.

4º Passo: clique em Nova Página.

5º Passo: clique em Inserir Imagem e escolha a opção fazer upload do computador.

6º Passo: na janela seguinte clique em Procurar.

7º Passo: selecione a imagem desejada e clique em Abrir.

8º Passo: em seguida, clique sobre a imagem para selecioná-la.

9º Passo: abaixo da imagem vai aparecer um menu flutuante. Nesse menu, clique sobre a opção alterar.

Se caso não aparecer o nome alterar, vai aparecer o ícone de uma engrenagem.

10º Passo: na janela seguinte, selecione a opção tamanho original e clique em Atualizar.

Nesse momento, note que a imagem vai ficar no tamanho que ela realmente é.

11º Passo: clique em Visualização e selecione a opção Visualização em HTML.

Caso não apareça o nome Visualização, vai aparecer o ícone de um lápis ou dos sinais <>.

Após a alteração da visualização da página para o modo HTML, note que vai aparecer os códigos dos elementos presentes na página, incluindo o URL da imagem que foi enviada.

12º Passo: localize o URL da imagem. Para tanto, clique em qualquer local do código HTML exibido na página e pressione as teclas CTRL e F para abrir a caixa de pesquisa.

13º Passo: pesquise pelo trecho src= e pressione a tecla Enter.

14º Passo: ao localizar o trecho src= no código HTML, note que em seguida haverá um endereço eletrônico entre duas aspas, conforme no exemplo abaixo:

src="https://blogger. EXEMPLO DE URL .jpg" />

O trecho que está entre as aspas é o URL da imagem.

Observação: as aspas não fazem parte do URL, apenas o trecho que está dentro dela.

15º Passo: selecione o URL da imagem.

16º Passo: abra uma nova guia no navegador.

Dica: no navegador Firefox, essa função é chamada de abrir nova aba.

Observação: o procedimento a seguir será realizado em uma nova guia, mas a guia com a URL da imagem selecionada deve continuar aberta, pois será utilizada mais adiante.

17º Passo: retorne à página inicial do Blogger.

18º Passo: clique em Tema.

19º Passo: clique na seta ao lado do botão Personalizar e escolha a opção Editar HTML.

20º Passo: clique em qualquer local dentro do HTML do blog.

21º Passo: no teclado, pressione as teclas CRTL e F para abrir a caixa de pesquisa do HTML.

22º Passo: pesquise pelo trecho abaixo:

background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;

Clique aqui para copiar o trecho acima.

23º Passo: apague o trecho pesquisado no HTML do blog e substitua pelo seguinte código:

background:#ffffff url(URL DA IMAGEM) top center no-repeat;

Clique aqui para copiar o trecho acima.

24º Passo: clique na guia que a URL da imagem ficou selecionada.

25º Passo: pressione as teclas CTRL e C para copiar a URL selecionada.

26º Passo: retorne a guia do HTML.

27º Passo: no código do plano de fundo, apague o trecho URL DA IMAGEM e cole o URL copiado no lugar.

Dica: após apagar o trecho URL DA IMAGEM, pressione as teclas CTRL e V para colar o URL dentro dos parentes. Note ainda que dentro dos parentes deve ficar apenas o URL da imagem do plano de fundo do rodapé.

O código do seu blog era assim:

.footer-fauxborder-left {   border-top: 1px solid $(widget.border.color);   background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;

Depois que substituir o trecho do background, vai ficar assim:

.footer-fauxborder-left {   border-top: 1px solid $(widget.border.color);   background:#ffffff url(URL DA IMAGEM) top center no-repeat;

Depois que inserir o URL da imagem, vai ficar assim:

.footer-fauxborder-left {   border-top: 1px solid $(widget.border.color);   background:#ffffff url(https://blogger. EXEMPLO DE URL .jpg) top center no-repeat;

28º Passo: clique em visualizar para conferir o resultado.

29º Passo: para finalizar, clique em Salvar.

 

Ao pesquisar pelo trecho do background, a pesquisa vai apresentar dois resultados. O primeiro equivale ao plano de fundo do rodapé exibido nos computadores e o segundo equivale ao plano de fundo do rodapé exibido na versão para celular. O procedimento de alteração de plano de fundo pode ser realizado nos dois trechos ou apenas em um deles (na versão do computador ou do celular), conforme a vontade do autor do blog.

Vale lembrar que após a realização do procedimento acima, não será mais possível pesquisar pelo trecho:

background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;

Isso ocorre, porque o trecho pesquisado inicialmente foi apagado e substituído pelo código do plano de fundo do rodapé. Então, para alterar o plano de fundo do rodapé novamente, deve pesquisar pelo trecho:

.footer-fauxborder-left {

Clique aqui para copiar o trecho acima.

Pois o código do rodapé vai estar na segunda linha abaixo do trecho mencionado.

Para alterar a cor de fundo do rodapé que aparece abaixo da imagem, deve alterar o código #ffffff pelo código hexadecimal da cor desejada. Abaixo, segue outros exemplos de códigos hexadecimais de cores:

#ffffff: branco.

#000000: preto.

#00a2ff: azul claro.

#2400ff: azul escuro

#00ff7e: verde claro.

#13b107: verde escuro.

#ff0000: vermelho.

#ff7e00: laranja.

#fe60e6: rosa.

#ffde00: amarelo.

Clique aqui para obter mais códigos hexadecimais de cores para o rodapé do seu blog.

É possível substituir o trecho top por bottom.

Top: deixa a imagem de plano de fundo alinhada com a parte superior do rodapé.

Bottom: deixa a imagem de plano de fundo alinhada com a parte inferior do rodapé.

É possível substituir o trecho center por left ou right.

Left: deixa a imagem de plano de fundo alinhado com o lado esquerdo do rodapé.

Right: deixa a imagem de plano de fundo alinhado com o lado direito do rodapé.

É possível substituir o trecho no-repeat por repeat.

No-repeat: evita a repetição da imagem de plano de fundo no rodapé.

Repeat: ativa a repetição da imagem de plano de fundo no rodapé.

 

COMO ALTERAR APENAS A COR DO PLANO DE FUNDO DO RODAPÉ?

Confira como alterar a cor do plano de fundo do rodapé do blog em 09 passos de forma simples e prática, utilizando as ferramentas do próprio Blogger.

1º Passo: acesse a página inicial do Blogger.

2º Passo: selecione o nome do seu blog.

3º Passo: clique em Tema.

4º Passo: clique no botão Personalizar.

5º Passo: clique na guia Avançado.

6º Passo: selecione a opção Rodapé.

7º Passo: na seção Cor de plano de fundo, clique na opção Alterar esquema de cores.

Observação: se não aparecer a opção Alterar esquema de cores, clique sobre o ícone de uma bandeja de cores.

8º Passo: na janela seguinte, escolha a cor desejada.

9º Passo: para finalizar, clique em Salvar.

A opção salvar aparece no ícone do disquete no canto inferior direito da tela.

Observação: esse procedimento para alteração da cor do plano de fundo do rodapé do blog só funciona quando o HTML não for alterado com o procedimento anterior. Caso o HTML esteja alterado com o procedimento anterior e deseje retornar as cores sólidas personalizadas pelas ferramentas nativas do Blogger, realize a alteração do HTML do blog novamente, modificando apenas o vigésimo segundo e o vigésimo terceiro passo, conforme instruções a seguir:

22º Passo: pesquise pelo trecho abaixo:

.footer-fauxborder-left {

Clique aqui para copiar o trecho acima.

Abaixo dele, localize o código modificado:

background:#ffffff url(URL DA IMAGEM) top center no-repeat;

23º Passo: apague o código modificado e retorne o trecho original:

background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;

Clique aqui para copiar o trecho acima.

Dessa forma, o rodapé do seu blog voltará a ter uma cor sólida que será personalizada de acordo com as ferramentas nativas do Blogger novamente.

 

CONSIDERAÇÕES FINAIS

Dessa forma, substituindo o trecho background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0; pelo código background:#ffffff url(URL DA IMAGEM) top center no-repeat; é possível alterar o plano de fundo do rodapé do blog, substituindo a cor sólida por uma imagem.

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos sobre alteração do plano de fundo do rodapé do blog com a substituição da cor sólida por uma imagem, melhorando o visual do seu blog.

 

TUTORIAIS RECOMENDADOS

 

 

Por: Santos. Elaborado em: 24/11/2025. Publicado em: 24/11/2025. Atualizado em: 24/11/2025. Obrigado pela sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou entre em contato conosco.