02/11/2016

Tutorial: Como deixar as imagens do post com tamanho único


Vocês já perceberam que alguns blogs tem imagens de um único tamanho em todas as postagens? Sempre achei super clean e quando outras blogueiras vinham falar do meu blog, sempre falavam para colocar as imagens de um único tamanho, pois organizaria mais. Tentava fazer, mas não consegui pelo fato das imagens terem o tamanho irregular, ou seja, serem uma maior que as outras.

Então resolvi pesquisar para saber o que poderia fazer para organizar e ver onde estava errando. Foi ai que encontrei um tutorial e descobri que temos que mexer no Código HTML (não se assustem, é super fácil). 


Vamos a umas dicas básicas:

1. Para saber a área do post: Vá em MODELO -> PERSONALIZAR -> AJUSTAR LARGURAS e subtraia o valor de "Todo o blog" por "barra lateral". O que sobrar é sua área do post.
2. Para que sua imagem fique linda e com a largura total do post, você precisa deixa-la centralizada e com seu tamanho original.
3. Lembre-se que todas as imagens ficarão com a largura que você colocar (gifs, mini-gifs, ícones).


Vamos ao tutorial:

1. Vá em MODELO -> EDITAR HTML e pesquise (clique F3 ou Ctrl+F) por:

/* Posts----------------------------------------------- */

2.  Abaixo dele, cole:

.post img{
border: 0; /* borda na imagem em zero, não altere */
margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não altere */
padding: 0; /* espaço entre margens e imagem, não altere */
width: 540px; /* tamanho máximo da imagem, pode e deve ser alterado */
}


Mude a parte selecionada para o tamanho que quer todas as suas imagens. Antes de salvar, confira para ver se tudo ficou certinho.


OBS: Você pode conferir no meu blog como estão as imagens antes de fazer no seu.


(Informações retiradas do Blog da Nah.)

Acompanhe o blog nas Redes Sociais: FACEBOOK | INSTAGRAM | YOUTUBE | TWITTER.

10 comentários:

  1. Ótimo post! Eu estava procurando por esse tutorial, mas não achei nenhum que me agradasse, então esse aqui chegou na hora certa. Ele funcionou direitinho, mas não serve para mim! Talvez eu até use no futuro, mas agora não irei usar. Sei que irá ajudar muitas pessoas.

    Bjuss

    http://umapessoatagarela.blogspot.com.br/

    ResponderExcluir
  2. Sou a chata das imagens certinhas... Mas. Alterava foto por foto, desse jeito é bem mais fácil.

    Beijoks
    Www.atesemsalto.com

    ResponderExcluir
  3. Ótimo, esse lance de organização deixa o Blog com uma cara bastante clean e é o que está em alta, suas dicas embora básicas, foram muito úteis, vou agora dar um pulinho la no blog e dar uma organizada bjs

    http://estanteparalela.blogspot.com.br/?m=1

    ResponderExcluir
  4. eu queria muito fazer isso no blog, mas o wordpress é tão complicadinho :(

    https://melissandosite.wordpress.com

    ResponderExcluir
  5. Nunca mais serei a mesma depois disso XD

    ResponderExcluir