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.

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.

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 ACIMA da tag encontrada cole o seguinte código:

.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;}

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", Se estiver tudo normal clique em "Salvar Modelo".

Agora e só você ir ao seu blog e veja como ficou.

" Deixe seu comentário, para que nos motive a melhorar cada vez mais o nosso trabalho.