Como ajustar a largura das imagens automaticamente no Blogger

Blogger, Imagens
62
Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Um dos problemas da maioria dos usuários do Blogger é conseguir ajustar suas imagens ao espaço exato que têm na área de postagem. O padrões de tamanho das imagens do Blogger são confusos e não exibem medidas em pixel (px). Desse modo algumas imagens ficam grandes demais ou pequenas demais. Vamos ensinar aqui como deixar esse ajuste automático, mesmo para imagens no tamanho original que sejam mais largas que a área de publicação, ajustando-se automaticamente, sem perder a qualidade.

✅ Canal no Youtube | Inscreva-se AGORA ✅

Note que é difícil colocar uma imagem nos posts do seu Blog no Blogger de forma perfeitamente ajustada na largura, sem perder qualidade ou sem ficar desproporcional ao espaço que existe. As opções padrões do Blogger são poucas e não nos dão controle.

Quem deseja colocar uma imagem bem ajustada precisa editar e ajustar o arquivo num editor de fotos antes de colocar no blog. Mas nem todos sabem fazer isso e alguns podem querer aplicar a imagem em seu tamanho total, para quando o visitante clicar na imagem poder vê-la grande.

Quando colocamos uma imagem grande demais no Blogger, é isso o que acontece:

Mantive a opção “Tamanho original” marcada e a imagem nem cabe na tela do editor de postagens. Se publicar assim, não caberia também na largura do layout da área de postagem do meu Template.

Adicionando um pequeno trecho de CSS no código fonte do seu Template no Blogger, pode resolver esse problema e você conseguirá usar imagem sempre no tamanho original, ajustadas automaticamente.

  • Você pode ver funcionando mo Blog de Testes que fiz “Testando Blogger FB“. Verá que a imagem do Logo do Blogger está ajustada e se clicar nela, abrirá no tamanho original.

Para aplicar em seu blog esse recurso, abra o painel do Blogger, clique no menu “Modelo” e depois no botão “Editar HTML”. NA tela onde está exibido o código fonte do seu template, procure pela seguinte linha:

]]></b:skin>

Imediatamente ANTES dessa linha, cole o trecho que segue, sem modificar nada:

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Salve o modelo e faça o teste adicionando novas imagens bem mais largas que a área de postagem do seu blog para ver o resultado.

Isso também aplicará a mudança em imagens que já estava publicadas e usavam um espaço maior que a largura padrão do seu Blog.

Esta dica é um passo simples para que suas imagens abram perfeitamente para qualquer navegador e não distorça a experiência do usuário.

.

62 Comentários

  1. Ola Marcos, mais uma vez um excelente artigo…

    uma duvida… se aplicado esse CSS ainda sim eu terei a opção de colocar a imagen à direita ou esquerda, grande ou pequena ou todas ficarão ajustadas ao layout do blogger??

    Responder

  2. Ola Marcos.
    Tenho tido um problema com as imagens no blogger desde sempre. Não sei se você ja falou sobre isso:
    Sempre que posto uma imagem muito grande em termos de altura o blogger automaticamente diminui o tamanho da imagem. Mesmo quando coloco na opção tamanho original ou tamanho grande.

    Ou seja, se uma imagem tem, por exemplo 650 px de largura e mais de 2000 px de altura. Quando postada no blog ela diminui drásticamente o tamanho.
    Sabe me dizer por que isso acontece? e se tem como mudar?

    Sempre que a imagem é muito grando tenho que dividi-la em partes para manter o tamanho original….

    Responder

    • É preciso verificar se seu template não consta nenhum CSS para ajuste prévio. Além disso, algumas vezes o Blogger, para otimizar o carregamento da página, muda a qualidade da imagem para o blog abrir mais leve.
      Outro ponto é ver as configurações de upload das suas imagens no PicasaWeb, onde o Blogger armazena suas imagens. É comum que lá também seja feitos ajuste para ocupar menos espaço na sua conta.

      Responder

      • Estava tendo problemas com isso, parece que tinha alguma configuração antes dessa que impedia essa de ser “ativa”. Pra resolver o problema é só colocar essa configuração após “/Posts*” (ou algo parecido no seu blogger) e não logo antes de [[b:skin.
        Deu certo aqui (:

        Responder

  4. Boa dica Marcos Lemos!

    Esse trecho CSS que ajusta automaticamente as imagens do Blogger, ajusta mesmo, mas não ajusta apenas na área de postagem, ele redimensiona para o tamanho de 100% do espaço ocupado a imagem, imagens (img) que estejam por exemplo no sidebar lateral ou rodapé também, se tiver espaço.

    Então, é possível que as imagens colocadas nas mini aplicações HTML do Blogger também haja mudanças e consequentemente ao invés de ajustar vai desajustar. Como assim? Digo, se você especificou tamanhos para suas imagens, com a implementação desse código CSS no seu template, vai redimensionar a imagem para o tamanho original de acordo com o espaço que tiver no sidebar.

    O que isso significa? que seu blog vai ter as imagens ajustadas automaticamente nas postagens e também em algumas outras áreas do template. Eu implementei e analisei antes de comentar isso ok!

    Responder

  5. Otimo Artigo Marcos, sou usuario do blogger faz um tempinho acho otimo mas sem comparação ao wordpress, mas enfim

    Obrigado por compartilhar tal informação

    Sucesso !

    Responder

  8. Olá, Marcos! Se a imagem for pequena para a área de postagem, o ajuste automático a tornará grande o suficiente para ajustar-se à área de postagem? Instalei o código que você indicou em meu blogue, mas notei que imediatamente isto alterou a cor da página do blogue no celular.

    Responder

  10. Olá, Marcos!

    Estou escrevendo um novo layout que tem 728px de largura na área de postagem. Nunca consegui ajustar uma imagem neste largura, mesmo que imagem tenha 728px.

    A dúvida é se as outras imagens (inferiores a 728px) ficarão com o mesmo tamanho, caso aplique esse CSS.

    Abraço!

    Responder

    • As com tamanho inferior ou que não tenham medida pré definida pelo código, sim, serão ajustadas automaticamente.
      Aplique em seu Blog o CSS e veja o resultado. Se não agradar, é só retirar o código.

      Responder

  12. Estou tendando corrigir esse problema das fotos em um blog de cliente,mas não estou conseguindo e pior que isso eu não entendo o motivo, eu ja usei esse codigo em outros blogs e sempre deu certo, mas neste por algum motivo quando aberto no firefox ele nao corrige a largura da foto, nos outros navegadores funciona perfeito, primeira vez que vejo esse erro acontecer, você sabe o que pode estar errado ou onde eu estou errando? como exemplo segue o link de uma das paginas do blog, repare q somente no firefox ele apresenta o erro.
    [link suprimido]
    aguardo uma ajuda.
    Obrigado!

    Responder

  13. Marcos,

    Mais não é interessante compactar a imagem antes de postar no blog, para evitar que seu blog fique pesado?
    Porque eu acredito que mesmo que a imagem seja reduzida para visualização, o tamanho dela permanece o mesmo e vai interferir na quantidade de arquivos do blog, por exemplo um blog que tem muitas imagens.
    Ou estou errado?

    Responder

  16. MArcos se possivel me ajuda, fiz as alterações e funcionou normalmente, mais tive um problema. Meu site é um portal de Notícias e logo na tela inicial é dividido por categorias: Policia, Politica, Esporte ..” em todas essas categorias ficam imagens em Miniatura com Um titulo (igual ao G1), depois que coloquei esse Css todas as imagens até a do titulo ficaram com tamanho padrão que especifiquei, gostaria de colocar esse código apenas para a imagem da postagem, e gostaria de saber se é possível.

    Responder

  17. Olá Marcos, O meu blog é de viagens e precisava de redimensionar as imagens para o tamanho das postagens. Fiz este procedimento logo quando este artigo foi publicado, mas como entendi que este código iria alterar as imagens dos post anteriormente publicados, achei que tinha feito algo errado e delatei o código. Hoje experimentei novamente para as novas potagens e funcionou maravilhosamente. Obrigada por contribuir para a melhora do meu blog.

    Responder

  19. Oi Marcos, tudo bem?
    Estou sempre usando seus tutoriais com sucesso e quero te agradecer. Com relação a este artigo, a imagem do meu blog não fica centralizada, sobrando espaço à direita e não consigo alterar ( não tem a opção “center”) Se você puder me ajudar, ficarei grata.
    Um abraço,
    Zélia Dantas

    Responder

  20. Olá Amigo, eu to com um pequeno problema aqui eu fis esse metedor que você ensina ai mais ainda mesmo a sim to com o problema o problema é as imagens que fica nas postagens no incio a imagem que fica a mostra daquela postagem ela não fica centralizada e corta a metade da foto não tem um condigo ai que possar colocar pra centralizar elas não ? por que esse não funcionou…

    Responder

  22. Consegui achar o código (com muito custo rsrsrs)
    Colei conforme indicado e salvei o modelo.
    Mas fui testar e as fotos ainda não se ajustam ao tamanho da área de postagem…
    🙁

    Responder

  24. Alguém poderia me ajudar? Inseri o código e ele funcionou normalmente por alguns instantes, mas meia hora depois entrei no site e abri uma postagem com muitas fotos mas as fotos apareceram “reduzidas” como estava antes de colocar o código, o que pode ser? Segue o link que estou testando: [ Link suprimido ]

    Responder

      • Sim está no mesmo lugar citado na sua postagem caro Marcos. Como disse anteriormente, funcionou por alguns instantes e depois não funciono mais, estou enviando o Backup do Layout para que você possa analisar se estou fazendo errado e corrigir meu erro se possível. Seria de grande ajuda se pudesse testar aí o modelo para uma prova final. Hospedei no 4Shared neste link, por gentileza amigo, de uma olhada: http://www.4shared.com/document/U0dDLGN7ba/template-3603181485396110713.html

        Responder

        • Olá Adelaide, estou colocando as imagens sem alterar nada, o problema a mesma coisa o ocorre com fotos grandes ou pequenas.

          Não deveria ser necessário mudar para grande ou muito grande manualmente, o código é justamente para não ter que alterar foto por foto, testei em outros Layouts e também não deu certo, estou aguardando a análise do Marcos Lemos através do layout que mandei aqui no comentário anterior, pois é o modelo onde tenho a necessidade deste recurso aplicado as imagens

          Responder

  25. o blogger sempre diminui a qualidade das minhas edições e imagens, sabe alguma solução que possa me ajudar? ficarei imensamente grato, isso me tira o sono!

    Responder

    • .post-entry img {
      max-width: 90%;
      min-width: 90%;
      height: auto;
      width: auto\9; /* ie8 */
      }

      desta forma todas as imagens dentro de postagens ficam com 90% da largura. Lembrando que pode ajustar para outro tamanho desejado

      Responder

  26. Marcos o modelo que eu uso no meu blog já veio com esta opção ativada. Mas algumas fotos eu não gostaria que ocupassem a área total do post. Tem como eu mudar apenas aquelas que quero deixar menores que a área total?

    Responder

  28. Coloquei esse código no blogger mas existe um post que eu gostaria que a imagem ficasse em tamanho original. Como eu faço para diminuir a imagem apenas nesse post?

    Responder

  30. Procurei na lista o código ]]> que você referiu, mas o mesmo não existe. Não há nada que se inicie com colchetes. Esse código deveria constar em qualquer modelo do blogger?

    Responder

  36. Oi Marcos, boa noite! Fui tentar fazer um post com uma imagem de 600px de largura por 3400px de altura. Quando upei a imagem pro painel, ficou com uma largura inferior à 530px, sendo que fiquei impossibilitado de colocá-la no tamanho original que citei.

    Como posso resolver isso? Abraço.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.