Deixe as imagens do post com tamanho único

18.6.12

Tumblr_m4unilchrd1qd7p3ro1_400_large

Pelo título do post já devem ter percebido que é um tutorial, né?  Hoje nós vamos aprender a deixar todas as imagens do post com um tamanho único, assim quando uma imagem for maior que o campo das postagens ela não ficará para fora. Legal né?? O tutorial é curtinho e muito útil vale a pena ler! Vamos conferir juntos? 


1. Painel do blogger >> mais opções >> editar html >> prosseguir;

2. Tecle F3 ou Ctrl+F e busque por body {

3. Copie o código abaixo e cole acima da tag que você acabou de buscar;

Deverá ficar assim no seu html 
.post img {
max-width: 600px; /* Tamanho das imagens */
height: auto;
}


Onde está escrito 600px de rosa será o tamanho das imagens. Lembre-se de saber a largura da sua área de postagem. Para isso, basta você subtrair o tamanho total do seu blog pelo tamanho da barra lateral. O resultado será o tamanho da sua area de postagem. Ex:

 990 px - largura total
-310 px - barra lateral
----------
      680  - o resultado é o tamanho da sua area de postagem

4. Visualize. Se ficou tudo ok salve.

Veja Também:

45 Recados

  1. Também fiz o selinho, postei hoje *o*
    Amore, quando quero colocar a imagem de um tamnho só, coloco tudo como 'muito grande' q


    http://vitaminadepimenta.blogspot.com.br/

    ResponderExcluir
  2. Ótima dica,gostei :D

    http://dezapaixao.blogspot.com.br/

    ResponderExcluir
  3. Anônimo18/6/12

    Achei muito interresante *-* concerteza eu tenho que fazer isso ^^ obrigada pelo tuturial

    ResponderExcluir
  4. Super legal esse tutorial adorei vai ser muito util pra mim pois estava procurando esse tuto faz um maior tempão, Tu és foooo--....da mesmo hein..1

    http://debysabetudo.blogspot.com.br/

    ResponderExcluir
  5. super bacana o tutorial muittto boom messsmo.. vai ajudar noos toddoooss..
    n

    http://receitadakaka.blogspot.com/

    ResponderExcluir
  6. q tudo esse post! adorei o tuto e a tag bem legal!
    bjs
    http://avidademalu.blogspot.com/ http://ohmygood-omg.blogspot.com.br/

    ResponderExcluir
  7. O tutorial é ótimo. Fica tudo alinhado e organizado (:

    Um beijo, http://onthefame.blogspot.com/

    ResponderExcluir
  8. Post ótimo! ^^
    Odeio quando a imagem passa da barra de postagem. ><
    Assim é bem melhor.

    BJUKU!!

    ResponderExcluir
  9. Adorei esse tuto !

    Kisses :*
    http://sweet-flower-laura.blogspot.com.br/
    Volte Sempre !!

    ResponderExcluir
  10. Olá querida... amei o Tutorial, mas não deu certo no meu blog não...

    http://laudypoemas.blogspot.com/

    ResponderExcluir
  11. Laudy

    As vezes não deu certo porque as imagens que tem lá já estão adequadas a area do post. Tente colocar uma imagem que ultrapasse o limite do campo de postagem e repita o tutorial : )

    Caso não dê certo, comunique comigo!

    ResponderExcluir
  12. Nossa que tutorial mais interessante, eu fico com muitaa raiva quando a imagem fica fora do lugar!!
    Muito obrigada pela dica!!

    http://www.hamster-doce-hamster.blogspot.com.br/

    ResponderExcluir
  13. Tem muita gente querendo aprender como faz isso, era bom vc deixar no seu para os leitores verem que deu certo ^^

    ResponderExcluir
  14. Adorei o tutorial, bem útil.
    Obrigada pela visita, volte sempre (:

    Bezoos Nhaac :33
    www.mundoo-cute.blogspot.com

    ResponderExcluir
  15. muito bom o tutorial
    www.portalft.com

    ResponderExcluir
  16. adorei mesmoo*--*
    as dicas são mtoo boas ' ja to seguindo seu blog flor =)
    tenha uma otima semana '
    Lay
    http://www.layanasouza.com

    ResponderExcluir
  17. Olá...
    ♥ Ótimo tutorial, é sempre bom deixar o blog super bem oraganizadinho ;D adorei a tag.tenha um bom dia.

    Pinkiss
    by; Renata Princess ♥

    http://my-life-pink-s2.blogspot.com

    ResponderExcluir
  18. Oii linda. Bom dia!
    Vamos fazer parceria né?
    Pega meu link lá. Onde fica o seu?
    Vai ser muito legal.
    Aguardo.
    Beijos!

    ResponderExcluir
  19. Gostei das respostas (:

    ontendency.blogspot.com

    ResponderExcluir
  20. já conhecia o tutorial. Amei a dica

    http://blogclubeteen.blogspot.com.br/

    ResponderExcluir
  21. ih..to precisando aprender mesmo..passo muita raiva com isso..
    Quero te convidar para participar do sorteio q tá rolando lá no blog!
    http://poquimdemim.blogspot.com.br/2012/06/sorteioquer-ganhar-um-perfume.html

    Passa lá dps! =)

    ResponderExcluir
  22. Ownnnnnnnt eu AMEI o cabeçalho!!!!!!!!! ta lindo!!!!!!!!
    Muito obrigada mesmoo!!!!!!!!!!!!!!!!
    to indo coloca AGORA!!!

    Bjs

    lolalinda123.blogspot.com

    ResponderExcluir
  23. Como sempre, arrasando nos tutoriais né? Adorei suas respostas na tag. Também odeio falsidade, estou aprendendo a dizer não e gostaria demais de poder imortalizar quem eu amo!

    Beijos.

    Kika/Acessarte.

    www.blogacessarte.blogspot.com
    www.acessarte.com (loja virtual)

    ResponderExcluir
  24. Achei o tuto que tanto procurava,mto obrigada,vou usar no próximo lay,flor amei seu blog,mto perfeitão,to com inveja,kkk brinks,seguindo (como não seguir ?!) espero ansiosamente sua visitinha em meu blog e quem sabe até uma nova seguidora ? kissus!
    http://blog-garotaambulante.blogspot.com.br/

    ResponderExcluir
  25. Anônimo19/6/12

    Eu já conhecia esse tuto! Muito útil, né?
    Beijinhos, http://momamoraes.blogspot.com

    ResponderExcluir
  26. Oww Yasmin que bom qe gostou : )

    -----

    Que bom que gostou Lorena =)

    ResponderExcluir
  27. ooi flor ! Obrigada por comentar e seguir meu blog ^^ Fico feliz que tenha gostado. Pena que disse que só participaria do concurso se fosse uma etapa só . Bom mesmo assim agradeço o carinho *-*
    beijiinhos
    ---> www.clarinha-piink.blogspot.com

    ResponderExcluir
  28. O tutu é otimo! e gostei da tag foi bom conhecer mais sobre você!
    http://kelly-club.blogspot.com.br

    ResponderExcluir
  29. Anônimo20/6/12

    Ja sabia essa rsrs :D
    *---------*


    BEIJUXX
    http://ianapaulinhaaaa.blogspot.com.br/

    ResponderExcluir
  30. Ei, que ótimo tutorial *-*
    De nada flor :D Vi que temos coisas em comum não? Sobre os grupos de escola, e com certeza sobre o Show do Nirvana s2
    Um beijo!
    Amanda - Doce Diário

    ResponderExcluir
  31. super útil o tuto :)
    e se eu pudesse voltar no tempo, tbm queria ter ido no show do Nirvana haha'
    bjs
    www.crazyggirls.tk

    ResponderExcluir
  32. Hoy lindinha!
    Amo seu blog de paixão!
    Seguindo ,se puder retribuir;
    beijinhos
    http://day-princess.blogspot.com.br/

    ResponderExcluir
  33. Gessi ótimo tutorial, acho que vai ajudar muito!! E realmente me identifiquei com muitas das coisas que você escreveu na tag, por exemplo não sou muito fã de revista teen e adoraria ir em um show do nirvana se pudesse voltar no tempo <3

    http://lehdadicas.blogspot.com

    ResponderExcluir
  34. Nunca tinha visto esse tuto, é ótimo :)

    Seguindo aqui, viu? Adoraria te ver lá no meu blog. E se gostar não esqueça de seguir ><

    Beijos ♥
    Blog Refugio Teen - Fan page do blog, curte ;)

    ResponderExcluir
  35. Adorei o tutorial!SEmpre fico perdida com html e tals.Busco o caminho mais facil.rs.Adorei!
    Bjs!

    ResponderExcluir
  36. Que tutorial útil, ás vezes da muita raiva quando se acha a imagem certa para o post,mas ela fica maior que a área do post e pula para fora.
    http://i-teenbr.net.tc

    ResponderExcluir
  37. Achei muito interessante a dica, ajuda bastante agente que tem blog. Gostei do questionário *-* estou seguindo. Se puder me dar uma mãozinha agradeço >< http://encomendascomcathe.blogspot.com.br/

    ResponderExcluir
  38. Ah, adorei essa dica hein. Se bem que quando eu coloco alguma foto, eu escolho a opção Muito Grande e fica boa também ^^
    Adoro essas Tags. Bom que a gente pode conhecer melhor a dona do bloguito!
    Achei seu blog através do da Kika (AcessArt) e já estou seguindo. Adoraria que me seguisse tb ^^
    BEIJO!

    ResponderExcluir
  39. Realmente é o que eu precisava. O blog fica mais organizado com as imagens do mesmo tamanho.
    Muito obrigada.

    bjbj

    ResponderExcluir
  40. Oi! Gosto do muito do seu blog e, justamente por isso, vou tirar uma dúvida. Eu tenho esse código no meu lay e funciona muito bem, obrigada ahaha, mas em uma das minhas páginas eu coloquei dois gifs e eles ficaram do tamanho do post. É. haha
    Teria como invalidar o código para somente algumas imagens?
    Obrigada desde já! :)

    ResponderExcluir
  41. Perfeito, simples e objetivo, obrigado, era exatamente o que estava procurando e precisando...

    ResponderExcluir
  42. Anônimo28/3/17

    Deu muito certo, obrigado.

    garotainsubstituivel.blogspot.com.br

    ResponderExcluir

Deixe aqui sua opinião a respeito do post ou do blog ♥
Você pode comentar através do Facebook também! É rápido, simples e prático!