Maratona de Tutoriais - Colunas lado a lado com cores diferentes

Oiiii meus picoles de frutas vermelhas (Hum) =D
Como a 5° parte da maratona de tutoriais, vim com um tuto super fofo e legal. Sabe aquelas colunas que fica uma do lado da outra com cores diferentes na sidebar ? Então vou ensinar a vocês a adicionarem estas colunas. Sabe , nos lugares por aí as colunas são minúsculas, mas a que vou ensinar não é minúscula nem grande, é do tipo média ! Bom chega de papo e vamos ao tutorial. Dificuldade : Fácil ( Aliás muito simples ).
Devidos e Merecidos créditos ao Cherry Bomb
Imagens e tutorial pegos do Cherry Bomb ( Merecidos Créditos )

Vá em Designer depois no Designer de modelo do blogger, clique em layout e escolha o modelo com duas colunas juntas:
(Clique para ampliar)


Depois clique em "Ajustar larguras" e ajuste como preferir. Lembrando que a largura da barra lateral corresponde a largura das duas colunas juntas. Então se você colocar 400px, cada coluna vai ter 200px de largura , mas lá no Cherry Bomb a Liah usa assim :
(Clique na imagem abaixo para ampliar)

1000 da largura do blog e da barra lateral deve ser 420!


Clique em aplicar ao blog.

Agora vamos á imagem de fundo das colunas. Ela deve ser ter a mesma largura que você determinou para as colunas e deve ser dividida igualmente em duas partes. Por exemplo, se você colocou 420px na sidebar, crie uma imagem de 420px, com 210px pintandos de uma cor e outros 210px pintados de outra. O exemplo abaixo é do tamanho que eu falei que é : 1000 da largura do blog e da barra lateral deve ser 420!
Você pode se basear pelo exemplo abaixo e pintar com as cores que quiser.
Eu recomendo a usar o PhotoFiltre para mudar a cor das barras !
(OBS: Clique na barra abaixo para ampliar ao seu tamanho real!)

Depois de fazer sua imagem, hospede-a na internet. Agora vá no HTML do seu blog (Design > Editar HTML), aperte ctrl+F  e pesquise por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner { se suas sidebar está á direita,

Ou .main-inner .fauxcolumn-left-outer .fauxcolumn-inner { se sua sidebar está a esquerda.

Logo abaixo do código que você procurou, vai estar mais ou menos 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;
}

Apague a parte que está em roxo, e no lugar coloque esse código:

background: url(URL DA IMAGEM);

Aí é só colocar o link da imagem de fundo na onde está URL DA IMAGEM, depois é só visualizar e salvar!
Créditos  : Devidos e Merecidos créditos ao Cherry Bomb
Imagens e tuorial pegos do Cherry Bomb ( Merecidos Créditos )