Olá pessoal! Hoje vim com um tutorial bem legal aliás todos os tutoriais daqui são legais, que é como deixar as imagens dos posts da largura adequada para a largura da área de post do seu blog automaticamente. Tipo aquela imagem que você coloca no seu blog que ultrapassa os limites, deixando o blog feio e todo desorganizado e sem a necessidade de ficar cortando, diminuindo a imagem. Nesse post irei ensinar duas maneiras de de ajustar a largura da imagem automaticamente. Vamos lá.
Para terem uma melhor noção do que estou falando clique aqui para ver a imagem.
Quando for fazer o post e colocar, deixa-a do tamanho original.
Essa com certeza é a maneira mais simples. Pois só colocando o código a imagem ficar de um tamanho bom sem a necessidade de fazer outras coisas.
Primeiro vá em Modelo>> Editar HTML>> Clique dentro da caixa de códigos e aperte em Ctrl+F e pesquise por:
]]></b:skin>
Acima dessa tag cole o seguinte código:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Pronto só com esse código a imagem vai ficar perfeitamente do tamanho adequado.
Crédito: Ferramentas blog
Essa segunda maneira exige um pouca mais, pois além dos códigos vamos utilizar editores de imagem. Mas ao contrário da 1ª maneira essa a gente pode deixar a imagem do tamanho que quisermos.
A primeira coisa a se fazer é tirar um print do seu blog.
(Pra tirar print tem um botão no teclado do seu computador chamado PRINT ou PRT SCR e tem no Photoscape uma opção clique aqui para ver)
Depois disso vá em um editor e veja o tamanho da área de post do seu blog. Dou um exemplo no vídeo abaixo.
Depois disso vá em Modelo>> Editar HTML>> Clique dentro da caixa de códigos e aperte em Ctrl+F e pesquise por:
.main-inner .column-center-outer {
Você vai achar algum mais ou menos assim:
.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
E no lugar cole o seguinte código:
.post img{
border: 0; /* borda na imagem em zero, não altere */
margin: 0 0px 0 0px; /* margem da direita e esquerda, não altere */
padding: 0; /* espaço entre margens e imagem, não altere */
max-width: TAMANHO QUE QUER A IMAGEMpx
}
Eu acho que está mais ou menos explicado no próprio código.
No lugar de TAMANHO QUE QUER A IMAGEM coloque o tamanho que você deseja que a imagem tenha. Como vocês viram no vídeo o meu deu 580px, então se eu colocasse esse tamanho ele ia fica com o mesmo tamanho da área.
Créditos: Floquetando
Bem pessoal eu espero que tenham entendido e gostado.