Subscreva

Cum sociis natoque penatibus et magnis
[contact-form-7 id="1210" html_class="cf7_custom_style_1"]

Subscribe elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae eleifend ac, enim. Aenean vulputate eleifend tellus.

[contact-form-7 id="984" html_class="cf7_custom_style_1"]

Como ter todas as imagens da mesma largura, no blogger

Hoje o post é para ajudar todos aqueles que apesar de não serem designers são muito perfeccionistas no que toca ao layout do blog. Sim, aqueles que gostam de ver as imagens todas com a mesma largura, sem que para isso tenham de passar num programa de edição de imagem para fazer esse trabalho. Neste post vão perceber como é fácil colocar as imagens todas com a mesma largura, no blogger.

.post-body img {
width: 700px;
height: auto;
padding:0px;

}

Com este código que podem ver em cima, estão a dizer ao blogger que querem que as vossas imagens tenham a largura de 700px (este valor varia consoante a largura que vocês quiserem definir, o que importa é mantê-la depois deste momento de decisão, para sermos coerentes), a altura vai ser automática, o que significa que será proporcional à largura, e desta forma não terão imagens distorcidas. O padding vai ser de 0px, ou seja, não terão margens criadas por defeito entre o início do post e a imagem.
Este código será colado na janela de CSS que já vos foi mostrada aqui noutros posts, que está no Designer de modelos, opções avançadas. Temos duas opções distintas:
Uma das hipóteses é colocar o código onde definimos que a largura é 700px, dessa forma todas as imagens a vão assumir.
.post-body img {
width: 700px;
height: auto;
padding:0px;
}
Outra será a de dizerem que a largura máxima é de 700px, significa que poderão existir imagens mais pequenas mas nunca maiores, o que dá jeito se a maior parte das imagens usadas por vocês não forem da vossa autoria e forem retiradas da internet (não se esqueçam dos créditos), podem ser demasiado pequenas e aumentadas ficarem sem qualidade. Nesse caso vamos optar por manter a largura delas e dizer apenas que não queremos que as imagens ultrapassem uma determinada largura.
.post-body img {
max-width: 700px;
height: auto;
padding:0px;
}
Esperamos que tenham gostado e que esta dica vos dê muito jeito 🙂

Comments

  • Super útil! Vocês são uns queridos!

    Janeiro 14, 2015
  • Uma bela ajuda :D*

    Janeiro 14, 2015
  • Bem, isto é super útil! Mas tenho uma questão!
    As fotos que tiramos com as máquinas fotográficas devem ser muito pesadas para as carregarmos directamente no blog sem as diminuirmos de tamanho, ou não? Se fizermos isso não vamos sobrecarregar o blog e as imagens não vão demorar a aparecer?

    Obrigada! 🙂 **

    Janeiro 14, 2015
    • Olá Marta 😉

      O nosso conselho é sempre a diminuir um pouco o tamanho das fotos mas como elas já vão ser reduzidas pelo blogger, não é suposto demorar muito tempo a abrir 😉

      beijinhos*

      Fevereiro 12, 2015
  • Muito útil!! E como podemos ter o corpo de texto da largura das imagens?
    Obg!!

    Janeiro 14, 2015
    • É exactamente o que explicamos em cima, só tens de mudar para a medida da largura o teu texto 😉

      beijinhos

      Fevereiro 12, 2015
  • Óptimo post 🙂 Obrigada.
    A Sofia fez uma boa pergunta… também gostava de saber como deixar o texto da mesma medida das imagens.

    Kiss Kiss
    http://borboletasnolhar.blogspot.pt/

    Janeiro 15, 2015
  • Foi muito útil, sim. Eu faço (fazia) de outra forma, mas teria que ser a cada fotografia que colocava.
    Muito obrigada
    Cláudia

    Janeiro 15, 2015
    • Já fiz! Mas deparei-me com um problema 🙁 O logotipo com link para o Pinterest ficou gigantesco à direita do écran 🙁
      Ai ai!!

      Janeiro 15, 2015
    • tens de utilizar a dica do max-width, se não tudo vai ficar enorme 🙂 assim só as que são maiores é que são reduzidas.

      beijinhos*

      Fevereiro 12, 2015
  • Esta informação é deveras útil! Obrigada pessoal! (^.^) … E eu que andava com um trabalhão a redimensionar todas as minhas imagens!

    Janeiro 15, 2015
  • Muito útil, eu fazia o redimensionamento em programa de edição. Obrigado

    Janeiro 17, 2015
  • também gostava de saber a resposta à pergunta da sofia, se puderem responder 🙂

    Janeiro 17, 2015
    • está respondido lá em cima 😉

      Fevereiro 12, 2015
    • Eu tentei usar o mesmo código, mas não funciona, será que estou a inserir no local errado? Aonde se deve inserir? Obrigada, bjnhs

      Agosto 26, 2016
  • aiii mereciam um abraço! deu-me um jeitão 😀

    Janeiro 18, 2015
  • Como é que faço para anular ? coloquei so que no blog nao ficou muito bom :/

    Fevereiro 8, 2015
    • É só apagares o código do css 😉

      Fevereiro 12, 2015
  • Maravilhoso, seria muito bom um post de como ajustar as imagens ao blog , agradeceria muito : 3

    Fevereiro 12, 2015
  • Obrigada! Me ajudou muito.

    Março 11, 2015
  • Olá, fiquei com uma dúvida.
    Quando utilizo o código altera-me o tamanho de todas as imagens do blogue, como posso resolver ?
    Beijinhos, Joana

    Junho 2, 2015
  • Olá 😉 tenho este código no meu blogue e em pc's funciona perfeitinho, mas em telemóveis algumas imagens ficam muito grandes. Há alguma forma de corrigir isto ?

    Muito Obrigada,

    Beijinhos

    Junho 4, 2015
  • sou obrigado a comentar… sempre procurei isso. sou contra usar template e finalmente um tutorial que não seja de 2013. Obrigado.

    Outubro 14, 2015
  • Ajudou imenso!
    Pena só ter visto agora mas mais vale tarde do que nunca 😉
    bjs
    Cantinho da tequis

    Outubro 17, 2015
  • .post-body img {
    width: 710px;
    height: auto;
    padding: 0px;
    margin: 0 -30px 0 -30px; Acrescentem esta linha e mude os valores para ficar corretamente alinhado ao seu texto! DICA EXTRA
    }

    Outubro 30, 2015
  • Boa noite!

    Eu experimentei esta diga no meu blog pois um dos posts aparecia automaticamente alinhado com as de cima, mas encolheu na altura, e continua igual. Têm alguma ideia do que eu possa fazer?

    Obrigada!

    Janeiro 9, 2016
  • Super obrigada! Estive tanto tempo à procura e não encontrava nada do que queria exatamente! Obrigada! kiss^^

    http://somerandomthoughtsandthings.blogspot.com/

    Janeiro 25, 2016
  • Super obrigada! Estive tanto tempo à procura e não encontrava nada do que queria exatamente! Obrigada! kiss^^

    http://somerandomthoughtsandthings.blogspot.com/

    Janeiro 25, 2016
  • Uma questão..as imagens do meu blog aparecem todas desfocadas no feed do bloglovin e elas têm sempre boa qualidade no blog. Alguma explicação que conheçam?

    Maio 21, 2016
  • Como faço para alinhar a largura dos textos dos posts à largura das imagens?
    Como você tem aqui no blog?
    Não consigo descobrir 🙁
    mariadeferro.blogspot.pt

    Agosto 26, 2016
  • O meu não funcionou assim! Tive de colocar mesmo na parte do HTML, dentro das classes de CSS.

    Novembro 18, 2016
  • Blogue Ela e Ele, Ele e Ela

    Reply

    Nós colocámos a primeira opção, mas temos assinaturas em cada mensagem (já que somos dois a escrever no blogue. Assim as assinaturas ficam também à medida do texto. Como é que fazemos para que essas imagens de assinatura não sejam contabilizadas para o efeito?

    Abril 12, 2017
  • Gilmar

    Reply

    é uma pena que no meu não funcionou! eu acho chato diminuir a imagem no Paint e postar em tamanho original, pois perde a qualidade, eu queria que as minhas imagem não ultrapassassem de 520px;

    Outubro 1, 2017
  • identificate

    Reply

    Muito útil! Adorei!

    Outubro 17, 2017
  • Dan Souza

    Reply

    Obrigada pela ajuda!
    Consegui arrumar o meu blog:

    https://www.desencaixotandoavida.com.br/

    As imagens tinham tamanhos irregulares no ecrã do telemóvel.

    Junho 8, 2018

Leave a comment

Este site utiliza o Akismet para reduzir spam. Fica a saber como são processados os dados dos comentários.