Área dos Posts Dividida em Colunas

Neste tutorial, você verá como dividir somente a área dos seus posts em colunas, onde as postagens aparecem resumidas, lado a lado.

Antes de mais nada, cabe informar que este tutorial aplica-se somente aos templates que possuem o hack de postagens Resumidas automática na página inicial - Hack Leia Mais Automático, 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: ]]> e cole ABAIXO dela:


<!-- Estilos da página Inicial Inicio --> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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:500px; /* --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 500px.

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 500x500, 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. Nesta 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:500px;
height:500px;

No código acima está determinado 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.

ATENÇÃO: Caso ocorra algum bug (que eu acho que vai ocorrer), fale com migo no chat.