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

30 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. Oii,lindo seu blog,
    ja estou seguindo,
    me segue tmbm : http://photoscapestyle1.blogspot.com
    ah,aceita parceria tmbm??

    ResponderExcluir
  7. 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
  8. Muito obrigada msm, finalmente consegui fazer. Bjs
    blogcandydream.blogspot.com

    ResponderExcluir
  9. 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
  10. Amooore, queria saber se vc aceita afiliação <3
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  11. 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
  12. Liah, onde você pegou essa setinha de mouse tão cute?

    Beijocas,  Cacá

    ResponderExcluir
  13. obrigada flor,vc ajuda bastante ^^

    ResponderExcluir
  14. 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
  15. 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
  16. 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
  17. Liah , eu queria saber se não dá para deixar com duas cores só que sem uma imagem , dá ? 

    ResponderExcluir
  18. 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
  19. funciona mesmo eu tava umas 2 ou 3 horas procurando como fazer isso ajudo muitoooo mesmooo....

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

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

    ResponderExcluir
  22. 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
  23. Ótimo tuto!
    Kisses

    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  24. 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
  25. 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...