Como trocar o background, a imagem de fundo do Blog Blogger (Blogspot)

Todo mundo quer ter um layout personalizado no blog e as vezes pequenos detalhes fazem toda a diferença. Uma adaptação comum é querer mudar a imagem de fundo (background) do template e isso é algo relativamente simples. Vou mostrar como fazer isso no Blogger (Blogspot), inclusive para o novo "Designer do Modelo".

 

A primeira coisa a fazer é, antes de tentar modificar algo no seu blog, ter um backup completo, pois se algo der errado você tem como restaurar o padrão. E outro passo importante é ter um blog de testes para aprender a fazer as mudanças e ver os resultados antes de aplicar no seu blog principal.

 

O Blogger lançou um novo serviço, para quem usa o "Blogger in Draft", que permite criar você mesmo seus templates, mesmo que você não saiba nada de HTML e derivados.

• Como criar Template para Blogger – Designer do Modelo

 

Mas os templates feitos por terceiros com o método antigo, chamados de "Customizados" continuam valendo. Então vou mostrar como trocar o background (a imagem de fundo) do seu layout para os dois casos.

 

Caso 1 – Templates Customizados.

Já publiquei um tutorial sobre isso, mas vou refazer aqui.
O que você precisa primeiro é entrar no código-fonte do seu blog, então vá ao painel do Blogger, clique no menu "Design" ~> "Editar HTML" e marque a caixa "Expandir modelos de widgets". Aí procure por algo do tipo:

 

body {

background: #333 url(http://www.URL.com/imagens/nomedeimagem.XXX) center;

}

 

No caso você pode encontrar essas linhas acompanhadas de outros atributos que definem como será o "corpo" (body) do seu template. Mas o mais importante é encontrar a linha que comece com "background" que pode ser também "background-image".

 

Então basta trocar o endereço (url) do caminho da imagem para outro onde está a imagem que você quer usar. Coloque dentro do parêntese o endereço URL da imagem que quer usar.
Sim, você vai precisar hospedar uma imagem em algum lugar na internet e temos um tutorial que pode te ajudar nisso caso não saiba como fazer:

• Como enviar imagens para o PicasaWeb

 

Para mais detalhes de todas as possibilidades de uso e códigos que podem te ajudar a fazer configurações e personalizações diferentes quanto ao posicionamento das imagens, cor de fundo e recursos, visite o HTMHelen:

• Imagens no Background (tutorial completo e detalhado)

 

 

Caso 2 – Novo "Designer do Modelo"

Já para quem está usando algum template do novo recurso do Blogger, para criar layouts personalizados, ainda é fácil fazer. Eles disponibilizaram centenas de imagens padrões para usar no fundo dos templates, mas se você não gostou de nenhum daqueles, pode usar suas próprias imagens.

 

Obs.: Esse novo tipo só está disponível para quem acessa o Blogger pelo painel "Blogger in Draft".

 

Você pode fazer a mudança manualmente, direto no código-fonte, como explicarei logo abaixo, ou pode escolher uma imagem que esteja em seu computador. Para isso, clique no menu "Design" ~> "Designer do modelo".

 

Na janela de edição de templates, clique em "Plano de fundo", que é onde se escolhe as imagens padrões. E siga como mostra a imagem abaixo:

 

 

Se preferir ir direto ao código fonte, proceda da seguinte forma:

Então, entre no painel e clique no menu "Design" ~> "Editar HTML", marque a caixa "Expandir modelos de widgets" e procure por algo semelhante a isso que segue:

 

<Variable name="body.background" description="Body Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left" value="#cfe7d1 url(http://themes.googleusercontent.com/image?id=1x_TqXo6-7t6y2ZiuOyQ2Bk6Zod9CTtyKYtRui0IeQJe6hVlJcQiXYG2xQGkxKvl6iZMJ) repeat fixed top center

 

Nesse trecho você só precisa trocar o caminho da imagem, que é o endereço URL dentro do parêntese da parte destacada em vermelho, para o endereço da imagem que você quer usar como fundo do seu blog.

 

A Márcia Nunes escreveu um tutorial bem completo para esse novo recurso com alguns exemplos que pode ajudar:

• Personalizar O Novo “Design Blogger” – Parte 1 –Background

 

Outros tutoriais sobre personalizar templates:

• IceBreaker Design – Quer um Template exclusivo para seu Blog?
• O Código-Fonte dos novos Templates do Blogger (Blogspot)
• Aprenda um pouco de HTML para editar seu Blog
• 10 dicas para melhorar a estrutura de layout do seu Blog