Como Alterar o Plano de Fundo da Blog-Pager?

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como adicionar uma imagem no plano de fundo do menu de navegação das páginas do blog (blog-pager), 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 FUNDO DO BLOG-PAGER?

Confira como adicionar uma imagem no plano de fundo do menu de navegação das páginas do blog (blog-pager) em 11 passos.

01º Passo: acesse à página inicial do Blogger.

02º Passo: clique em Tema.

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

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

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

06º Passo: pesquise pelo trecho abaixo:

#blog-pager {

Clique aqui para copiar o trecho acima.

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

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

09º Passo: substitua o trecho URL DA IMAGEM pelo URL da imagem desejada.

O código do seu blog era assim:

#blog-pager {   padding: 15px;

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

#blog-pager { background: url(URL DA IMAGEM) top center no-repeat;   padding: 15px;

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

#blog-pager { background: url(https://blogger. EXEMPLO DE URL .jpg) top center no-repeat;   padding: 15px;

Dica: para obter o URL de uma imagem salva no seu computador, abra uma nova guia no navegador, retorne a pagina inicial do Blogger, clique na opção Página e depois em Nova Página. Na página seguinte, clique em Inserir Imagem, escolha a opção fazer upload do computador, clique em Procurar, selecione a imagem desejada e clique em Abrir. Após o carregamento da imagem escolhida, clique nela para selecioná-la e note deve aparecer um menu flutuante abaixo dela. Nesse menu, clique sobre a opção alterar (caso não apareça o nome alterar, vai aparecer o ícone de uma engrenagem). Então, deve abrir uma janela de preferências, na qual, deve selecionar a opção tamanho original e clicar em Atualizar. Posteriormente, altere a visualização do conteúdo da página para o modo de Visualização em HTML (caso não apareço o nome visualização, vai aparecer o ícone de um lápis ou dos sinais <>). Por fim, localize, selecione e copie o URL da imagem inserida e depois substitua no trecho URL DA IMAGEM, no código do atual tutorial.

Caso tenha dúvida sobre a localização do URL da imagem, após alterar o modo de visualização para HTML, clique em qualquer local do HTML exibido, pesquise pelo trecho src= e pressione a tecla Enter. Ao localizar o trecho src= no HTML, note que em seguida haverá um endereço eletrônico entre duas aspas, como por exemplo: src="https://blogger. EXEMPLO DE URL .jpg" />. Então, o trecho que está entre as aspas é o URL da imagem.

Se ainda tiver dúvida sobre como obter o URL de uma imagem salva no seu computador, clique aqui e acesse o tutorial como alterar o plano de fundo das postagens e dos widgets do blog. Os 15 primeiros passos desse tutorial mostram detalhadamente como enviar uma imagem para o Blogger e obter a URL dessa imagem.

10º Passo: clique em Visualizar para conferir o resultado.

11º Passo: para finalizar, clique em Salvar.

 

Ao pesquisar pelo trecho #blog-pager {, a pesquisa vai apresentar dois resultados. O primeiro equivale a versão web e o segundo equivale a versão para celular. O procedimento de alteração de plano de fundo pode ser realizado nos dois trechos ou apenas em um deles, 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 pode ser possível visualizar a cor nativa do fundo do menu de navegação das páginas dependendo do dimensionamento da tela.

COMO ALTERAR A COR DO PLANO DE FUNDO DO BLOG-PAGER?

Confira como alterar a cor nativa do plano de fundo do menu de navegação das páginas do blog em 09 passos de forma fácil e prática.

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

02º Passo: selecione o nome do seu blog.

03º Passo: clique em Tema.

04º Passo: clique no botão Personalizar.

05º Passo: clique na guia Avançado.

06º Passo: selecione a opção Pager.

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

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

09º Passo: para finalizar, clique em Salvar.

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

 

CONSIDERAÇÕES FINAIS

Dessa forma, adicionando o código background: url(URL DA IMAGEM) top center no-repeat; abaixo do trecho #blog-pager { é possível adicionar uma imagem no plano de fundo do menu de navegação de páginas do blog.

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos sobre a alteração do plano de fundo menu de navegação de páginas do blog, adicionando uma imagem para melhorar o visual.

 

TUTORIAIS RECOMENDADOS

 

 

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