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:
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:
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!
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:
Onde no lugar de cĂ³digos extras; vocĂª vai inserir um dos seguintes cĂ³digos:
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! ^_^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.

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!
Muuuuito obrigadooo, vc salvou minha vida XD kkkk
ResponderExcluirFico feliz por ter ajudado :D
ExcluirObrigada, me salvou. Ou melhor, nos salvou! kkk
ResponderExcluirOpa, fico feliz por ter ajudado :D
ExcluirObrigada pelas dicas, o seu trabalho foi eficiente.
ResponderExcluirQue bom que ajudou :D
Excluirach que sou meia burra, li, reli e li novamente e nao entendi nada..... :(
ResponderExcluirO que exatamente vocĂª nĂ£o entendeu? Ă€s vezes pode ser meio complicado mesmo ^^'
ExcluirMe ajuda? Tudo bem? Meu blog estĂ¡ com imagens bloqueadas com este sĂmbolo pq eu apaguei imagens do blog e perdi. Teria como substituir o meu botĂ£o de download de uma maneira geral?
ResponderExcluirOi! Se vocĂª colocou a imagem do botĂ£o de download em cada postagem, nĂ£o tem outro jeito e terĂ¡ que substituir um por um. O que vocĂª pode fazer Ă© criar uma classe com o botĂ£o como imagem de fundo e aplicar na tag do link.
Excluirestou aprendendo desenvolvimento web , comecei a um mĂªs , cada nova descorberta Ă© fascinante , e estou na criaĂ§Ă£o de um blog para meu negĂ³cio tendo que aplicar tĂ©cnicas de marketing digital , as vezes Ă© tĂ£o corrido , ai nos momentos mais difĂceis pĂ¡hh!!! uns tutoriais monstros como esse que te facilitam a vida, um mundo onde um ajuda o outro Ă© o que eu acredito, e um dia vou fazer pelas pessoas o que vocĂª fez pra mim .
ResponderExcluirAhh, que bom! Fico muito feliz que esse tutorial tenha sido Ăºtil para vocĂª ^__^
Excluir