Colunas lado a lado com cores diferentes

|
Atendendo mais uma vez á pedidos, hoje vou ensinar como deixar seu blog com duas colunas uma ao lado da outra e com cores diferentes de um jeito fácil, utilizando conhecimentos que vocês provavelmente já têm. Vamos lá?




Vá no Designer de modelo do blogger, clique em layout e escolha o modelo com duas colunas juntas:
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. Aqui no CB eu uso assim:

2
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. Você pode se basear pelo exemplo abaixo e pintar com as cores que quiser.

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

Procure 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 preto, e no lugar coloque esse código:

background: url(link da sua imagem);


Aí é só colocar o link da imagem de fundo, visualizar e salvar!

Espero que tenha sido útil, Não esqueça de comentar! Kissus
sing-liah

32 comentários

  1. Amei o tutorial, muito bom e útil rsrs

    http://cupcakebomb-js.blogspot.com

    ResponderExcluir
  2. Adorei a dica liah, j fiz isso em meu blog 

    bjusssss

    http://www.maryecia.blogspot.com/

    ResponderExcluir
  3. que bom q gostou e conseguiu fazer! =)

    ResponderExcluir
  4. Já vi esse tuto no Menina Nerd, mas o seu também está ÓTIMO! Beijos, e que bom q gostou do novo lay ^^

    ResponderExcluir
  5. Eu já tinha no meu blog desde o começo, quando fiz cursinho de designer aprendi, e até então só o trechy teen e o me que tinham (dos que eu conhecia) e hoje, tem vários tutoriais por ai, rs. 
    Estou realizando um pequeno sorteio em meu blog, em que está valendo utilitários para seu blog, e divulgações, que valem muito apena, e tem várias chances que com gestos simples lhe dão muito mais inscrições! E, quem participar desse, terá uma chance extra para um próximo sorteio, valendo esmaltes, em parceria com a risqué! Ótima oportunidade, não é?! Pois bem, vá logo conferir!Espero sua visitinha!Beijos! http://blog-mundo-da-moda.blogspot.com/

    ResponderExcluir
  6. Selinho para você: http://mini-fofoquinhas.blogspot.com/2011/08/selinho-sorteio-do-mundo-da-moda.html

    ResponderExcluir
  7. Oii,lindo seu blog,
    ja estou seguindo,
    me segue tmbm : http://photoscapestyle1.blogspot.com
    ah,aceita parceria tmbm??

    ResponderExcluir
  8. Olá a todos os fãs do Cherry Bomb, só gostaria de pedir, para dar uma olhadinha no meu blog!www.loucasprincesas.tk, se gostar segue!

    ResponderExcluir
  9. Muito obrigada msm, finalmente consegui fazer. Bjs
    blogcandydream.blogspot.com

    ResponderExcluir
  10. Oi Liah ! Tudo bom ?
    Queria saber se tem algum código que faz o cabeçalho ficar mais pro topo, mais pra cima. Se tiver como, me ensina *-*
    Beijos , espero a resposta

    ResponderExcluir
  11. Amooore, queria saber se vc aceita afiliação <3
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  12. Oii,amei o seu blog,ja estou seguindo,segue o meu tbm ?? o meu é novo por isso nem tem seguidores direito,o meu fala de frases,coisas engraçadas,gifs ..etc
    Bjjs,Gii
    --------------------------------------------------------------------------------------------------*
    www.frases-do-coracao.blogspot.com

    ResponderExcluir
  13. GarotasSuecas-blog28 de agosto de 2011 07:09

    Liah, onde você pegou essa setinha de mouse tão cute?

    Beijocas,  Cacá

    ResponderExcluir
  14. obrigada flor,vc ajuda bastante ^^

    ResponderExcluir
  15. caramba ficou lindo,deu certinhu!Obgd liah,eu queria ser postadora aqui,vc poderia entrar em contato comigo?
    email:byatalentogmail .com
    tenho ótima experinecia em blogs,mais de 2 anos,tenho tds progamas cabiveis e seu um pouquinhu de HTML,pf responda o mais rápido possivel,quero muito ser postadora aqui!peloa mor de deus!

    ResponderExcluir
  16. O meu não deu certo, você pode me ajudar? Meu blog está fechado... se quiser responder o coment nele entre nesse aqui": webnovelasporlara.blogspot.com

    ResponderExcluir
  17. Liah me ajuda por favor , o problema é que quando eu coloca ctrl f e coloco oque voce pediu o link , mas nenhum dos dois vai .

    ResponderExcluir
  18. Liah , eu queria saber se não dá para deixar com duas cores só que sem uma imagem , dá ? 

    ResponderExcluir
  19. Liaah não comsigo , acho que no meu blog não tem .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
    e .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
    Me ajudee ?

    ResponderExcluir
  20. funciona mesmo eu tava umas 2 ou 3 horas procurando como fazer isso ajudo muitoooo mesmooo....

    ResponderExcluir
  21. quando o coloquei a area dos posts ficou transparente e não mudava então voltei ao normal

    ResponderExcluir
  22. Á KIM HYUNA NO SEU BLOG???? *O*
    ME FAZ AMA-LO MAIS AINDA!!!
    PARABENS CONTINUE ASSIM,SEMPRE DIVO *U*
    E MAIS HYUNA -q

    ResponderExcluir
  23. Ai amei o tuto super fácil estou colocando agorinha no meu blog!

    Parabéns que Deus te abençõe!!!Mais e mais!

    http://cherebebel.blogspot.com.br/

    Tchau ,Liah \õ/

    ResponderExcluir
  24. Bom dia,sou anderson da equipe detetive-particular.org ,quero falar que o blog ta de parabens gosto muuito dele,muito bem feito!!!...me recomendaram e estou acompanhando...recomendação hoje é tudo..to precisando saber se esse site aqui é bom por que eu to precisando de um rastreador de carro,moto entre outros alguem conhece o http://www.rastreadorgps.org/ ? se alguem souber de uma referencia me da um toque,e parabens pelo blog bom demais!!

    ResponderExcluir
  25. Ótimo tuto!
    Kisses

    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  26. Nossa amo seu blog, você é a garota que eu queria ser, tem como você dá uma olhada no meu blog? Não sei mexer muito direito: http://is-strong.blogspot.com.br/

    ResponderExcluir
  27. perfeito o tutorial , obrigada, também queria que voce ajudasse eu e meu amigo com o nosso blog, aceite meu comentarios, obrigada dese já.

    potterheads223.blogspot.com

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...