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!