Como Dividir a Área dos Posts do Blogger em Colunas

Dê um novo estilo à página inicial de seu blog dividindo a área das postagens em colunas.

Vivemos em constante mudança no dia a dia e também procuramos fazer o mesmo com nossos trabalhos e por isso às vezes sentimos a necessidade de dar uma atualizada e sair da mesmice. Com os blogs não é diferente, precisamos em certos momentos mudar algo que não esteja agradando a nossos olhos e dos visitantes, que esteja deixando o layout e navegabilidade comprometidos, cores que não combinam, widget que esteja interferindo em alguma funcionalidade ou simplesmente por pura vontade de modificar o visual.

O certo é que precisamos deixar o visual de nossas páginas o mais “limpo” possível para que os visitantes possam se sentir à vontade em navegar e visualizar o que ele realmente deseja que é o conteúdo. Por isso, se você pretende ter um blog que chame a atenção, que tenha um visual profissional e que obtenha cada vez mais visualizações o importante é que suas “escolhas visuais” não afetem seu arquivos e/ou navegação pelas postagens.

Área dos Posts do Blogger dividida em Colunas

Um visual bastante utilizado hoje em dia em blogs, é aquele em que as postagens na página inicial ficam em duas colunas dando a impressão de estarem flutuando (estilo magazine) adotado recentemente também aqui pelo blog Pro Developer. Nesse estilo, também podemos destacar o tempo da página ser carregada diminui pela questão das postagens estarem resumidas e não aparecerem seu total conteúdo que podem existir vários tipos de arquivos dependendo do contexto de seu blog.

Contudo, trazemos para você o código responsável por fazer as alterações para que seu blog fique com esse estilo, que nada mais é do que pequenas configurações em CSS que farão com que a área de posts sejam divididas em colunas. Essa opção, será aplicada apenas a página inicial e também a página de marcadores não afetando o restante de seu blog.

 Observação: Antes de realizar o tutorial, é necessário que seu blog possua o resumo automático de postagens. Caso não possua, veja o artigo Resumo Automático de Postagens no Blogger.

* A configuração do script do Resumo Automático de Postagens pode variar de blog por causa da largura do mesmo, configuramos o script em nossos testes dessa maneira:

Configuração Script Resumo Automático de Postagens

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Tutorial 

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ABAIXO da tag encontrada cole o seguinte código:

<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 {
position: relative;
display: inline;
width:45%;
height:;
float:left;
margin: 5px;
border-bottom:1px dotted #ccc;
padding:8px;
letter-spacing:0px;
font-size: 12px;
line-height:1.4em;
text-align:justify;
}
.post h3, .post h3 a, .post h3 a:visited, .post h3 strong {
height:40px;
display:block;
word-wrap: break-word;
font-size:16px;
font-weight:normal;
margin:0 0 15px;
padding:0;
line-height: 1.3em;
letter-spacing: -1px;
}
.reslink{
margin:5px 2px;
display:block;
float:right;
padding: 4px 7px;
font-weight:normal;
letter-spacing: 0px;
background:#333333;
}
.reslink a {color: #ffffff;text-decoration:none;}
#blog-pager {clear:both;}
</style>
</b:if></b:if>

Configuração
* Em LARANJA, representa a largura da coluna.
* Em VERMELHO, cor de fundo do link "Leia Mais".
* Em AZUL, caso desejar ajuste a uma altura definida (height).

>> Clique em "Visualizar", estando tudo normal clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.