Imagem e cor de fundo do blogger

Como mudar a cor de fundo do blogger? Muitas pessoas procuraram aqui como mudar a cor de fundo ou colocar imagem como fundo no BlogSpot, então resolvi tentar dar uma ajuda.

O blogger possui varias DIVs que se sobrepõem e na maioria tem imagem como fundo, alguns modelos é quase impossível mudar a cor de fundo sem mexer no código HTML do blogger, mais especificamente no Css.

DIV é um "quadro/retângulo", se você observar os blogs, as áreas deles são divididas, onde está o post é uma DIV, onde vai os gadgets(lateral) é outra e essas duas estão dentro de uma DIV chamada outer-wrapper, e todos eles tem um estilo, alguns tem um fundo que tapa o fundo da outra, por isso complica.

Os exemplos e este post é apropriado apenas para quem usa modelos de Layout(de 2006), para quem usa os novos modelos do blogger a primeira coisa a fazer é tentar em seu blogger: Painel Layout >Design >Designer do modelo >plano de fundo ou Avançado. Se tiver dificuldades leia Mudar a cor e tamanho da fonte, link, e fundo do blogspot, mas se já o fez e não tem a opção de mudar a cor de fundo, pode tentar mudando o CSS do blogger.
BlogSpot com um dos novos modelo de 2010, pode:
- Escolher uma em mais de 100 imagens de fundo do blogger
- Colocar sua própria imagem de fundo sem uso de códigos

É algo um pouco difícil, para alguns muito difícil, mas se você tem a intenção de fazer isso, para dar um diferencial a seu blog talvez terá de ser persistente, obstinado, e quando conseguir provavelmente se sentirá muito bem.

Mas pense bem se for usar uma imagem de fundo, ela não deveria ser muito grande, pois seu blog ficará "pesado", e, para isso eu resolvi criar alguns exemplos para terem uma noção, mas percebam que ela só demora uma vez para carregar, essa pode ser a primeira vez que alguém visite seu blog e pode ser um motivo para ele não voltar, ou nem esperar seu blog carregar.

Para mudar o estilo CSS do seu blog:

Leia abaixo e acesse o Painel >Design >Editar Html.

Mas, é importante lembrar, você estará em local onde um erro pode tornar seu blog feio ou até mesmo retirar alguns elementos que você adicionou na sidebar. Por isso o mais interessante seria criar um novo blog para usar como teste(com o mesmo código de seu blog original) e, antes de uma mudança em seu blog fazer um backup de seu código(cópia)

Pode ser feito mudanças em algumas DIVs, que cada uma delas da um efeito diferente no blog. As mudanças que vou mostrar são nas cores de fundo das principais DIVs do BlogSpot, para isso é necessário retirar as imagens ou substitui-las por uma imagem na cor desejada.

Em ordem as DIVs que causam uma mudança visível: #outer-wrapper, #main, #header-wrapper, #sidebar e por ultimo no corpo body

Entenda um pouco de CSS antes de se atirar

:

Abaixo estão as "qualidades" de uma DIV chamada main, entenda que cada vez que existir algum nome seguido de dois pontos é uma qualidade, tamanho, cor de fonte, alinhamento, etc. e para cada uma delas existe uma regra estipulada após os dois pontos, ou seja, o tamanho tem um número, a cor de fundo tem uma cor:

Exemplo, color significa cor da fonte e, red é a sua cor, então:

color: red; é fonte vermelha.
width: 400px; é largura 400 pixeis

Um ponto e vírgula diz que acabou uma qualidade e começa outra, observe bem abaixo no código de exemplo, a primeira linha em vermelho significa cor e imagem de fundo(background:) da DIV main, e esse código #940f04 substitui uma cor escrita em inglês, como red, para essa cor de fundo Se retirar ela não terá cor de fundo, se retirar o restante desse código abaixo em vermelho não terá imagem de fundo e nem as regras para seu alinhamento, mas deve sempre terminar com ponto e vírgula. E tudo referente a div main deve estar entre chaves {} após seu nome:

Código de exemplo:

#main {background: #940f04 url(http://foitestado.com/top.GIF) right top repeat-y;
color: #ffffff;
width: 400px;
float: left;
}

Uma coisa que alguns pensam, e ainda é impossível alterar o tamanho de uma imagem background usando códigos, se você deseja uma imagem de fundo maior ou menor deve fazer isso usando um editor de imagens.

Para usar uma imagem de fundo(background), a imagem deve estar hospedada na web, você pode postar a imagem no blog e copiar o endereço http:// dela, fica parecido com a que usei no código de exemplo acima, veja o endereço de uma imagem que usei no exemplo:
http://foitestado.com/top.GIF

Entenda como é a estrutura da maioria das páginas do blogger, imagem e veja o posicionamento das divs:
Clique para aumentar

Você pode mudar o plano de fundo de seu blog apenas mexendo na parte seguida de background: até o ponto e vírgula;

Para isso é bom entender ou aprender um pouco sobre as tags que que podem ser usado para essa "qualidade" como as de alinhamento: top, center, left e right ou a forma que a imagem se comporta dentro de uma div:
repeat ela irá repetir pra todos lados
repeat-y ela irá repetir apenas no sentido vertical
repeat-x ela irá repetir ela irá repetir apenas no sentido horizontal
no-repeat não repeti

Para mais informações faça uma busca na web sobre css propriedades background.


Se você resolver fazer alguma mudança, não exclua os códigos que não são referentes a background: e evite imagens muito grandes.

Evite inserir novo código para uma div , se já existir #main{ background: bla bla bla; float: left;} não a repita e sim substitua apenas a "qualidade" (bla bla bla) que você quer mudar.

Criei alguns exemplos bem interessante, mas eles apenas representam as mudanças feita em background de cada DIV.

Exemplos de páginas e códigos

Clique abaixo das descrições para ver
1. O mais fácil, que muda apenas o fundo da área do post: Cor de fundo Área do post do blogger
2. Exemplo onde mudei o fundo da área do post e sidebar: Fundo Área de post e sidebar do blogger
3. Exemplo onde mudei o fundo da área do post e sidebar, porém com um detalhe, uma imagem semi-transparente para a sidebar: Fundo Área de post e sidebar com imagem especial
4. Essa mudei a imagem de fundo, mas não é o tipo de imagem ideal e nem sua posição: Cor de fundo body do blogspot
5. Fundo parado, mudei a imagem de fundo e coloquei outra que fica fixa, e para ela aparecer tirei as imagens de fundo das outras DIVs: Imagem de fundo parada na body

É importante sempre ter cuidado para que a cor da fonte seja próximo ao oposto da cor de fundo ou cor da imagem de fundo de forma a ficar legível, e, detalhe, nunca use a mesma cor de fundo para fonte porque isso acarreta numa "punição" de seu blog pelos sites de busca, você não será colocado nas pesquisas, ou poderá ser excluído.

• Colocar barra rolagem em div, caixa com scroll
• Como mudar imagem no Blogspot
• Colocar imagem-link no BlogSpot
• Colocar um logotipo no Blogger
• Aumentar a imagem ao passar o mouse, com Css