10 abril 2012

Tutorial: Imagem no fundo das postagens

Tumblr_m28mrfsxns1qhahtxo1_1280_large

Oi gente!!! Hoje venho trazer pra vocês um tutorial super fácil.
Como vocês podem ver, a área de postagem aqui do blog tem borda de uma folha de caderno. Para isso eu coloquei uma imagem como plano de fundo das postagens.

Antes do tutorial aqui vai duas imagens que podem ser usadas como plano de fundo. Mas você pode criar a sua própria imagem.
obs: as imagens não estão muito visíveis porque são de fundo branco. Para visualizar melhor clique sobre a imagem.




Vamos os tutorial?

Primeiro vá em Design > Editar HTML.
NÃO marque Expandir modelo do widget.

Tecle CTRL+F e procure por: .main-inner .column-center-outer {

Achado o trecho apague o trecho abaixo:

background: $(post.background.color) $ (post.background.url) repeat scroll top left;
_background-image: none;
}

No lugar cole o seguinte código:

background: url(url da sua imagem) repeat;
}

Coloque no trecho em rosa o url da imagem escolhida.

Não esqueça de ver se as margens estão alinhadas com a imagem, senão o texto fica em cima da borda  e fica difícil de ler. 

Para isso procure por .main-inner .column-center-inner { e substitua 


padding: $(content.posts.padding) 0; 


por


padding: 10px 10px 10px 20px;






Bom, é isso gente. Super fácil não é.

Aprendi esse tutorial no blog World Girl. Lá tem muitos outros tutoriais.

Espero que tenham gostado. BEIJINHOS!!! 

33 comentários:

  1. Adorei Nah!
    Seguidamente o pessoal me pergunta sobre esse tuto e eu esqueço rs
    Muito legal, bjaoo

    ResponderExcluir
  2. Não achei esse trexo:
    .main-inner .column-center-outer {
    A caixa de expandir modelos ñ está marcada.
    mas achei :
    .main-inner .column-center-inner {

    Mas esse trecho também não tem:
    background: $(post.background.color) $ (post.background.url) repeat scroll top left;
    _background-image: none;
    }

    ResponderExcluir
    Respostas
    1. Nanda,tenta no viagem. Eu também não tava achando,mudei pro viagem e deu certo. Beijos!

      Excluir
  3. adoreei o tuto bem legal ne ? acho que vc retirou o credito né ? kk' coloca ai rs ' amei o tuto bjs

    ResponderExcluir
  4. Adorei o tutorial,estava procurando a muito tempo,mas eu tenho uma dúvida, quando eu coloco, a imagem fica sob as letras das postagens,o que eu faço?
    http://i-teenbr.net.tc

    ResponderExcluir
  5. Poxa, eu estava procurando esse tutorial fazia um bom tempo. Vim aqui por indicação da Gizaa e amei. To seguindo.
    Beijos
    Jessica
    Se quiser conhecer o meu blog, pode vir: http://simplesesereno.blogspot.com.br Se gostar, segue =)

    ResponderExcluir
  6. Floor, no meu blog eu uso o modelo Janela de Imagem ... mas acho que não adianta né ... beijos e obrigada pela ajuda ...

    ResponderExcluir
  7. gosto muito do blog e queria se puder me fazer um template ou cabeçalho para os meus blogs

    http://o-meu-ladooculto.blogspot.pt/ e-mail nas encomendas

    http://poesia-de-uma-vida.blogspot.pt/

    ResponderExcluir
  8. Eu não consegui achar os trechos!! :(

    ResponderExcluir
  9. Thalita, deve ser porque seu modelo não é o viagem. Eu testei no viagem.

    ResponderExcluir
  10. Consegui fazer no meu blog.
    Ficou lindo.
    http://i-teenbr.net.tc

    ResponderExcluir
  11. Adorei a segunda imagem! linda linda *-*
    beijos

    http://s2juuh.blogspot.com.br

    ResponderExcluir
  12. oii, vo comenta de novo porque eu tava brizando no meu comentário anterior e eu nem lembro o que eu escrevi, então se eu disso algo tipo "pudim com batata" ignora totalmente ta? hahaha
    adorei o tutorial e principalmente as imagens das folhinhas *-*
    beijos

    http://s2juuh.blogspot.com.br

    ResponderExcluir
  13. a imagem tá em cima das letras D: como faço pra arrumar?

    ResponderExcluir
  14. Anônimo, vc precisa ver o alinhamento da área do post.

    ResponderExcluir
  15. @Étila Priscila Só testei no template viagem, pode ser que o seu seja outro.

    ResponderExcluir
  16. Muito perfeito tuto!! Ajudou muito no lay que estou fazendo. Amo o seu blog e passo aqui sempre mas não dá tempo de comentar!!


    histargirl.blogspot.com

    ResponderExcluir
  17. Agora funcionou! Em outro blog....

    ResponderExcluir
  18. Tenho que te falar uma coisa !! Não sei se você tem outro blog, mas eu vi um mesmo post igual ao seu tudo !! Acho que estão te plagiando! Aqui está o site: http://mundo-teenss.blogspot.com.br/2012/05/como-colocar-imagem-no-fundo-das.html
    PS: E eu não estou conseguindo fazer no meu blog por que ??

    ResponderExcluir
  19. Eu nao achei os trechos e nao consegui fazer!

    ResponderExcluir
  20. Oie flor! Eu não achei o código no blog, fala que não contém :S
    Como faço então??
    Kisses

    ResponderExcluir
  21. Como faz para o fundo do post ficar igual ao seu? sem ter q mudar o tamanho da sidebar?

    ResponderExcluir
  22. Não consigo encontrar as partes de texto as quais você se refere... e a opção expandir widgets está desmarcada. Por favor reveja o tuturial para o novo blogger.

    ResponderExcluir
  23. Obg fofa me ajudou muito ficou lindo !

    ResponderExcluir
  24. Não estou conseguindo, não deu certo :c

    ResponderExcluir
  25. Blog legal, segui o meu? http://aninhaluyzacombr.blogspot.com.br/

    ResponderExcluir
  26. Muito legal! no meu nao deu muito certo, mais acredito que seja algo erro meu, mas é muito interessante!

    ResponderExcluir
  27. tem como colocar individualmente em uma postagem... em vez de colocar em todas.. eu queria colocar um fundo de imaguem somente em uma postagem.. é possivel?

    www.msnbiblicas.com.br

    ResponderExcluir
  28. I love you por esse post, ajudou MUITO hehehehehe

    ResponderExcluir

© Blog da Nah | Oficial - 2012. Todos os direitos reservados. Criado por: Natália Médice. Tecnologia do Blogger. imagem-logo