0

Tutorial - Duas colunas com fundo colorido.

Oii meus doces de kiwi com coco *-*
Hoje eu estava dando uma passadinha no blog Menina Nerd e vi um tutorial muito útil de como colocar duas colunas com fundo colorido no blogger e resolvi postar pra vocês.
Clique em Leia mais pra conferir o tutorial :)

1. Vá em "Design", depois em "Designer do Modelo" e clique em "Layout":

Salve clicando em "Aplicar ao Blog".

2. Agora vá em "Ajustar larguras":


Salve novamente clicando em "Aplicar ao Blog".

3. Agora é preciso editar uma imagem para usar como fundo:


Fiz essa imagem para você usar como base na sua edição (lembrando que ela tem 400px, ou seja, 200px pra cada cor), se quiser usá-la sem editar, fique à vontade! Se desejar colocar 500px, você terá que editar uma imagem de 500px avá com 250px para cada cor, e assim por diante.

Depois de editar, hospede a imagem no Imageshack, ou em qualquer outro site de hospedagem de imagens e guarde o link.

4. Por fim, vá novamente em "Design", depois em "Editar HTML", dê Ctrl+f e;

 se você escolheu as colunas do lado direito, procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
se você escolheu as colunas do lado esquerdo, procure por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Vai aparecer assim:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

Substitua a parte destacada em vermelho por:

background: url("URL DA IMAGEM") repeat;
E pronto! Só pra lembrar TODOS os créditos do tutorial são dados ao blog Menina Nerd,eu apenas tornei mais fácil pra quem visita ao blog postando aqui.

0 rebeldes comentaram: