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 :)
Super útil! Vocês são uns queridos!
ResponderEliminarUma bela ajuda :D*
ResponderEliminarBem, isto é super útil! Mas tenho uma questão!
ResponderEliminarAs 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! :) **
Olá Marta ;)
EliminarO 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*
Muito útil!! E como podemos ter o corpo de texto da largura das imagens?
ResponderEliminarObg!!
É exactamente o que explicamos em cima, só tens de mudar para a medida da largura o teu texto ;)
Eliminarbeijinhos
Óptimo post :) Obrigada.
ResponderEliminarA 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/
Foi muito útil, sim. Eu faço (fazia) de outra forma, mas teria que ser a cada fotografia que colocava.
ResponderEliminarMuito obrigada
Cláudia
Já fiz! Mas deparei-me com um problema :-( O logotipo com link para o Pinterest ficou gigantesco à direita do écran :-(
EliminarAi ai!!
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.
Eliminarbeijinhos*
Esta informação é deveras útil! Obrigada pessoal! (^.^) ... E eu que andava com um trabalhão a redimensionar todas as minhas imagens!
ResponderEliminaryey :D
EliminarMuito útil, eu fazia o redimensionamento em programa de edição. Obrigado
ResponderEliminarobrigado rute ;)
Eliminartambém gostava de saber a resposta à pergunta da sofia, se puderem responder :)
ResponderEliminarestá respondido lá em cima ;)
EliminarEu tentei usar o mesmo código, mas não funciona, será que estou a inserir no local errado? Aonde se deve inserir? Obrigada, bjnhs
Eliminaraiii mereciam um abraço! deu-me um jeitão :D
ResponderEliminarum abraço de volta Inês :)
EliminarComo é que faço para anular ? coloquei so que no blog nao ficou muito bom :/
ResponderEliminarÉ só apagares o código do css ;)
EliminarMaravilhoso, seria muito bom um post de como ajustar as imagens ao blog , agradeceria muito : 3
ResponderEliminarObrigada! Me ajudou muito.
ResponderEliminarOlá, fiquei com uma dúvida.
ResponderEliminarQuando utilizo o código altera-me o tamanho de todas as imagens do blogue, como posso resolver ?
Beijinhos, Joana
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 ?
ResponderEliminarMuito Obrigada,
Beijinhos
sou obrigado a comentar... sempre procurei isso. sou contra usar template e finalmente um tutorial que não seja de 2013. Obrigado.
ResponderEliminarAjudou imenso!
ResponderEliminarPena só ter visto agora mas mais vale tarde do que nunca ;)
bjs
Cantinho da tequis
.post-body img {
ResponderEliminarwidth: 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
}
obrigada Edu!
Eliminaróptima dica :)
Boa noite!
ResponderEliminarEu 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!
Super obrigada! Estive tanto tempo à procura e não encontrava nada do que queria exatamente! Obrigada! kiss^^
ResponderEliminarhttp://somerandomthoughtsandthings.blogspot.com/
Super obrigada! Estive tanto tempo à procura e não encontrava nada do que queria exatamente! Obrigada! kiss^^
ResponderEliminarhttp://somerandomthoughtsandthings.blogspot.com/
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?
ResponderEliminarComo faço para alinhar a largura dos textos dos posts à largura das imagens?
ResponderEliminarComo você tem aqui no blog?
Não consigo descobrir :-(
mariadeferro.blogspot.pt
O meu não funcionou assim! Tive de colocar mesmo na parte do HTML, dentro das classes de CSS.
ResponderEliminar