Como dividir os posts em duas colunas

Esta eu aprendi no excelente Blogger Buster: como dividir seus posts em duas colunas. Era algo que eu vinha tentando a muito tempo, sem sucesso. No final das contas, a Amanda resolveu a questão de maneira muito simples do que eu vinha tentando (ainda bem!).

Antes de começar, eu deixo a sugestão de que você crie um blog de testes e não tente nenhuma alteração no seu blog atual. Crie um blog de testes e coloque nele o template Mínima, que o Blogger oferece.

Para que você entenda do que este tutorial trata, clique aqui (meu blog de testes) e veja as postagem divididas em duas colunas. Esta divisão aparecerá apenas na página incial do seu blog. O uso do hack Leia Mais é opcional e eu usei ele no meu blog de testes para converter um template do wordpress. Ele não é necessário, ok?

Após criar seu blog de testes com o template Mínima, faça as seguintes alterações no CSS:

#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


Originalmente o template Mínima tem uma Outer-Wrapper com largura 660px; mude para 940px como mostro acima, em destaque.

#main-wrapper {

width: 620px;

float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Deixe main-wrapper com 620px de largura e a sidebar com 300px de largura:

#sidebar-wrapper {

width: 300px;

float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Remova de header-wrapper e footer-wrapper a linha que determina a largura:

#header-wrapper {

width:660px;

margin:0 auto 10px;
border:1px solid $bordercolor;
}

#footer {

width:660px;

clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Acrescente no código CSS (pode ser logo após Outer-Wrapper) o seguinte código:

#blog-pager {
width: 600px;
clear: both;
text-align: center;
}

Agora vamos posicionar melhor a data dos posts. Clique em Expandir Modelo de Widget e procure o seguinte código:

<data:adStart/>
<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><data:post.dateHeader/></h2>

</b:if>

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>

Corte a parte em vermelho e cole imediatamente após:

<a expr:name='data:post.id'/>

Feitas estas modificações, copiei o código abaixo:

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>

e cole imediatamente após </b:skin>

Visualize e você verá que na página inicial seus posts estarão divididos em duas colunas!

Para que as imagens que você usar em seus posts não ultrapassem a largura das colunas na página inicial, você pode estabelecer uma dimensão fixa para elas (nos posts internos elas aparecerão no tamanho real), bastando acrescentar o que está em vermelho:

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
.post-body img {width: 280px;}
</style>
</b:if>

Esta medida para a largura da imagem pode ser alterada ao seu gosto. No caso do meu blog de testes eu ainda determinei que as imagens apareçam sempre à esquerda do texto, incluindo a linha: float:left; Também determinei uma altura fixa para cada coluna (cada bloco de texto) acrescentando a linha em destaque:

.post {width: 310px; height:220px;........

Isto por que estou usando o hack Leia Mais, que é opcional.