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

53 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. Este blog é uma representação exata de competências. Eu
    gosto da sua recomendação. Um grande conceito que reflete os pensamentos do
    escritor. Consultoria
    RH

    ResponderExcluir
  30. flor no meu não deu certo

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

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

    ResponderExcluir
  33. não achei os codigos ;/

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

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

    Ajuda :D

    cherry-miint.blogspot.com

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

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

    ResponderExcluir
  38. Esse tuto foi util no meu blog

    Beijos

    jademarlla.tk

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

    space-sweet-girl.blogspot.com.br

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

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

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

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

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

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

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

    ResponderExcluir
  50. adorei o tutorial.. obrigada (:

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

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...