Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

2/09/2013

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!

5 comentários:

  1. Adorei esse tutorial era tudo oque eu procurava, vlw mesmo!!

    ResponderExcluir
  2. Pamela12.2.13

    Funcionada parar Wordpress também?

    ResponderExcluir
  3. eu postei como se faz no wordpress

    ResponderExcluir
  4. obrigada! Foi o unico site que solucionou meu problema <3 sucesso!

    ResponderExcluir
  5. Anônimo22.2.16

    Obriada,ajudou bastante viu?!

    ResponderExcluir

Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.