26 janeiro, 2012

Maratona de Tutoriais - Colunas lado a lado com cores diferentes

Tumblr_lwtk9bjlat1r323p5o1_500_large

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)
1

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)
2
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 )

9 comentários:

  1. Muito bom esse tutu, adorei flor! Gostei do post linda ! garota-fashiion.tk

    ResponderExcluir
  2. Adorei o tutorial,viu, xará? hahaha Já conhecia ele.
    Adorei seu blog, pura fofura.
    http://senhoritaliberdade.blogspot.com/

    ResponderExcluir
  3. Vários blogs usam esse tutorial... Ótimo!

    Beijos,
    http://meumundoecolorido.blogspot.com/

    ResponderExcluir
  4. Selinho pra vc!
    http://blog-dreamygirl.blogspot.com/2012/01/selinho-liebster-blog.html

    ResponderExcluir
  5. Denada flor! Isso naum foi nada a mais, que o meu dever !beijos garota-fashiion.tk

    ResponderExcluir
  6. Eu usava lá no meu blog, mais agora decidi deixar uma só rsrs eu sou assim virada!! amei */-* kisses e volte sempre <3

    Rawar-->> World Girl
    http://ianapaulinhaaaa.blogspot.com/

    ResponderExcluir
  7. Oi fofa,como vc fez esse layout??da uma passadinha lá no meu blog e me explica
    gabi1009.blogspot.com

    ResponderExcluir
  8. Que otimo tutorial...
    Amei o passo a passo, fiquei tudo bem explicadinho.
    adoreiii
    bjs

    http://talento-feminino.blogspot.com/

    ResponderExcluir
  9. Oi flor, de nada! rs .
    Mais dar os devidos creditos, é o minimo que eu poderia fazer naum é mesmoo? Sou totalmente contra plágio ! Muito obrigado pela sua visita no meu blog, te espero mais vezes por lá ! Rawar ---> http://garota-fashiion.blogspot.com/

    ResponderExcluir