Tirar o fundo preto 4º passo


Antes de começar esse tutorial tão desejado, quero agradecer aos 1000 seguidores! Puxa, muito obrigada, gente! Quando paro pra pensar que há seis meses atrás eu estava comemorando os 100 seguidores... nossa, sem palavras. Obrigada mesmo!

Bom, começando a temporada de só tutoriais, vou postar o tão pedido tutorial das duas colunas de um lado, com fundo colorido (duas cores). Mas como a maioria aqui usa os novos templates do Blogger, a coisa complica um pouco (como sempre, né? Logo logo vou fazer um post desabafando e ao mesmo tempo implorando pra que vocês larguem esses modelos!). As colunas só podem ser do mesmo tamanho, para colocar o fundo vai ser necessário editar uma imagem. Vamos lá:

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: ( transparent ou  retire ^^)

background: url("URL DA IMAGEM") repeat;

Obs.: Não retire as aspas. Url da imagem é o link da imagem que você hospedou, ok?

Agora visualize, se estiver tudo certo, salve. Qualquer dúvida é só comentar aqui. Beijos.

Postar um comentário

0 Comentários