2 colunas laterais de cores diferentes

A pedido da leitora Letícia Carolina, hoje vou ensinar vocês à colocarem as colunas (ou barras) laterais como as do blog (a que está rosa e cinza).

1- Vá no seu blog > Design > Design do Modelo > Clique em Layout.

2- Escolha um com duas colunas juntas e cliquem Aplicar ao blog.

3- Vá em Ajustar larguras, lá vai estar escrito "Barra Lateral Esquerda" ou vai estar "Barra Lateral Direita", e embaixo vai ter algum número dentro de uma caixinha branca e ao lado estará escrito "pixels", apague esse número e no lugar dele coloque 400 e clique de novo em Aplicar ao blog.

4- Fiz a seguinte imagem para vocês a usarem como base, basta salvar e depois colocá-la no Paint (ou em outro programa para editar imagens) e deixarem da cor que vocês preferirem, e depois hospedem a imagem onde vocês preferirem:

5- Para finalizar, vá em Desing > Editar HTML > Dê Ctrl F e procure por:

Barras do lado direito:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Barras do lado esquerdo:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

6- Quando encotrar algum dos códigos acima (de acordo com o lado das colunas) 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;}

7- Apague a parte destacada (a que está em negrito e roxa) e no lugar dela coloque:

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

8- Substitua o URL DA IMAGEM pela URL da sua imagem, mas não retire as aspas.

9- Clique em visualizar, e estiver tudo certo, salve.

O tutorial ajudou?
Bjs!