25.3.12

Barra lateral colorida !

Oi lindinhas , hoje quero ensinar como fazer a barra lateral igual a minha , uma coluna lateral com duas cores , bom para colocar  a barra lateral é preciso editar o fundo vamos ver : 
p.s todos os créditos à Nathalia Guerra !



1 º - vamos em designe -> designe do modelo  -> layout :


2 ° - vamos agora em ajustar larguras :

  aqui no meu blog por exemplo está em  todo o blog 1040 que é a largura do louca atitude e na barra lateral está em 400 pois sera dividido em duas  barras de 200 .
 depois de ter feito isso salve o procedimento .

3 ° - é preciso da imagem para a barra :

no caso aqui do louca , nos usamos essa imagem :
 

quem quiser pode usar a vontade no seu blog , lembrando que essa imagem tem 200px vezes 200 px  . por e ela tem no total 400px.
depois de editar tudinho direitinho , hospede a sua imagem no Imageshack ou no seu blog ou pegue essa imagem mesmo .

e guarde a URL da sua imagem :

4º Agora enfim o final  , vá em designe -> editar HTML -> e de Ctrl + F :

Se você escolheu a coluna do lado direito  , procure por : 

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

se você escolheu a coluna do lado esquerdo , procure por : 

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

no exemplo aqui do blog apareceu 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;
}

se você escolheu do lado esquerdo  , vai aparecer assim : 

.main-inner .fauxcolumn-left-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;

só substitua a URL da imagem pela qual você hospedou  , não retire as aspas 
depois visualize para ver se esta tudo certinho e se estiver salve .
qualquer dúvida me pergunte por comentário !
espero que tenham gostado do tuto e até mais !

4 comentários:

  1. Oi linda seguindo de volta!
    http://blogteen-forever.blogspot.com.br/
    Passa la mais veses ta? BEZOOS

    ResponderExcluir
  2. Oii, retribuindo a viisitinha, Layla Oliveira do World Candy.

    Aceita parceria ?

    deluxesphotoscape.blogspot.com

    ResponderExcluir
  3. Oi linda, vim responder sua pergunta lá no meu blog(SWEet Flower) sobre as bordas arredondadas na imagens...Então, é um tutorial que achei na net, mas naun lembro onde foi, vou postar um tutorial no meu blog, fica de olho lá tá. Bejoos !!

    http://sweet-flower-laura.blogspot.com.br

    ResponderExcluir
  4. Oii, acc sim ser sua afiliada, me linka dps avisa, e eu farei o mesmo !!

    http://sweet-flower-laura.blogspot.com

    ResponderExcluir