25 de dez. de 2012

Postagens Divididas em Colunas ou Listas

Iae pessoal, venho trazer meu primeiro tutorial,e esse é um tutorial para quem posta uma alta quantidade de conteudo , e não quer aquela famosa "poluição visual" em seu blog.
Demonstração
Primeiro , procure em seu painel por : ]]></b:skin> ABAIXO dele , cole o seguinte código : <!-- 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(http://1.bp.blogspot.com/-YIyzBkiXGBY/UIXQ2KfJBZI/AAAAAAAAAaE/X3aTM9LFbw8/s1600/post.png) no-repeat !important;/* --imagem no lugar das bordas--*/
width:738px !important;
height:28px !important; /* --altura da coluna--*/
float:left;
padding:0px;letter-spacing:0px;
font-size: 0px; /* --tamanho da fonte do texto--*/
line-height:1.4em;
text-align:$StartSide;
}
.post img, table.tr-caption-container {
  padding:4px;
  display:none;
}
.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-weight:normal;margin:0 0 15px;
padding:4px 0 0 10px;line-height: 1.3em;
letter-spacing: -1px;
color:#000;
font:normal bold 12px 'play',Verdana,Arial,Sans-serif;
text-shadow:#CCC 1px 0px 0px;
}
</style></b:if></b:if>
<!-- Estilos da página Inicial Fim -->
Procure novamente por : ]]></b:skin> ACIMA dele cole o seguinte código :
h2.date-header {
text-align:center;
float:right;
margin-right: 20px;
margin-top: 10px;
color: #000;
width:auto;
postion:absolute;
font: normal 11px 'play',Verdana,Arial,Sans-serif;
text-shadow: 0px 0px 3px #000;
}
.entry-title {
width:738px;
background:url(http://1.bp.blogspot.com/-YIyzBkiXGBY/UIXQ2KfJBZI/AAAAAAAAAaE/X3aTM9LFbw8/s1600/post.png)no-repeat;
padding-top:5px;
padding-left:20px;
color:#000;
height:25px;
font: normal bold 16px 'play',Verdana,Arial,Sans-serif;
}
PRONTO, agora seu blog está com o estilo LISTA, para que fique no estilo COLUNA, altere o WIDTH e o HEIGHT do primeiro código, e altere o URL DA IMAGEM no background, para uma imagem sua. OBS: para que não haja conflito entre postagens procure por : /* Posts ----------------------------------------------- */ e APAGUE todo o conteúdo existente nela.