[Tutorial] Como alterar o fundo do blog usando templates baixados na internet

Tutorial publicado originalmente em Jan/2018, revisto e atualizado devido a mudanças na interface do Blogger.

Você já encontrou aquele template lindo, comprou ou baixou porque era grátis, instalou e quando foi alterar a cor ou imagem de fundo ao seu gosto descobriu que não era possível? E sem manjar de css ficou com medo de fazer alguma coisa errada e explodir o Blogger?

Pois seus problemas acabaram! Hoje eu vou ensinar para vocês como é fácil alterar a cor ou inserir imagens de fundo no template que você baixou na internet.

Abaixo nós temos um exemplo de template sem qualquer alteração no fundo. Para esse tutorial eu estou utilizando um template em que tanto os posts quanto a barra lateral possuem um fundo branco para facilitar a visualização. Se no template que você escolheu essas áreas não tem fundo, não se preocupe: no próximo tutorial eu vou explicar direitinho como você faz para altera-las.

Agora, no Blogger, selecione o blog que você vai editar (1), clique em Tema (2) e Personalizar (3)

Na tela que se abrir, clique em Avançado (4) e Adicionar CSS (5). É no campo de texto (6) que você vai adicionar o código css para alterar o fundo. O botão salvar (7) será usado somente ao final.

Copie e cole um dos seguintes códigos caso você queira apenas alterar a cor de fundo:

body {background-color:nome-da-cor;}

Onde nome-da-cor deve ser substituído pelo nome (em inglês) da cor que você pretende usar. Aqui tem uma tabela bastante útil para você usar o nome exato da sua cor favorita.

body {background-color:#FFFFFF;}

Onde você pode substituir o #FFFFFF (fundo branco) pelo código hexadecimal da cor de sua preferência. Caso você não saiba o código da cor que deseja usar, aqui você encontra um esquema de cores (é só clicar na cor desejada que o código aparece no quadro abaixo) e, logo abaixo, um color picker, que te dá mais opções de cores para escolher (mesmo esquema, clica na área com a cor que quer usar e no quadro abaixo aparece o código)

body {background-color:rgb(r,g,b);}

Onde você vai substituir o r,g,b pelo código rgb da sua cor. Nesse site tem um color picker para te ajudar a descobrir o código rgb da cor escolhida, caso você não saiba qual é.

Se você quiser alterar a imagem de fundo, a imagem precisará estar hospedada em um servidor já que você vai usar o endereço dela no código abaixo:

body {background-image: url(url-da-imagem);}

Onde você vai substituir url-da-imagem pelo endereço dela. Se você não tem onde hospedar a imagem de fundo, existem diversos sites que permitem a hospedagem e compartilhamento da imagem via link, como ImageShack. Outra opção, é hospedar no próprio Blogger, via gambiarra. Se você quiser alterar a cor do fundo e a imagem ao mesmo tempo, basta usar:

body {background-color:cor-escolhida; background-image: url(url-da-imagem);}

O código acima é a maneira mais simples de inserir um fundo. A imagem vai repetir horizontal e verticalmente, como a gente vê na imagem abaixo.

Mas pode acontecer do fundo precisar de um padrão diferente, como por exemplo repetir só na horizontal, ou cobrir todo o fundo do tema. Então para isso usamos o código abaixo:

body {background-image: url(url-da-imagem); códigos extras;}
ou
body {background-color:cor-escolhida; background-image: url(url-da-imagem); códigos extras;}

Onde no lugar de códigos extras; você vai inserir um dos seguintes códigos:

background-repeat: repeat-x;

O fundo vai repetir apenas na horizontal.

background-repeat: repeat-y;

O fundo vai repetir apenas na vertical.

background-repeat: no-repeat;

O fundo não vai se repetir, aparecendo no topo à esquerda do tema.

background-position: x y;

Esse código determina a posição que o fundo vai aparecer na página e pode ser utilizado junto com qualquer um dos códigos acima. Basta substituir x pela posição horizontal (right, left, center, ou qualquer valor como por exemplo, 10px) e substituir y pela posição vertical (top, bottom, center, ou qualquer valor como por exemplo, 25px). Lembre-se que no caso de se utilizar valores absolutos (10px, 5em, etc) para posicionar o fundo no template, pode prejudicar a sua visualização em outras mídias, como tablets e celulares. Prefira sempre os valores relativos (top, left, etc).

background-attachment: fixed;

O fundo vai permanecer fixo, quando a página for rolada para cima ou para baixo.

background-size: largura altura;

Onde você vai trocar largura altura por um valor absoluto que vai definir a dimensão da sua imagem. Também é possível usar esse código das seguintes formas:

background-size: contain;

Que faz com que a imagem ocupe o máximo de comprimento ou altura que a tela de exibição permitir, de forma que nenhuma parte dela fique oculta. Dependendo da proporção da imagem, pode acontecer de não cobrir todo o fundo, por isso esse código é recomendado para fundos que mesclem com a cor de fundo da página (veja exemplo abaixo).

background-size: cover;

Que faz com que a imagem ocupe toda a tela de exibição, não importa a mídia utilizada. Dependendo da proporção da imagem, parte dela pode ficar oculta. O ideal é que se use imagens com proporções grandes, ou ela poderá ficar desfocada ao ser ampliada.

Após fazer todas as alterações, visualize o blog para ter certeza de que está do jeito que você quer, e então clique no botão salvar (que eu sinalizei com o número 7 na imagem láááá de cima). Pronto, você alterou o fundo do seu blog! ^_^

Na próxima parte do tutorial, eu vou ensinar como colocar fundo na parte principal do blog (onde ficam as postagens) e na barra lateral. Também vou explicar o que fazer quando o código para alterar o fundo não funciona em todo o blog, porque algumas seções possuem fundos diferentes.
Não percam!