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. Bruninha7/7/11 12:27

    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. SGabrielle8/8/11 18:32

    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. Opa, foi o comment  2 vzs.

    ResponderExcluir
  29. Dani Ferreira1/11/11 15:43

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

    ResponderExcluir
  30. perfeito, *-*

    ResponderExcluir
  31. flor no meu não deu certo

    ResponderExcluir
  32. Gabriely Mayra22/1/12 01:15

    não achei os códigos :(

    ResponderExcluir
  33. lauramolan2/2/12 19:35

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

    ResponderExcluir
  34. Beatriz Arruda3/2/12 10:59

    não achei os codigos ;/

    ResponderExcluir
  35. Alessandra6/2/12 10:57

    é que tem que selecionar expandir widgets ;)

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

    Ajuda :D

    cherry-miint.blogspot.com

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

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

    ResponderExcluir
  39. Esse tuto foi util no meu blog

    Beijos

    jademarlla.tk

    ResponderExcluir
  40. 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
  41. 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
  42. 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
  43. Ótimo tuto! Créditos eternos lá no meu blog OIEPOWQIE-
    Kisses

    space-sweet-girl.blogspot.com.br

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

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

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

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

    ResponderExcluir
  48. Olá como é que voce pos os news?

    ResponderExcluir
  49. http://pipocas-kawaii.blogspot.pt/

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

    ResponderExcluir
  51. adorei o tutorial.. obrigada (:

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

    ResponderExcluir