15 julho 2011

Barras laterais do mesmo lado de cores diferentes

||
Tumblr_lyxn9v1tyq1r9mh14o1_500_large
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;

20 comentários:

  1. AAAAAAh, o post tá ótimo Luanara!
    Mas, vou esperar você ensinar comoe ditar o tropical cocktail, pq já tenho ele no meu pc, bem, de qualquer jeito o post tá perfeito!

    Tem post novo no St Comenta?

    Beijos^^
    http://styleteensnews.blogspot.com

    ResponderExcluir
  2. obrigada amor,pode deixar que eu logo faço ><

    ResponderExcluir
  3. amor esse é complicado hêm depois eu vou fazer , mais só no próximo designer do meu beijos *-*

    http://blog-garotadescolada.blogspot.com/

    ResponderExcluir
  4. O post ficou bom e muito bem explicado mas não acho que você deveria dar o nome do nosso template porque agora todos vão ficar exatamente igual!

    http://trasshygirl.blogspot.com

    ResponderExcluir
  5. Era tudo que eu precisava, esse post tirou todas as minhas dúvidas :]
    Nossa, eu tbm tÔ de greve faz 1 mes, mas o povo da minha escola é gte boa e so vão voltar dpois das férias ~oba~
    Mas bom estudos pra vc =/

    Bjs,
    www.blogportalteen.blogspot.com

    ResponderExcluir
  6. eu só falei do template porque teve gente que perguntou , e também não é tanta gente assim que vai querer perder todo o design pra personalizar um template , é mais fácil fazerem no modelo do blogger.

    ResponderExcluir
  7. Ótimo tutorial, ficou super caprichado o post!

    Tá rolando um sorteio lá no blog, participa.. quem sabe você não ganha?

    http://tvfabulous.blogspot.com/

    Bjs, Sté

    ResponderExcluir
  8. oie amor ! obg pela tuutoo, poutz. pena que em um dia antes outro blog ensinou né ? mesmo assim ficouu bem explicadinho, só que no que eu aprendii é diferente , http://meninanerd.blogspot.com/2011/07/coloque-duas-colunas-com-fundo-colorido.html !
    ps: nao tem nada a ver este negocio de template, nem todo mundo quer copiar as outras pessoas (:
    bjs *-*

    ResponderExcluir
  9. Hi Florzinha ;D
    Viim Aqui Retribuir a Visitinha e Pedir Uma Coisinha...
    Posso Ser Afiliada?
    Haa' Ja Te Linkei Em Parcerias!

    ResponderExcluir
  10. ERA O QUE EU PRECISAVA! HAHAHAHA Ficou demais o post, bem explicado, e com certeza se prestar atenção, consegue fazer numa boa!
    Eu tava querendo muito um tutorial assim, e com certeza você em ajudou demaaaaaaais, muito obrigada!
    Beeeeeijos LU! ;*

    - http://a-crossthestreet.blogspot.com/

    ResponderExcluir
  11. Oie !! Amei seu blog !! Perfect !! Queria fazer parceria !! Quando se descidir (e se a resposta for sim) vc segue meu blog e ai vc coloca meu link aqui ok ? Bjs !! www.tuti-fruti-girls.blogspot.com !!

    ResponderExcluir
  12. Participe: Concurso concorrendo a 2 meses de divulgação em uma página do B&B! Corra, é até dia 15/8!

    http://bubblegumburts.blogspot.com/2011/07/concurso-b.html

    ResponderExcluir
  13. luuh do ceu, tá perfeito o lay novo daqui

    http://dezesseisamargos.blogspot.com

    ResponderExcluir
  14. Nossa, parabéns pelo post, deve ter dado um trabalhão ;~

    Eu uso uma coluna só, mesmo.

    Obrigada pela opinião lá no blog :)
    Beijão

    ResponderExcluir
  15. Muito util esse tutorial *-*

    Beijos :*
    http://vaniteeen.blogspot.com/

    ResponderExcluir
  16. Este comentário foi removido pelo autor.

    ResponderExcluir
  17. não conseguiii :'(

    http://blog-justlive.blogspot.com/

    ResponderExcluir
  18. Complicadéerimo heiins =S
    Maais, consegui ^^'
    Ameei seu blog ^^' Já estou seguindo ele, retribui ?
    beijos ;*
    blogdocemenina.blogspot.com

    ResponderExcluir

- Eu respondo todos os comentários do blog, por mais que demore um pouquinho sempre respondo.
- Se você me fez alguma pergunta por comentário eu respondo no próprio post, então é só voltar no post onde perguntou que sua resposta estará lá.
- Adoro receber e-mail de leitoras, com dúvidas, elogios, sugestões e até algum desabafo como muitas fazem, acreditem não é nenhum incômodo <3
- Se quer criticar, critique de modo construtivo.
- Eu adoro quando vocês participam, afinal o blog é feito para vocês <3

Related Posts Plugin for WordPress, Blogger...