Elemento post o mais importante no Blogger

5 de janeiro de 2009

A parte que abriga os post de todo blog é com certeza a parte mais importante de todo projeto.
Através dela nossos leitores aprendem, se divertem, ficam sabendo do que está acontecendo. Sendo assim vamos dar uma atenção para ela.
Antes de começar a codificar as postagens, você tem que ter em mente que, está parte tem que ter todo cuidado.
Primeiro padronize como ela será, seja no papel ou em sua cabeça, mas ela terá que ser agradável e ter um equilibrio, principalmente se forem textos enormes ou tutoriais. Crie um padrão para tamanhos de imagens, espaços entre parágrafos, lista simples e outros elementos.

Vamos começar:

A classe .post abriga os elementos de uma postagem. Sendo uma classe ela se torna um elemento filho de da div main-wrapper que configuramos em tutoriais anteriores com uma largura de 417px.
Veja o código CSS do nosso exemplo:

.post {
width:377px;
margin: 0 0 0 20px;
background: url(http://i37.tinypic.com/1z3z59x.jpg) no-repeat center bottom;
padding-bottom: 20px;
text-indent : 25px;
text-align : justify;
font-size:12px;
}

A largura de 377px para o post nos da uma sobra de 40px em relação a div main-wrapper.
Sendo assim, colocamos uma margem a esquerda (left) de 20px, o que centralizará nossa classe.
Colocamos uma imagem abaixo em vez de uma borda, para ficar mais bonito.
Demos um espaçamento de 20px abaixo do post para separar os links de comentários nome do autor, etc.
Text-indent é um recuo do primeiro parágrafo, que também serve para estilo de beleza.
Justificamos o texto para dar equilibrio na classe e definimos o tamanho da fonte em 12 px.

Todo post tem um título com um elemento h3. Se h3 está dentro da classe .post, então ele é filho deste elemento.
Vamos referencia-lo

.post h3 {
margin : 18px 0 10px;
font-size : 18px;
font-weight : normal;
font-style : italic;
letter-spacing : -1px;
text-align : center;
}

Demos uma margem em cima para dar espaço entre a imagem de sombreamento e demos uma margem embaixo para separar do texto da postagem.
Definimos o tamanho da fonte em 18px;
Estilo da fonte foi declarada em normal e ítalica (deitada)
Os espaços entre as letras do título foi declarada em 1px para dar equilibrio para fonte Georgia.
Colocamos o título no centro da classe .post.

Como o título é um link, vamos estilizar seus estados quando o mouse está por cima, quando é visitado, etc.

.post h3 a, .post h3 a:visited, .post h3 strong {
text-decoration:none;
border:none;
color:#000;
font-weight:normal;
}

Sempre que puder generalizar vários elementos, faça. Isso economiza código e trabalho.
Este trecho não precisa de muita explicação pois utiliza uma css simples, mas veja que foram estilizados 3 elementos de uma vez. Sempre que puder faça isso.
Uma dica é que aqui você poderá colocar uma imagem de fundo nos títulos.

Como o elemento .post é vasto vamos ficar por aqui hoje e continuar no próximo artigo.

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

5 comentários:

"Bauru" disse...

Rô, concordo que é o elemento mais importante do blog. Por esse motivo é que gostaria de ver os principais posts na sidebar. É possível exibir os posts mais clicados do blog através de uma pipe do Yahoo? Até usei uma, mas de ontem pra hoje ela parou de exibir.

Marcelo R. Souza disse...

@Ro...
Para ser sincero eu tenho pavor dos pipes do Yahoo por este motivo, derepente eles param de funcionar.É possível colocar os principais post na sidebar, mas isso teria que ser feito através de algum código JavaScript que não é minha praia pois precisaria fazer uma contagem dos cliques ou comentários e criar uma lista.

Áurea disse...

Marcelo,

"Tô bóbs"! Está tudo lindo aqui! Eu queeerooooo! Amei!
Estou passando, mesmo que um pouco tarde, para deixar o meu abraço e desejar que seu ano seja repleto de coisas boas, realizações, paz, enfim, tudo de bom!
Viajei um pouco e tirei uma folga dos blogs, mas estou voltando devagarinho.
Eu já estava querendo fazer algo parecido com as mudanças do seu blog (posts em 2 colunas, etc...) no Templates, mas não achava que ia ficar legal, depois que vi o seu trabalho... Realmente me animou, vou bolar algo bem legal!

Grande beijo com carinho.

Áurea

Marcelo R. Souza disse...

@Aurea
Que bom que gostou. Virada de ano, virada de idéias e de foco.
Espero que a folga tenha terminado e que volte logo a ativa.

Beijos!

Tatu disse...

Marcelo,

tenho tentado todos os meios colocar uma simples linha dividindo minhas postagens e nada, absolutamente nada altera em meu ".post".
Nunca consegui mudar nada nesta parte da template (uso o minima), nem espaço consigo almentar. Achei seu post o mais completo e bem explicado de todos e mesmo assim, nada. Será que pode me ajudar? Caso contrario vou desistir...
abraço

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa