Largura máxima nas imagens do blog

11/07/2012

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.

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