24 de fev de 2012

Tutorial: Duas colunas com fundo diferente.

Oi! amores

Muita gente ainda tem duvidas de como colocar, duas barras laterais com fundo colorido lado a lado, então suas dúvidas acabaram hoje eu vou ensinar como fazer isso.

Vá em design → Design do modelo → Layout.
Escolha um modelo que tenha duas colunas.

Escolheu? agora clique em "aplicar ao blog"
Agora vá em Ajustar larguras e coloque a barra lateral em 400 (200px para cada coluna)
Agora vocês parecida da imagem de fundo como essa:
Hospede a imagem e pegue o link.

Agora vá em Design Editar HTML marque a caixinha "Expandir modelo de windget"
Procure por:
        .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
Se a sua coluna for no lado esquerdo
Se ela for no lado direito procure por:
 .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
Vai aparecer algo 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;}
Substitua a parte em negrito por:
background: url("URL DA IMAGEM") repeat;
Agora cole o link da imagem que você hospedou.
Prontinho visualize veja se está tudo certinho, então salve.


3 comentários :

  1. Não entendi, depois temto LER NOVAMENTE, é bem util nér , agora os blogs estão adotando essas duas colunas. Eu particulamente não curto muito, mais é bonito sim!

    ResponderExcluir
  2. eu ja tentei várias vezes! Mas eu não acho '.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {' eu só acho metade da tag. .-. E agr?

    ResponderExcluir

Sem chingamentos porfavor ;)
Todos os comentários serão respondidos.