Largura máxima nas imagens do blog

Quando trocamos o layout do blog, ás vezes as imagens ficam "pulando" da página, devido ao novo tamanho da área da postagem. Hoje, vou ensinar a colocar uma largura máxima nas imagens, evitando que isso aconteça:

Tumblr_ly4wzz8k0w1qe49wpo1_500_large_large_large

1) Vá no Painel do Blogger > Modelo > Editar HTML > Ctrl + F e procure por:

]]></b:skin>

2) Cole o código abaixo antes dele:

.post img, table.tr-caption-container {
padding:4px;
max-width:480px; }

3) Substitua o número destacado em vermelho pela largura da área da postagem. Recomendo colocar 40px menor.
Comentários
27 Comentários

27 comentários

  1. Otima dica Stefani!sempre surgi esta dúvida,pois sou pessima em configurações.
    bjocas
    http://fashionlmoda.blogspot.com.br/

    ResponderExcluir
  2. No meu nunca aconteceu isso, quando mudo o layout, não mudo a fonte nem o tamanho da área da postagem, mas adorei o tutorial, super útil pra quem vive mudando o layout, rs.
    Beijos, fashionwithstyle.tk

    ResponderExcluir
  3. Oi linda.eu ja uso isso..é otimo
    beijos e boa semana

    www.cosasde-ladydiva.com

    ResponderExcluir
  4. Vou usar lá no meu blog. Obrigada pelo tutorial ;)

    Beijos,
    http://paraisodemenina.blogspot.com/

    ResponderExcluir
  5. Nossa que legal, vou salvar isso pra fazer sempre :D

    http://help-adolecentro.blogspot.com.br/

    ResponderExcluir
  6. Hmm interessante :D Não sabia desse código hahahaha

    Beijos :*
    http://leticiac04.blogspot.com

    ResponderExcluir
  7. Amei o blog, muito lindo..
    Estou te seguindo, me segue também.

    pimentaavermelha.blogspot.com

    ResponderExcluir
  8. Oi! Já conhecia a dica, muito boa, deixa o blog mais organizado.

    Beijos!
    http://comqualestilo.blogspot.com

    ResponderExcluir
  9. Obrigada pelo Comentário! e esse tutorial é muito facil e util!

    dei like no blog, bjs
    http://theteensteam.blogspot.com/

    ResponderExcluir
  10. Muito bom esse tutorial! Quando a imagem fica pulando da página da aquela sensação de desorganização... Fica feio mesmo :(
    Xiricutico.blogspot.com

    ResponderExcluir
  11. Adorei o tutorial, flor! É muito útil,e é bom que as imagens não fiquem desalinhadas como você disse e deixa o blog organizado. Arrasou no post *-*
    Beijos, http://momamoraes.blogspot.com

    ResponderExcluir
  12. Adorei.. Bem explicadinho né!?
    Valeu!!
    Ótima semana,
    Big bj ;*
    http://angelpoubel.blogspot.com.br

    ResponderExcluir
  13. :).Convido você e suas leitoras para dar uma passadinha e seguir o meu blog o Mudando de Assunto, ele é bem legal e diferente http://comosefossefacil.blogspot.com.br/ vocês vão gostar Bjs.

    ResponderExcluir
  14. Olá, adorei o seu blog, vem participar do sorteio para BLOGUEIRAS, http://makemaniaecia.blogspot.com.br/2012/07/atencao-blogueirosas.html conto com a sua visita !
    Beijos e Sucesso !

    ResponderExcluir
  15. Ótima diica, vou tentar fazer isso no blog, eu acho uó as imagens pulando pra sidebar rsrsrs
    Seguiindo aaq, beijão ♥

    plush-girl.blogspot.com

    ResponderExcluir
  16. Amei, não sabia como fazer não creio que vou usar :))
    s2hay.blogspot.com

    ResponderExcluir
  17. Olá, adorei o blog e já estou seguindo me segue tbm ?
    beijoos e fique com deus
    www.rebecacarolinee.blogspot.com

    ResponderExcluir
  18. Olá, adorei o blog e já estou seguindo me segue tbm ?
    beijoos e fique com deus
    www.rebecacarolinee.blogspot.com

    ResponderExcluir
  19. Ótimo tutorial. É muito ruim quando as imagens ficam pulando da área de post, então esse tutorial será muito útil.
    http://i-teenbr.net.tc

    ResponderExcluir
  20. obrigada pelo coment lá no meu blog :D
    Gostei bastante do tuto realmente muito útil estou seguindo poderia me seguir ? bjs'

    ilovemecarol.blogspot.com

    ResponderExcluir
  21. Sté, ótima dica... pq fica tão feio qndo a imagem fica maior do que deveria né?!!

    Beijos

    nandapezzi.blogspot.com

    ResponderExcluir
  22. Obrigado pelo tutorial, isto é incrível mesmo!! (^^)

    A maturidade.
    Acesso Permitido.
    A superioridade, o orgulho.. Soberba!
    Projeto Discipulando.

    ResponderExcluir
  23. Muito obrigado, graças ao tutorial, o blogue evoluiu mais um pouco *.*

    Beijinhos.!

    http://luanasnecessites.blogspot.pt/

    ResponderExcluir
  24. Muito! Muito obrigada pelos tutos! =D

    ResponderExcluir
  25. No meu não funcionou '-' Eu troco, salvo mas não altera nada... pode me ajudar?


    Blog: http://antigosdiarios.blogspot.com.br/
    Page:https://www.facebook.com/antigosdiarios?fref=ts

    ResponderExcluir
    Respostas
    1. Você não colocou um número muito alto? Tenta diminuir um pouco o número, se não der certo talvez seja por causa de outro código que você tenha no mesmo lugar.

      Excluir