Navegando por vários blogs, especialmente o Bloggerbuster, encontrei uma maneira meio que parece uma gambiarra, mas que a princípio está funcionando, conforme vocês podem ver lá em baixo, no rodapé.
Nesse artigo, a Amanda ensina como fazer um arquivo de páginas em um post para deixar como um link na barra de menu horizontal acima no blog. Um detalhe que me interessou: na postagem ela dividiu o texto em duas colunas!
Minha cabeça começou a divagar... Bem, usando as divs eu poderia criar 3 ou 4 colunas manualmente. Então comecei a trabalhar: As divs são essas:
<div style="width: 45%; float: left;">Colocar aqui o conteúdo da coluna esquerda</div>
<div style="width: 45%; float: right;">Colocar aqui o conteúdo da coluna direita</div>
<div style="clear: both;"></div>
Como eu queria colocar três colunas, o código ficou assim:
<div style="width: 33%; float: left;">Colocar aqui o conteúdo da coluna esquerda</div>
<div style="width: 33%; float: right;">Colocar aqui o conteúdo da coluna central</div>
<div style="width: 33%; float: right;">Colocar aqui o conteúdo da coluna direita</div>
<div style="clear: both;"></div>
Não ficava legal uma porcentagem menor no tamanho. As colunas ficavam desajustadas, então percebi que o melhor seria mesmo dividir por três o tamanho total(100%). Outra coisa, não existe um float: center, pesquisei pela internet e realmente esse comando não existe, logo a solução é repetir o left(esquerda) ou o right(direita).
Eu queria colocar os posts recentes, comentários recentes, o comentaristas e informações do blog, e decidi então usar 4 colunas, cada uma com porcentagem de 25%, além disso, acrescentei os títulos para cada coluna usando a tag h2 e ajustei o código dessa maneira:
<div style="width: 25%; float: left;"><h2 class="Posts Recentes-title">Postagens Recentes</h2>Colocar aqui o conteúdo da coluna esquerda</div>
<div style="width: 25%; float: left;"><h2 class="Posts Recentes-title">Comentários Recentes</h2>Colocar aqui o conteúdo da coluna centro-esquerda</div>
<div style="width: 25%; float: right;"><h2 class="Informações-title">Informações</h2>Colocar aqui o conteúdo da coluna centro-direita</div>
<div style="width: 25%; float: right;"><h2 class="Top10 - Comentaristas-title">Top 10 - Comentaristas</h2>Colocar aqui o conteúdo da coluna direita</div>
<div style="clear: both;"></div>
O resultado pode ser visto abaixo no rodapé do blog. Não é algo estético mas dá para o gasto até eu conseguir fazer um template do meu gosto. O importante é que meu aprendizado em CSS continua bombando. Percebi que a coisa não é um bicho de sete cabeças. Como tudo na vida, o negócio é querer aprender e se concentrar. Como eu sou um auto didata, amo muito tudo isso... Ops, me deu vontade de ir ao McDonalds... Amanhã irei com toda certeza. 