ÁREA DOS POSTS DIVIDIDA EM COLUNA ESTILO MAGAZINE

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

Entre na “edição de html” do seu template e procure pela tag: ]]></b:skin> e cole abaixo dela:

<!-- Estilos da página Inicial Inicio -->
<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 { /* --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:200px; /* --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 -editado por www.comosefez.com--> 

Se você quiser, pode aplicar uma imagem no lugar das bordas,  basta apagar o trecho que se refere as bordas e acrescentar a URL da imagem neste trecho:

background:url(endereço-da-sua-imagem) no-repeat;

Você Também pode 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 200×200, 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 você deverá substituir width:45%; pelo valor referente a largura da sua imagem, desta forma:

 background: url(ENDEREÇO-DA-IMAGEM) no-repeat;
widht:200px;
height:200px; 

Você deve adaptar os estilos conforme seu template e sua preferência, os trechos editáveis estão destacados no código.

07:41:00