Barras laterais do mesmo lado de cores diferentes

Hoje vou ensinar a vocês como colocar duas barras laterais do mesmo lado e cores diferentes.

Update: Tutorial atualizado ! Ele era feito de um jeito muito difícil, então o fiz de forma mais fácil e com códigos melhores.

1) Vá no design do modelo do seu blog e clique em layout, escolha a opção de duas barras laterais no mesmo lado, pode ser tanto do lado direito quanto do esquerdo, você escolhe.

2) Continue no design do modelo, mais agora na aba ajustar larguras, deixe as duas em 400 pxs (se você quiser cada barra com 200 px, caso contrário pode aumentar ou diminuir). Salve as alterações.

3) Edite uma imagem : Você pode editar uma imagem no tamanho que quiser, como eu disse acima, a que eu uso no fs é de 430 px, uma barra de 200 e a outra de 230

4) Se as duas colunas são do lado direito procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
Se duas colunas são do lado esquerdo procure por :

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

5) 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 em vermelho por:

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