Tutorial - Como alterar o fundo do blog usando templates baixados na internet (parte 1)

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.

Ei, psiu, na tag Utilidades Bloguísticas você vai encontrar várias sugestões de templates grátis para Blogger ^_^

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.

Exemplo de template sem alteração no fundo

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.


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 ImageShackTinyPic, etc. 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 em "Aplicar ao blog". 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!

Nenhum comentário

Tecnologia do Blogger.