Área das Postagens em Colunas

all star, awesome, beautiful, blue

Olá gente ;D Estavam com saudade de ver um tutorial por aqui? Então hoje eu vim trazer este aqui, que é bom para economizar espaço e deixar o blog com ar mais profissional, que nem os meus amados sites estilo revista. Clique em Leia Mais e confere como é fácil!


Resultado:


<br/><a href="http://oi43.tinypic.com/123tqph.jpg" target="_blank">View Raw Image</a>


ATENÇÃO!
Para que este tutorial seja mais eficaz, eu recomendo que utilize este aqui: Hack Leia Mais com Imagens Reduzidas.


TUTORIAL

Procure por: ]]></b:skin> e ABAIXO desta tag, cole:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.post h3, .post h3 a, .post h3 a:visited, .post h3 strong { /* TÍTULO DO POST */
display:block;word-wrap: break-word; /* NÃO ALTERE */
font-size:16px; /* TAMANHO DA FONTE DO TÍTULO */
font-weight:bold; /* FONTE EM NEGRITO */
margin:0 0 5px; /* MARGEM EXTERNA */
padding:0; /* MARGEM INTERNA */
line-height: 1.3em; /* NÃO ALTERE */
letter-spacing: -1px; /* NÃO ALTERE */
}
.jump-link { /* LEIA MAIS */
width:80px; /* LARGURA DO BOTÃO */
height:15px; /* ALTURA DO BOTÃO */
text-align:center; /* AINHAMENTO DO TEXTO NO CENTRO */
padding: 2px 5px 2px 5px; /* MARGEM INTERNA */
float:right; /* FLUTUAR À DIREITA */
}
.jump-link a { /* LEIA MAIS ESTILO */
color:#fff; /* COR DA FONTE */
background: #df005a; /* COR DE FUNDO */
font-size:12px; /* TAMANHO DA LETRA */
width:80px; /* LARGURA DO BOTÃO */
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
margin-left:-200px;  -webkit-transition: margin-left; /* EFEITO DE TRANSIÇÃO DE CORES */
font-weight:bold; /* TEXTO EM NEGRITO */
float:right; /* FLUTUAR A DIREITA */
}
.jump-link a:hover { /* LEIA MAIS ESTILO HOVER */
background: #FFC0CB; /* COR DE FUNDO */
color: #df005a; /* COR DA FONTE */
-webkit-transition-duration: 250ms; /* EFEITO DE TRANSIÇÃO */
text-decoration:none; /* DECORAÇÃO DE LINK: NENHUMA */
}
.column-center-outer{ /* NÃO ALTERE NADA AQUI */
padding:0;
margin:0;
display:block
}
#Blog1{ /* LARGURA DA ÁREA DE POSTS */
width:580px;
}
.post {
overflow:hidden; /* NÃO ALTERE */
float:left !important; /* FLUTUAR À ESQUERDA */
margin:4px 7px; /* MARGEM EXTERNA */
width:45%; /* LARGURA: NÃO ALTERE */
max-height:270px; /* ALTURA MÁXIMA */
line-height:1.2em /* NÃO ALTERE */
}
.post-body{
max-height:270px !important; /* ALTURA MÁXIMA DO CONTEÚDO DO POST */
overflow:hidden; /* NÃO ALTERE */
}
.post img, table.tr-caption-container {
}
#blog-pager {
display:block; /* NÃO ALTERE */
width:570px; /* LARGURA DA ÁREA GERAL DO POST */
position:static; /* NÃO ALTERE */
padding-bottom:30px !important /* NÃO ALTERE */
}
.post-header, .post-footer, .date-header { /* NÃO ALTERE */
display:none;
}
</style></b:if></b:if>

Faça as alterações necessárias. Espero que tenham curtido o tutorial ;D Eu aprendi lá no Fazendo Blogspot, e fiz algumas alterações! Até a próxima, gente ;D