Área dos Posts Dividida em Colunas

Em outros tutoriais, eu já ensinei como definir estilos e personalizar os posts apenas na página inicial.
Atendendo a pedidos, hoje veremos como personalizar os posts dividos em colunas (no estilo magazine) apenas na página inicial e na página de marcadores.
Neste tutorial, você verá como dividir somente a área dos seus posts em colunas, onde as postagens aparecem resumidas, lado a lado.

(veja a imagem abaixo)

Demo

Antes de mais nada, cabe salientar que este tutorial aplica-se somente aos templates que possuem o hack de postagens Resumidas automática na página inicial, portanto, para prosseguir com este tutorial, você já deve ter instalado o hack “Leia Mais” de Resumo Automático, para poder dar estilo aos posts, seguindo este tutorial.

Entre na “edição de html” do seu template,clique em ‘expandir modelo de widget’, e procure pela tag: ]]></b:skin> e cole ABAIXO dela:

<!-- Estilos da página Inicial Inicio -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.main .widget{margin: 0 auto;clear:both;}
h2.date-header{
margin: 0px;padding: 0px;
text-indent: -9999em;
}
.post-footer{display:none;}
.post { /* --espaço ocupado pela postagem--*/
position: relative;display: inline;
background:url(endereço-da-sua-imagem) no-repeat;/* --imagem no lugar das bordas--*/
width:45%; /* --largura da coluna--*/
height:300px; /* --altura da coluna--*/
float:left;margin: 5px;
border:1px solid #ddd; /* --edite cor da borda--*/
padding:8px;letter-spacing:0px;
font-size: 12px; /* --tamanho da fonte do texto--*/
line-height:1.4em;border-radius:5px;
-moz-border-radius:5px;-webkit-border-radius:5px;
text-align:justify;}
.post h3, .post h3 a, .post h3 a:visited, .post h3 strong {/* --estilos para o titulo das postagens--*/
display:block;word-wrap: break-word;
font-size:16px; /* --tamanho da fonte do titulo do post--*/
font-weight:normal;margin:0 0 15px;
padding:0;line-height: 1.3em;
letter-spacing: -1px;}
#showlink{ /* --estilos para o leia mais--*/
margin:5px;display:block;
float:right;padding: 4px 7px;
font-weight:normal;letter-spacing: 0px;
background:#66bbdd; /* ---cor de fundo--*/
border-radius:5px;-moz-border-radius:5px;
-webkit-border-radius:5px;}
#showlink a {color: #ffffff;/* escolha a cor de seu link */
}
</style></b:if></b:if>
<!-- Estilos da página Inicial Fim -->

No código acima eu apliquei bordas, e determinei uma altura(height) para as colunas de 300px.

Se você quiser, pode aplicar uma imagem no lugar das bordas, para isso basta apagar o trecho que se refere as bordas e acrescentar o endereço da sua imagem neste trecho:
background:url(endereço-da-sua-imagem) no-repeat;

Não esqueça que, caso você opte por inserir uma imagem de fundo para a coluna da área de postagem na página inicial, você deverá estipular a largura(width) e a altura(height) da imagem que for utilizar.

Se, por exemplo, você vai utilizar uma imagem no tamanho 300×300, deverá incluir os valores referente a altura e largura da área de post, dentro da tag que representa o espaço ocupado pela postagem para que a imagem ocupe a área toda. Neste caso você deverá substituir width:45%;
pelo valor referente a largura da sua imagem, desta forma:
background: url(ENDEREÇO-DA-IMAGEM) no-repeat;
widht:300px;
height:300px;

No código acima eu determinei que os posts apareçam resumidos e em colunas apenas na página inicial e na página de marcadores, diferenciando das páginas individuais e das páginas estáticas.
As modificações exemplificadas acima afetarão apenas a página inicial e de marcadores.

Você deve adaptar os estilos conforme sua preferência, os trechos editáveis já estão destacados no código.

Lembrando que, se você alterar o tamanho da coluna de post, aumentando ou diminuindo a largura, você deve alterar os valores que estão na largura da coluna central na área total de postagem, você deve observar qual a largura que está estipulada em #main-wrapper (ou .main-outer) e deve ajustá-las. Portanto, você deve verificar qual a largura estipulada na coluna da área total de postagem do blog. Caso contrário não vai dar certo.

ATENÇÃO:
Pode ocorrer de, após instalar este recurso, os links de navegação sumirem ou ficarem “espremidinhos” no canto ao lado da coluna.
Isso ocorre porque alguns templates apresentam um bug no link de navegação, qdo fazemos alguma modificação.