Imagem com largura total da area de post

Irei ensinar a vocês a como deixar as imagens do post da mesma largura do mesmo. Vejam o exemplo.

Antes

Depois

Vamos aprender?

(clique em "Mais Informações")

1. Vá no painel do seu blog. Na barra lateral clique em "Modelo" e depois "Editar HTML"

2. Aperte em seu teclado "F3" e na barra de pesquisa procure por "]]></b:skin>"

3. Acima de "]]></b:skin>" cole o código abaixo:

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

Sua formatação deverá ficar da seguinte forma:

(clique na imagem para amplia-la)

 Altere apenas se necessário os valores destacado em negrito. No código eu coloquei 650px pois é esse o valor da largura da minha área de postagens, você deve alterar esse valor de acordo com a largura da área dos seus posts. 
Se não sabe ao exato a largura da sua área de posts vai testando até atingi-la.

Algumas observações

Quando for postar faça o upload das imagens normalmente. Depois de carregadas no editor da postagem, clique sobre as imagens e deixe-as com o seu tamanho original e alinhadas ao centro. "Mas pra quê fazer isso? Eu não posso alinhar à esquerda e deixá-las pequenas?" Não, você não pode! Se fizer isso, a imagem vai ficar como a do exemplo abaixo.

(clique na imagem para amplia-la)

Formate exatamente do modo como explica o tutorial para que as imagens fiquem iguais e em boa qualidade.

TODAS as imagens dos posts ficarão com essa formatação;

A formatação que você aplicar nas imagens no momento em que for fazer um post não irá funcionar. Por quê? Porque você já alterou a formatação das imagens no html e é somente ela que irá funcionar.

Imagens formatadas no editor de postagem ficarão deformadas; 

Isso se aplica em qualquer imagem. Se você gosta de colocar gifs, mini gifs e imagens assim nos seus posts fique sabendo que elas ficarão em péssima qualidade;

Os ícones dos seus posts também ficarão deformados, como mostra a imagem abaixo.

(clique na imagem para amplia-la)

O tutorial foi feito pelo site Camila's Designs e adaptado pelo Sugoi Tutoriais. Se reblogar dê créditos aos dois sites!

Qualquer dúvida não exite em comentar!