11 de jan de 2012

Tutorizando - Mudar as cores das barras laterais, uma de cada lado.

| |
Como já devem saber, venci o concurso do blog MN&Q com o TT. E preciso agradecer profundamente a todas as garotas que me ajudaram votando em mim! Eu sei que é chato e tudo mais votar pelos outros, mas mesmo assim, mais de 100 meninas fizeram um esforço pra me ajudar, e eu só tenho a agradecer! E é claro, sempre que precisarem contem comigo!


As meninas dos blogs foram umas fofas e fizeram um post sobre o Depois da Primavera e uma entrevista comigo. Quem tiver interesse em ler, aqui estão:  Post e entrevista.


E de novo, obrigada a todos, de verdade! (:
Agora vamos ao que interessa. Como sabem, abri encomendas. E enquanto fuçava o html descobri uma coisinha super simples e super legal, que vou ensinar pra vocês. 
Quando você coloca duas barras laterais, as duas ficam com a mesma cor. Quando estão do mesmo lado, existe uma maneira de deixa-las diferentes, mas quando estão uma de cada lado, como na imagem abaixo, tem uma outra maneira. Além disso,  vou ensinar a arredondar apenas os cantos externos.
(Blog Cheiro de amora - Uma encomenda que terminei esses dias :3)

Clique em "ler mais" para ver o tutorial.



 - Clique nas imagens para aumenta-las.
Eu testei esse tutorial apenas no modelo Travel e com uma barra de cada lado, não sei se funciona se for diferente.
Vou começar ensinando a deixar as barras dessa maneira, uma de cada lado. Vá em Modelo - Personalizar - Layout, e selecione o seguinte:
Depois vá em Ajustar larguras, e coloque o seguinte:
Clique em "Aplicar ao blog" e "Voltar ao blogger". Vá para "Editar HTML" - "Prosseguir".


Usando o CTRL+F, procure por:


.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Substitua todo o trecho (até fechar a chave - "}" ) pelo seguinte:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
 -webkit-border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px;   border-bottom-right-radius: 20px; background: #C0FF3E; /*Cor da barra lateral direita*/
}
Com a ajuda dessa tabela faça as mudanças: Aonde está em roxo coloque a cor da barra lateral DIREITA. Caso não queira arredondar os cantos, apague a parte em verde.


Visualize, se estiver tudo certo, salve e procure pelo seguinte: 


.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Substitua todo o trecho (até fechar a chave - "}" ) pelo seguinte:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
-webkit-border-bottom-left-radius: 20px; -moz-border-radius-bottomleft: 20px;   border-bottom-left-radius: 20px; background: #006400; /*Cor da barra lateral esquerda*/
}
Com a ajuda dessa tabela faça as mudanças: Onde está  em azul coloque a cor da barra lateral ESQUERDA. Caso não queira arredondar os cantos, apague a parte em verde.


É isso, visualize e salve.
Não copie esse tutorial ok?


Gostaram? Funcionou certinho? Qualquer dúvida me perguntem!

43 comentários:

  1. Nossa, adorei! haha,
    vou salvar nos meus favoritos aqui, haha, super legal esse tutorial *o*
    adoreeei ! hahaha
    novo post lá no meu blog fofa ♥

    bjs!
    bnascimentooo.net.tc

    ResponderExcluir
  2. Adorei o tutorial, vou usar no próximo design do FP *-*
    Beeeijos!
    http://viverserfeliz-renata.blogspot.com/

    ResponderExcluir
  3. Bem útil, apesar de eu preferir um só!
    exclusivoparagarotas.tk

    ResponderExcluir
  4. Acho lindo duas barras laterais com cores diferentes. Mas prefiro as duas de um lado só. Mas por enquanto o Muggle World ainda não tem nada útil pra colocar na lateral, por isso uma barra só já ta de bom tamanho HAUHEUAHU q

    Aaaah, vi sua entrevista. Show o/

    muggle-world.blogspot.com

    ResponderExcluir
  5. Dica bacana anjo, logo menos quando eu for mudar o visu do blog vou usa-las, obrigada !
    bjbj http://viceveersa.blogspot.com/

    ResponderExcluir
  6. Como eu não pensei nisso antes!!! Adorei a dica!!! só não sei se tenho coragem pra grande mudança!!!
    http://peoples-says.blogspot.com

    ResponderExcluir
  7. Adorei esse tutorial! Fica super fofo...

    Kisses,
    http://bloggarotainocente.blogspot.com/

    ResponderExcluir
  8. Ótimo tutorial Carol, até aprendi a fazer rs
    Bjs
    Dezessete em Diante / Facebook

    ResponderExcluir
  9. Oiie Seu blog é muito lindo eu amei seus post e o design ta arrazando em ! conheci seu blog hoje e pretendo voltar mais veses ja estou seguindo segue de volta ?
    Portal Disturbia

    ResponderExcluir
  10. Adorei o tutorial e a encomenda ficou super fofa também! O Blog dela está no comecinho, mas um lay perfeito logo de cara faz o cantinho dela crescer rapidinho! Parabéns linda!
    Ah Carol, essa é a primeira vez que acesso seu blog e amei logo de cara! O conteúdo e o layout são apaixonantes. Garota, você tem um talento e tanto *-* Continue assim! Claaaaro que não pude deixar de segui-la! Seria uma honra vê-la no meu blog, e se gostar, seguir também! Tem posts novos por lá! Beijos!

    Antes de Sonhar

    ResponderExcluir
  11. Olá estou te convidando para visitar o meu novo blog, tenho certeza que irá gostar, beijinhos.
    http://fasesdegarota.blogspot.com

    ResponderExcluir
  12. Adorei o post!
    Esse tutorial é bem interessante!
    bjs
    charmofpink.blogspot.com

    ResponderExcluir
  13. Amei o post!
    O tutorial é ótimo
    seguindo
    http://purocaprichoo.blogspot.com

    ResponderExcluir
  14. Já sabia como fazer, mas o seu tutorial é fácil por ser bem explicado *-*

    Adorei o blog, e parabéns pelo concurso!
    http://heey-darling.blogspot.com/

    ResponderExcluir
  15. interessante :3
    gostei

    upmaravilha.blogspot.com

    ResponderExcluir
  16. Obrigada pela visita, querida! Seguindo... virgulaassassina.blogspot.com

    ResponderExcluir
  17. Ótimo esse tutorial!
    Muito prático ;)
    bjs

    happymomentts.blogspot.com

    ResponderExcluir
  18. Eu vejo lá no blog da Fer, o MN&15 e acho demais. Tinha visto já o tutorial mas nunca tinha parado pra ler...

    comenta?
    jeito-inedito.blogspot.com

    ResponderExcluir
  19. Oiee =)

    Adorei o seu blog, e já estou seguindo!!
    Ficarei muito feliz se puder seguir o meu também!

    Parabéns pelo blog, sucesso miiiiiiiiil!
    Beijo grande!

    ResponderExcluir
  20. Oi eu AMEI O SEU BLOG! Gostei muito ! De verdade! vou está seguindo com ansiedade do post novo :D Muito bom sério parabéns :D

    Beijos
    www.accessoriesteen.blogspot.com

    ResponderExcluir
  21. Adorei o tuto ^^
    Ah flor, aproveitando, to passando pra avisar que tá rolando um mini sorteio lá no blog de um exemplar do livro "A Cabana" em parceria com a Editora Arqueiro, não vai ficar de fora né?
    Beijos!
    Tendências Teens | Sorteio em parceria com a Editora Arqueiro

    ResponderExcluir
  22. adorei o tuto, beeem util em, *-* , seguindo você, segue de volta?

    http://s2-fearless.blogspot.com/ .. beeijos *-*

    ResponderExcluir
  23. Oi adorei o post!Sou do blog Sweet Teen http://www.sweetteen-mah.blogspot.com
    dá uma passadinha lá? Tem novidade

    ResponderExcluir
  24. Oi. Como vai?
    De nada flor, parceiras são pra essas coisas, quando precisar pode contar comigo, fiquei muito feliz quando soube que ganhou, pois nosso esforço em te ajudar valeu a pena.
    Demais, esse tutorial, quando eu mudar o proximo layout vou usar e darei os creditos é claro!

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  25. Esse tutorial é ótimo! *o*
    Parabéns, super bem elaborado.

    Garota Ambulante

    ResponderExcluir
  26. O tutorial é perfeito. seu blog é lindo, tudo aqui é lindo, já to seguindo.
    http://15desejos.blogspot.com

    ResponderExcluir
  27. adorei o tuto!
    o design do blog cheiro de amora! ficou lindo
    beijo :)

    girlsgarotasonline.blogspot.com

    ResponderExcluir
  28. Parabéns por ter vencido o concurso...
    Curti a entrevista :)

    Adorei o blog e estou seguindo
    Me visite e se gostar segue também

    http://jujuba-d.blogspot.com/
    bjo bjo

    ResponderExcluir
  29. Amei o tuto!! Quando eu souber mexer melhor, vou usá-lo- kk

    Beijo

    http://jeitinhoteen.blogspot.com

    ResponderExcluir
  30. Oi flor, aceita afiliação? Beijos, sempre que puder, vou vir aqui, espero sua resposta! garota-fashiion.tk

    ResponderExcluir
  31. Amei esse tutorial! Eu estava super na dúvida de como fazia isso, muito obrigada!

    Beijos, Mallü.
    http://thelovekingdom.blogspot.com

    ResponderExcluir
  32. Muito útil o tutorial :D


    Novo post, comenta?
    http://blog-sundaedecereja.blogspot.com/

    ResponderExcluir
  33. Tutorial otimo *O* Seguindo, Participa do concurso? Agradeço!
    http://mundodemeninasteen.blogspot.com/2012/01/concurso-o-blog-mais-divo-de-2012.html#comment-form

    ResponderExcluir
  34. ótimo tutorial !

    tem lay novo, comenta !

    http://garotoonerd.blogspot.com

    ResponderExcluir
  35. Muito bom o tutorial,mais posso pedir um tutorial?ashaushaushau# como você faz aquela barra de pesquisa tipo que personalizada?

    Beijinhos da Luísa>>>Lufashionteen.blogspot.com//Novo Lay,confere?

    ResponderExcluir
  36. Passei para conhecer o seu blog,
    beijos

    ResponderExcluir
  37. Oii querida, muito obrigada por me ajudar votando no concurso.

    Beijos, Mallü.
    http://thelovekingdom.blogspot.com

    ResponderExcluir
  38. Primeiro, parabéns pelo concurso, você merece! E saiba que já tem um voto garantido no próximo. Sobre o tutorial,bem legal, você explicou direitinho.

    Bjão

    www.picturesandreams.blogspot.com

    ResponderExcluir
  39. Obrigado ! Pelo tutorial, você não sabe como
    eu necessitava dele rsrs' Obrigada, mesmo flor beijo&abraço

    www.interligada-i.blogspot.com

    ResponderExcluir
  40. Nossa! Amei o tutorial, estarei usando no próximo layout do meu blog ;) goods-sweets.blogspot.com.br

    ResponderExcluir
  41. 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

Comente a vontade, mas lembre de deixar o link do seu blog para que eu possa retribuir. E nunca, nunca mesmo, faça "copia e cola" por aqui.
Comente aqui somente sobre o post, pra qualquer outro assunto use a página de contatos (:

Bjj
Carol