22.5.12

Barra lateral com fundo colorido


Oiie gente (:

Hoje eu trouxe um tutorial bem simples pra fazer, que eu até testei e deu certo! É como deixar o fundo da sidebar (barra lateral) colorido ou com uma imagem. Quer aprender? Então clica em Leia mais !



Os créditos vão para o Only Teen !

Vá em Design  Desing do modelo  Layout. Escolha o modelo que você preferir para as colunas. Depois salve.

Agora voce irá precisar de uma imagem com a cor que voce quiser na barra lateral. Eu fiz algumas pra voces:

Uma barra lateral:





Duas barras laterais:




Elas estão pequenininhas mas é só clicar nelas que vai pro tamanho original (:

Agora vá em Design  Editar HTML 

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

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

O código vai estar basicamente desta maneira: 

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {margin-right: $(content.padding);background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;}

Substitua a parte destacada por este código:
background: url("URL DA IMAGEM") repeat;

No lugar de "URL DA IMAGEM", coloque o link da imagem (avá). Visualize e se estiver tudo OK, clique em Salvar Modelo. Prontinho !

Beijos :*

20 comentários:

  1. Olá! Adorei o blog! Visita lá o meu tbm e se gostar siga que eu te sigo por aqui!

    www.jubspimenta.blogspot.com

    ResponderExcluir
  2. Oi flor!
    Adorei o tutorial! super útil :D
    AMEI seu blog!
    Já estou seguindo :D


    Espero sua visitinha no meu cantinho okay ?
    Bjs
    justgloss.blogspot.com

    ResponderExcluir
  3. Peerfeeiito o tutorial !

    detalhesdaamooda.blogspot.com.br/

    ResponderExcluir
  4. Ameiii seu blog! Visita lá o meu tbm e se gostar segue, pq eu ja to seguindo aqui!

    www.the-power-of-girls-rock.blogspot.com

    ResponderExcluir
  5. Adorei as cores das barras. Um tutorial bem util :)
    www.cute-bii.blogspot.com

    ResponderExcluir
  6. valeu por visitar meu bloog flor!!
    nao sabe quanto me ajuda :)


    obg!

    ResponderExcluir
  7. Adorei o tutorial simplismente FOFO <33 Bezus Luuh
    Rawr Baby ~> teenstyle.com

    ResponderExcluir
  8. Belo tuto *-*

    Beijos, Gabriela. 4-Brownies.blogspot.com

    ResponderExcluir
  9. Estava querendo mudar a minha no próximo layout para branco, vou tentar :D

    http://www.world-cutest.blogspot.com.br/

    ResponderExcluir
  10. Oi Giovanna, tudo bem?
    Você conhece o LooknBe Brasil? O LooknBe é a primeira rede social dedicada a moda e a beleza. O LooknBe está presente na França (com mais de 60 000 usuários), Itália, Espanha, Rússia, UK e Canadá. No site você pode fazer um perfil, adicionar amigos, e pedir conselhos sobre moda. Por exemplo, se está indecisa em comprar uma roupa é só postar uma foto e pedir opinião para os membros do site. Ou perguntar onde achar determinada peça, entre outras ferramentas.
    O motivo do contato é um convite para participar do LooknBe Brasil. É para postar fotos dos seus looks na seção “Livro Look”, os membros do LooknBe Brasil votam nas suas produções. Poste uma foto e saiba o que eles acham do seu look! Divulgue para os seguidores do seu blog e seus leitores, assim você vai obter votos e poderá ter o look “Mais votado” da seção. Participe!
    Se quiser pode fazer perguntas sobre esmaltes, sapatos, bolsas, maquiagem, tudo relacionado a moda e beleza na seção "Questões".
    Podemos contar com a sua participação???
    Att,
    Equipe LooknBe Brasil. (rachel@looknbe.com)

    http://www.looknbe.com/pt_BR/

    ResponderExcluir
  11. super interessante o tuto
    ajuda muitas pessoas que estão começando agora.
    beeijos

    http://www.asgarotasdonl.blogspot.com.br/

    ResponderExcluir
  12. Nossa, sou muito atrasada! Nao sabia que dava para colocar imagem na barra lateral.. Adorei! To até pensando em fazer uma mini reforma no meu blog :)

    Passa lá no blog depois. Estou fazendo meu primeiro sorteio *o*
    Beijo
    Sem querer me intrometer

    ResponderExcluir
  13. Ótimo tutorial pra quem gosta. :D

    Entretenimento é aqui!
    http://entretenimentoeaquii.blogspot.com.br/

    ResponderExcluir
  14. Adorei o tuto, você explica muito bem!
    Beijos da Mollie, #Rawr!


    Me ajuda a chegar aos 50 seguidores? Obg!
    http://chassy-bomb.blogspot.com.br/

    ResponderExcluir
  15. Este comentário foi removido pelo autor.

    ResponderExcluir
  16. Que tuto ótimo ! A-M-E-I d++ mt baca e vc explica mt bem !

    fluffy-giirl.blogspot.com.br

    ResponderExcluir
  17. OMG! Ja usando! Muito obrigada, voce me ajudou muitoooo!!! Estou criando um novo design para meu blog e assim que ficar pronto, venho te avisar, pois voce me ajudou muitooo!

    ResponderExcluir
  18. Tem um selinho la no meu blog para vc !

    http://lovemines2.blogspot.com.br/

    ResponderExcluir
  19. Não achei esse tutorial em lugar nenhum, só aqui e deu super certo!

    sweethem-l.blogspot.com

    ResponderExcluir

- Não xingue, se for xingar é melhor nem comentar.
- Aceito críticas e sugestões construtivas.
- Se quiser, deixe o endereço do seu blog e eu faço uma visita!