Imagem de fundo na sidebar

|
Hello! o/ Primeiro tutorial do blog depois da reforma!

Hoje vamos aprender como colocar uma imagem bonitinha como fundo da sidebar, que nem eu coloquei aqui:
image

É bem simples, mas só funciona no modelo Viagem do blogger, pois nos outros, o plano de fundo pega toda a parte dos posts junto.

Vamos lá, primeiro abra seu blogger, vá em Design > Editar HTML

Se quiser por fundo na barra lateral esquerda, procure por:

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



E se quiser por fundo na barra lateral direita procure por:

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



Depois de achar o trecho correspondente a sidebar, apaque essa parte do código:
image

Cole no lugar do código apagado, logo depois de “background”, esse código:

url(LINK DA IMAGEM) repeat;



E coloque o link da imagem desejada onde se pede. Visualize se ficou bom e salve!
DICA
Use imagens do tipo pattern (que se encaixam quando postas lado a lado), como desenhos simples e claros pra não dificultar a leitura do seu blog.

sing-liah

52 comentários

  1. Adorei o tutorial, não imaginava que era tão "simples" fazer isso.

    www.profanofeminino.com

    ResponderExcluir
  2. Oi Liah *-*
    Tem sorteio rolando lá no blog, dá uma conferida e participe :D
    http://paradiisegirls.com
    Beijos

    ResponderExcluir
  3. Adorei o tutorial!
    Ameeei o novo design,
    Também mudei , olha lá?
    Um Beijo!

    http://blogbombaastic.blogspot.com

    ResponderExcluir
  4. Onw, brigada mesmo Liah, você é um amor de pessoa ♥ Nos, quando eu entro no seu blog, eu passo horas olhando o designer, tãao lindo *---------* Ah, adoreei esse tudo. Nha, estou te seguindo no twitter @choocoberry ;) Bye ♥

    ResponderExcluir
  5. @Raah ♔ De nada sweet! Aaaah *_* q bom que gostou, obrigada! Vou seguir devolta hihi

    ResponderExcluir
  6. Own ! Que lindo eu acabei de renovar o layout , mais pro proximo já sei que tuto eu vou usar amei!

    ResponderExcluir
  7. Adorei o toturial, fica com um final bem giro ^^


    Beijo

    ResponderExcluir
  8. @CandyGirllNM Obrigada flor! Acho um máximo vcs portugueses falando giro rs

    ResponderExcluir
  9. [aaaaaaaaaaaaaaaaaaaaaaaaaaa]
    QUE LINDO !
    Meeeeeeul Deuls (hahaha)

    Obrigada pelos parabéns! Aqui ta lindoo!
    Ensina como colocar essa "nuvenzinha" no body? u.u



    BEIJO DIVA HAHA
    www.fanaticospornoticia.tk

    ResponderExcluir
  10. Omg! #Amei o tutorial,fica mais fácil com a sua ajuda Liah! Eu não sabia como fazer mais agora já sei .. (sério?) rsrs Vou colocar no meu =3

    PS> Seu novo layout está super kawaii, combina muito com você, continue assim @blogsucesso!

    Beijokas,
    bonequinhadeluxo10.blogspot.com

    ResponderExcluir
  11. @Tay Que bom q te ajudei *_*
    aaaah obrigada! Isso que dizer que eu sou Kawai tb? >< rs #meachei

    ResponderExcluir
  12. @Tay Ah, já viu que vc é a top commenter? ;D Obg pelos seus comentários!

    ResponderExcluir
  13. que legal esse tuto,eu coloquei no meu mas daí alterei (NÃO SEI COMO) e mostrou só uma parte mas eu amei!
    retribui?
    http://innocenceteen.blogspot.com/2011/04/cursores.html

    ResponderExcluir
  14. Ameii o template,
    adoro a katy perry.
    Este blog e lindo..
    Visita?
    http://biacereja.blogspot.com/

    ResponderExcluir
  15. Adoreii ! Poxa, seu blog já está na minha pag. de creditos, de tanto que me ajuda *-*
    Eu queria perguntar só como se faz para colocar um calendario como o seu ali .. pode ajudar ? Se poder eu agradeço ! Beijos e parabens pelo blog perfã *-*
    http://fashiongirlmania.blogspot.com/

    ResponderExcluir
  16. Oii, eu queria pedir um tutorial explicando como se bota plano de fundo na barra lateral vertical. Mas olha, meu modelo não é viagem ok?
    Bjuxx

    ResponderExcluir
  17. Seu blog está em meus favoritos *-*
    O Croffy Shane está de cara nova! Dá sua opinião? ^^ Beijos!

    http://croffyshane.blogspot.com/

    ResponderExcluir
  18. amei o tutorial.

    vc poderia fazer um tutorial de como colocar o menu (as paginas) do blog em cima do cabeçalho?
    procuro um tutorial que ensina isso faz muito tempo. e agora q vi q no seu blog o menu é em cima do cabeçalho tenho esperança de q vc me ensinea fazer.

    obg. bj

    http://cutecircuit.blogspot.com/

    ResponderExcluir
  19. Ta muito lindo aqui, adorei o tuto mais qual modelo você usa? responda lá no blog? beijos

    http://material-extra.blogspot.com

    ResponderExcluir
  20. Adorei o tutorial! =)

    http://blahblahblahpop.blogspot.com

    ResponderExcluir
  21. Mimimi, eu não acho nenhum dos códigos!

    ResponderExcluir
  22. Liah, eu tentei mais não deu, e eu acho que é devido as bordas arredondadas.

    ResponderExcluir
  23. Liah o codigo :



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

    e

     .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {Nao pegam porque???Me ajuda?

    ResponderExcluir
  24. Liah,não consigo encontrar o código!!!
    por favor me ajudaaaaaaaaaaaaaaaa

    ResponderExcluir
  25. amei o tuto , muito fácil né ? oO 

    ResponderExcluir
  26. Liiaaaah, pf me ajuda, nao achei nenhum desses codigosssss!

    ResponderExcluir
  27. Liaaaaaaaah, me ajudaa, pf! Nao achei nenhum dos codigos!

    ResponderExcluir
  28. na imagem como vc coloou essa cereginha em cima utrapassando o siberbar??

    ResponderExcluir
  29. não achei os códigos :(

    ResponderExcluir
  30. Aqui é claro que não é a Liah , mas deve ser imagem png ;) 

    ResponderExcluir
  31. não achei os codigos ;/

    ResponderExcluir
  32. é que tem que selecionar expandir widgets ;)

    ResponderExcluir
  33. Liah,não consigo encontrar nenhum dos códigos!!!

    Ajuda :D

    cherry-miint.blogspot.com

    ResponderExcluir
  34. liah, como coloca igual você colocou "postado por Liah" e um beijinho do lado??

    ResponderExcluir
  35. Ameeeeeei esse tuto!! http://blah-teen.blogspot.com.br/

    ResponderExcluir
  36. Esse tuto foi util no meu blog

    Beijos

    jademarlla.tk

    ResponderExcluir
  37. Oi,
    tudo bem espero que sim, gostei muito do seu blog,
    me segui sigo de volta Beijos .
    http://gaabiefelix.blogspot.com.br/

    Muito Obrigada.

    ResponderExcluir
  38. OOi Lindinha!
    Ameiii O Blog!
    Muito lindoooo!
    Heim,foi vc que fez o lay do seu blog?
    Aceita encomenda?
    responde lá no meu blog!
    só não estou seguindo pq meu blogger está com problemas ):
    bjbj
    Déboora||Young World

    ResponderExcluir
  39. não consigoooooooooo!!!!!!!!!!, ah outra coisa, dá pra tirar fundo branco das imagens no photoscapre? não me diz q é só jogá-la num gundo transparente e salvar como png pq já fiz e não deu certo...

    pode me responder por comentário lá no blog?

    http://facebook.com/brogandome/
    http://brogandome.blogspot.com/
    http://saorimonroecobain.tumblr.com
    @carolposeidon

    ResponderExcluir
  40. Ótimo tuto! Créditos eternos lá no meu blog OIEPOWQIE-
    Kisses

    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  41. Olá!Tuto ótimo, mais eu não acho patterns em lugar nenhum poderia me dar uma dica de site... algo que tenha?Obrigado!

    ResponderExcluir
  42. Amei o tutoriaal foi tão simples eu nem imaginava.
    http://mundootomee.blogspot.com.br/

    ResponderExcluir
  43. Não achei onde coloca o link da foto, me ajuda? :(

    ResponderExcluir
  44. Me ajudou bastante. Estava quebrando muito a minha cabeça com isso. Obrigado :D

    ResponderExcluir
  45. Mas qual tamanho precisa ser a imagem que quero colocar na barra lateral???

    ResponderExcluir
  46. adorei o tutorial.. obrigada (:

    ResponderExcluir
  47. Adorei o tutorial...
    Da uma passadinha no meu blog http://blogkentrenosnf.blogspot.com.br/ <3

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...