Imagem no topo da área da postagem - Atualizado

6 de nov. de 2011

Atualizado! Muita gente disse que não deu certo então mudei umas coisinhas, agora é pra funcionar então quem não conseguiu tente novamente. Caso não funcione me avise! Eu testei e deu certo, espero que funcione com vocês! Beijos.
Muita gente pediu e hoje trago pra vocês o tutorial de como por uma imagem no topo e/ou footer da área de postagens. Mas vou dizendo desde já, nada de copiar o Go Imagine hein? Sejam criativos e aproveitem o tutorial! Quero pedir desculpas por só estar postando tutoriais, mas a fada da inspiração não veio me visitar ultimamente. Eu ia postar outra coisa mas como muita gente pediu e eu não quis adiar mais. O resultado será semelhante ao do Go Imagine.

Clique em leia mais para ver o restante do tutorial.

Então, vá em Design > Editar HTML > De ctrl + F (ou F3) e digite na caixinha de busca o seguinte código:
.main-inner .column-center-outer {
Se você nunca editou essa parte do modelo, no seu HTML estará mais ou menos assim:
 .main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}
Apague a linha  _background-image: none; e no lugar coloque o seguinte código:
background-image: url(url da imagem);
background-position: center top;
background-repeat:no-repeat;
Obs: - Se quiser a imagem no footer da área de postagem troque top por bottom.

-Para a imagem se encaixar direitinho você deve saber a largura do seu blog e da sua coluna lateral (sidebar) isso você vê em Designer do modelo > Ajustar larguras. Então você pega a largura total do seu blog e subtrai a largura da sua sidebar. O resultado será a largura de sua área de postagem.
Por exemplo: 1020 (total) - 270 (sidebar) = 750. Esse deve ser a largura da sua imagem. Se por acaso não der você vai testando outros tamanhos até encaixar.

Vou deixar um exemplo de imagem para vocês terem como inspiração na hora de criar as suas. Ela tem 600px de largura, se sua área de postagem ter essa largura e você gostar pode usar a vontade. Ficou meia boca, mas é só pro exemplo.

Obs²: Na parte que estiver transparente (vazia) você deve por o background do seu blog, pois como é transparente vai aparecer o branco da área da postagem. Exemplo:




Por hoje era isso, espero que tenham gostado. Qualquer duvida é só comentar! Se vocês quiserem eu ensino a por imagem no topo e footer da sidebar também! É só comentar pedindo. Beijos, fiquem com Deus.

52 comentários:

  1. Nossa, parece que você leu meus pensamentos, eu tava muito precisando desse tuto!

    ResponderExcluir
  2. Flor, eu quero desse tuto na sidebar. Faz??

    ResponderExcluir
  3. muitoo bom o tuto!! to seguindoo seu blog divoo... retribue?
    http://swett-girls.blogspot.com

    ResponderExcluir
  4. Oiie, sou a dona do Um pouco do mundo teen, gostaria saber se você quer fazer uma parceria comigo, qualquer coisa é só entrar em contato bdfil.com@hotmail.com...

    ResponderExcluir
  5. o tutorial é ótimo. Antes eu tinha o mesmo efeito de nuvens no meu blog, mais eu fiz junto com o próprio cabeçalho.
    Bjuss
    www.garotascomplicada.com

    ResponderExcluir
  6. Amei, mas eu coloco no cabeçalho, aí não precisa colocar o fundo...
    Adorei seu blog e o novo lay! Eu acho que ja vim aqui, mas não me liguei muito. E esse design ficou bem mais bonito, sé e que me lembro do outro.
    Bjs.
    Girls On-Line

    ResponderExcluir
  7. Ai meu Deus...
    ajudou super!
    Muuuuuito obrigado :D

    Blog | Encomendas

    ResponderExcluir
  8. aaaain amei *-* tava precisando!
    traz ilustrações bem bonitas ou pngs pra gente ? pff *-*

    ResponderExcluir
  9. Nossa, como é simples...
    http://blog-sweetpoison.blogspot.com/

    ResponderExcluir
  10. Ótimo tutorial! Aqui, desculpa, mas será que você poderia fazer um layout pra mim? :$
    Beijos
    www.descobrindomundos.blogspot.com

    ResponderExcluir
  11. amore,o meu não funcionou :( me ajuda ?

    ResponderExcluir
  12. Parabéns pelo blog, adorei o tutorial super explicativo, eu quebrava a cabeça para fazer isso.
    Novo Post

    ResponderExcluir
  13. Afilia comigo?
    http://attitude-feminina.blogspot.com/

    ResponderExcluir
  14. eu até tentei mas não consegui :cc. mas valeu pela dica.

    tô seguindo seu blog, eu amei *-*.. se quiser dar uma passadinha no meu..
    www.umameninadevans.blogspot.com

    ResponderExcluir
  15. hi girl amei seu blog
    gostaria muito de ser sua afiliada
    http://lovefashionworld.blogspot.com/
    kamillados@ig.com.br
    kamilla master
    *-*

    ResponderExcluir
  16. Anni,obrigada pela ajuda nas bordas no blog.Eu conseguir.Na sexta eu vou reabrir o blog,ai vc olha ta?

    ResponderExcluir
  17. oi,adorei o seu blog super perfeitoo
    ja to seguindoo | SEGUE DE VOLTA POR FAVOR ??

    http://garotoonerd.blogspot.com

    ResponderExcluir
  18. Oi flore, tô seguindo, segue de volta ?
    190 bjs *------*
    http://mini-fofoquinhas.blogspot.com/

    ResponderExcluir
  19. Ótimo post... Aceita afiliação com o TS? :)

    Trashy Splash

    ResponderExcluir
  20. Eu não consegui!! Me ajuda?? Fiz tudinho e eu até iria usar a imagem que você fez e disse que era meia boca mas eu achei tãão bonitinha....

    PS: Você poderia disponibilizar cabeçalhos editáveis para usar no blog?

    Bjos

    http://queloucura-blog.blogspot.com

    ResponderExcluir
  21. Ah, mais uma coisinha, você aceita parceria/afiliação com meu blog? http://queloucura-blog.blogspot.com

    Meu email é: bibisandrini@gmail.com

    Outra coisa (Hoje eu to pidona, né?)

    Como que se faz aquelas imagens em quadradinhos para usar como Afiliados?

    ResponderExcluir
  22. Já está linkada no meu blog... Agora é só colocar aki... E obviamente, estou seguindo minha afiliada....

    ResponderExcluir
  23. Oi Flor, aqui é lindo!! Já estou seguindo!
    Aceita Parceria?
    Beijos, Giulia.
    www.batomdeframboesa.blogspot.com

    ResponderExcluir
  24. Adorei o blog, estou seguindo. Visita lá http://myalienromance.blogspot.com/

    Beijos

    ResponderExcluir
  25. Oi flor ? A-M-E-I o blog !!
    Aceita parceria ? Se aceitar comenta no meu blog dizendo ! ;)


    Jeito Moleca

    ResponderExcluir
  26. Aconteceu o seguinte, eu fiz o tutorial e até coloquei a imagem que você disponibilizou, mas na hora de vizualizar continuou normal, como se eu não tivesse modificado nada. Sobre a parceria, vou colocar seu banner na página de parceiros e vou fazer um gadget com o seu link, pode ser? Eu achei um fundo mais neutro pro blog, mas acho que não fou AQUELE fundo, mas dá pra segurar a barra até achar outro.

    ResponderExcluir
  27. Que fonte você usa no título das postagens e dos gadgets?

    ResponderExcluir
  28. Anny,
    novo post lá no PP, visita?
    http://pinkpimenta.blogspot.com/

    ResponderExcluir
  29. Heey, mtt bom aqui *-*. Seguindo flor, retribui ?.
    Beijos .

    http://leticiac04.blogspot.com/

    ResponderExcluir
  30. Adorei o tutorial flor , tava atras , participa ?
    http://perfeitinha-blog.blogspot.com/2011/11/miss-blog-2011.html

    ResponderExcluir
  31. adoreeeeei! posso usar o que voce criou bjos!
    www.happy-charllote.blogspot.com

    ResponderExcluir
  32. Não consegui fazer :/

    alguem me ajuda? faço tudo direitinho mas na hora q eu vou visualizar ñ aparesse nada :/

    http://casadophotoscape.blogspot.com/

    ResponderExcluir
  33. AAAh, agora sim eu consegui!! Obg pelo tuto, viu?

    ResponderExcluir
  34. Oi,obrigada por aceitar a parceria , já coloquei o button no meu blog :*

    ResponderExcluir
  35. Nossa ameeii esse tutorial!!
    Eu estava procurando ele faz tempo!!
    Ajudou muito!!!
    Já estou seguindo o seu blog!!
    Segue o meu também?
    Mil beijos,
    Biah

    beatriz-pg.blogspot.com

    ResponderExcluir
  36. Lindo teu blog anny parabéns
    brunamoveon.blogspot.com
    beijinhos

    ResponderExcluir
  37. AMEEI SEU BLOG! MTO LINDO!
    www.blogpinklollipop.blogspot.com

    ResponderExcluir
  38. Tem algo de errado cmg? Só acho: .main-inner .column-center-inner

    ResponderExcluir
  39. E como ponho com Travel?
    Bigada pela resposta :)

    ResponderExcluir
  40. Oi ameei o tuto! Mas eu gostaria de saber como que troca a fonte do titulo do post.É algum codigo em Html ? Por favor se puder fazer esse tuto? Grata!

    rainhafashionista.blogspot.com

    ResponderExcluir
  41. Gostei muito do seu blog! Seus posts são muito bem escritos e explicados, sem falar que o desing do seu blog é lindo! Parabéns!
    Beijos
    ourlifesanddreams.blogspot.com

    ResponderExcluir
  42. apois o fundo do meu nao fica transparente nem fooden**

    ResponderExcluir
  43. e depois de mudar o html, como poe a imageem? Não entendi ! Grata.

    ResponderExcluir
  44. Oi anny , eu amei seu blog , adoro seus tutoriais !
    Linda eu tentei fazer uma imagem mas nao conseguir sou uma zero a esquerda pra fazer seu tutorial funciona direitinho mas se voce disponibilizasse uma imagem pra gente usar facilitaria muito a nossa burrice kkk (aminhanocaso)
    Beijos

    ResponderExcluir
  45. mas a imagem tipo nuvem que nem a do print !
    bjus

    ResponderExcluir
  46. Amy dear, adorei! Fiz uns testes e vou editar/fazer uma nova e trocar depois. Mas a tua imagem tá linda, obrigada por compartilhar. bjs

    ResponderExcluir
  47. Eu não acho o .main-inner .column-center-outer { no meu Editar HTML :/ OQ EU FAÇO?

    ResponderExcluir
  48. Amei esse tutorial !

    ResponderExcluir
  49. Oi Alana.Bom você sabe fazer tipo um 2° cabeçalho no blog.Por exemplo:
    http://imageshack.com/a/img41/6743/fm4q.png

    ResponderExcluir
  50. Deu super certo, obrigada por postar o tutorial, me ajudou muito! Beijos :D
    http://www.leticiakoliveira.com/

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.