Elemento post o mais importante no Blogger

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