Como Alterar o Plano de Fundo das Postagens e dos Widgets do Blog?

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como adicionar uma imagem no plano de fundo das postagens e dos widgets do blog, deixando o visual mais personalizado.

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 ADICIONAR UMA IMAGEM NO PLANO DE FUNDO DA POSTAGEM?

Confira como adicionar uma imagem no plano de fundo das postagens do blog (post background) em 30 passos. Do primeiro ao décimo quinto passo, será mostrado como adquirir o URL da imagem que será exibida no fundo das postagens publicadas. A partir do décimo sexto passo, será mostrado realmente como adicionar a imagem no plano de fundo das postagens.

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:

.date-outer {

Clique aqui para copiar o trecho acima.

23º Passo: clique na frente desse trecho e pressione a tecla Enter para inserir uma linha em branco abaixo desse trecho.

24º Passo: abaixo do trecho pesquisado, escreva o código:

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

Clique aqui para copiar o código acima.

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

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

27º Passo: retorne a guia do HTML.

28º 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:

.date-outer {   position: relative;

Depois que digitar o código, vai ficar assim:

.date-outer { background: url(URL DA IMAGEM) top center no-repeat;   position: relative;

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

.date-outer { background: url(https://blogger. EXEMPLO DE URL .jpg) top center no-repeat;   position: relative;

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

30º 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.

É possível substituir o trecho top por bottom.

Top: deixa a imagem de plano de fundo alinhada com a parte superior da postagem.

Bottom: deixa a imagem de plano de fundo alinhada com a parte inferior da postagem.

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

Center: deixa a imagem de plano de fundo alinhada no centro da postagem.

Left: deixa a imagem de plano de fundo alinhado com o lado esquerdo da postagem.

Right: deixa a imagem de plano de fundo alinhado com o lado direito da postagem.

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

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

Repeat: ativa a repetição da imagem de plano de fundo da postagem.

No modo repeat não será possível visualizar a cor nativa do plano de fundo, mas no modo no-repeat será possível visualizar a cor nativa do plano de fundo da postagem por baixo da imagem adicionada.

 

 

COMO ALTERAR A COR DO PLANO DE FUNDO DA POSTAGEM?

Confira como alterar a cor nativa do plano de fundo da postagem 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 Plano de fundo da postagem.

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.

 

COMO ADICIONAR UMA IMAGEM NO PLANO DE FUNDO DOS WIDGETS?

Para adicionar uma imagem no plano de fundo dos widgets do blog, deve realizar o mesmo procedimento para adicionar uma imagem no plano de fundo das postagens, alterando apenas o décimo segundo passo, conforme as instruções a seguir:

22º Passo: pesquise pelo trecho abaixo:

.sidebar .widget {

Clique aqui para copiar o trecho acima.

23º Passo: clique na frente desse trecho e pressione a tecla Enter para inserir uma linha em branco abaixo desse trecho.

24º Passo: abaixo do trecho pesquisado, escreva o código:

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

Clique aqui para copiar o código acima.

Por fim, substitua o trecho URL DA IMAGEM, visualize o resultado e clique em Salvar.

 

COMO ALTERAR A COR DO PLANO DE FUNDO DOS WIDGETS?

Para alterar a cor nativa do plano de fundo dos widgets realize o mesmo procedimento para alterar a cor do plano de fundo das postagens, alterando apenas o sexto passo, selecionando a opção Plano de fundo do gadget.

 

CONSIDERAÇÕES FINAIS

Dessa forma, adicionando o código background: url(URL DA IMAGEM) top center no-repeat; abaixo do trecho .date-outer { é possível adicionar uma imagem personalizada no plano de fundo da postagem do blog. Além disso, adicionando esse código abaixo de .sidebar .widget { é possível adicionar uma imagem no fundo dos widgets do blog.

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos sobre a alteração do plano de fundo das postagens e dos widgets do blog, adicionando uma imagem para melhorar o visual.

 

TUTORIAIS RECOMENDADOS

 

 

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