Oie...recebi um pedido para fazer um tutorial sobre como deixar as imagens da mesma largura que a área de postagem, e é sobre isso este post. Antes de começar, você deve saber a largura dos seus posts ou definí-la (veja o trecho area da postagem nos códigos com estilos prontos para posts e sidebar que fiz para ver como adicionar uma largura na postagem: click!).
Vou mostrar duas formas de fazer isso...
Exemplo de como ficará usando os códigos abaixo
A primeira fará com que todas as imagens tenham a largura especificada, ou seja, se você usar imagens pequenas, gifs e ícones em seu blog, melhor não aplicar esse CSS pois ficarão feias. No exemplo, vou usar a área do meu blog, em que os posts tem 650px de largura; cole o código antes de </b:skin>:
.post a img, .post img {
width: 680px;
height: auto;
padding: 0;
margin: 0px -40px 0px -40px;
border: none;
}
Width é a largura da imagem, que você vai alterar mudando o número até ficar do tamanho dos seus posts; margin: 0px -40px 0px -40px; é o que faz a imagem ficar bem no limite da postagem, você pode alterar o -40 por outro número negativo que se adeque ao seu modelo. Height: auto; e border: none; significam que a imagem terá altura estabelecida automaticamente e nenhuma borda.
***
Caso você queira que apenas a primeira imagem ou alguma imagem específica tenha largura total do post, use esse CSS antes de </b:skin>:
.primeiraimagem {
width: 680px;
height: auto;
padding: 0;
margin: 0px -40px 0px -40px;
border: none;
}
Alterando conforme preciso; nesse caso, o ideal é não definir largura para todas as imagens, e quando for usar a imagem em questão, cole na área de HTML da postagem isso:
<img class='primeiraimagem' src="URL-DA-IMAGEM"/>
Fácil né. O legal é que se pode adaptar, aplicar em outros elementos; você poderá obter o mesmo resultado se, por exemplo, usar em um título; seria mais ou menos assim:
.post h3 a, .post h3 a:visited, .post h3, .comments h4 {
background: #cor-do-background;
width: 700px;
height: auto;
padding: 0;
margin: 0px -25px 0px -25px;
}
E o título ocuparia a área total com relação a largura :D Vá editando o código e obtendo os resultados que desejar de diversas formas; ah sim! O ponto de partida para que eu pudesse entender esse CSS foram o site Difluir e o blog da Camila. Lá no Difluir tem um template pronto, gratuito, com esse estilo nas postagens.
Espero que tenha ajudado vocês.
Imagens: Weheartit.com
Obrigada Roberta! seus tutoriais sempre me ajudam muito beijos!
ResponderExcluirMuito obrigada! Procurava por esse tutorial faz tempo!
ResponderExcluirdiveinthis.blogspot.com
Esse tutorial salvou meu dia rsrs sempre encontro tudo no seu blog. Parabéns!!
ResponderExcluirhttp://www.manequim-alternativo.com
Muito obrigadaaa!!! Tava desesperada tentando arrumar isso e não conseguia de jeito nenhum! <3 salvou meu blog! Hhahahah
ResponderExcluirwww.nathaliaorige.com
Salvou minha vidaaaaa
ResponderExcluirAmei, muito obrigada ♥
Que lindo seu blog! To apaixonada ♥
ResponderExcluir