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

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

background-imagens-fundo-blogger 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.

 

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:

 

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:

 

 

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:

 

plano-de-fundo-background-blogger

 

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:

 

Outros tutoriais sobre personalizar templates:

.

5 Comentários

  1. Oi Marcos!
    sempre venho aqui e adoro tudo o que você escreve.
    Mas, especialmente esse post me ajudou muito, pois eu queria usar o novo blogger, mas não queria nenhuma daquelas imagens que estão disponíveis. Agora estou com a imagem que eu queria! Valeuuu mesmo!!

    =*

    Responder

  2. Ola Marcos como vai?
    Cara estou com um problema e já tentei de todas as formas resolver rs.
    Bom estou modificando um blog de uma amiga, no caso ela já usava um template simples e tal. Foi quando decido e apresentei a ela um template novo em seguida fiz o upload do tal no blogger. Bom consegui tirar uma parte do fundo mais tem outra que já procurei de todas as formas e não consigo retirar. Obs: observação já procurei o código e não encontrei acho que estou deixando passar de alguma forma. se você puder me dar uma ajuda agradeço cara.

    Obrigado desde já, excelente blog.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.