Mostrar apenas o título das postagens

Yo! Yo bunnie's como estão? Hoje venho trazer um estilo para área de postagens. Você pode editar o CSS o deixando ao seu agrado, até mesmo aplicar algum efeito nos textos. Eu vou disponibilizar o código simples para ficar melhor edita-lo.

(Para ver melhor clique na imagem)

1. Escolha o blog qual deseja aplicar o estilo, vá em HTML e procure por:

Códigos

<b:include data='post' name='post'/>

Ao achar substitua por esse código se quiser sem o número de comentários:

Códigos

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/>
        <b:include data='post' name='comments'/>
      <b:else/><b:if cond='data:blog.pageType != "item"'>
         <span class='posth2'><a expr:href='data:post.url'>
         <data:post.title/></a></span>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if></b:if>

Se quiser com o número de comentários junto ao título adicione este código:

Códigos

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<span class='numComments'><a expr:href='data:post.url'>
<data:post.numComments/></a>
</span>
<b:include data='post' name='post'/>
        <b:include data='post' name='comments'/>
      <b:else/><b:if cond='data:blog.pageType != "item"'>
         <span class='posth2'><a expr:href='data:post.url'>
         <data:post.title/></a></span>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if></b:if>

2. Agora vamos adicionar o estilo CSS, o código que permite você personalizar a lista. Procure por ]]></b:skin> e acima dele cole:

Códigos

/* PostH2-----------------------------------------------*/
.posth2 a:link{
display:block;
font-size:24px;
border-left: 6px solid #000;
border-bottom:1px solid #808080;
color: #808080;
margin: 0 1px 1px 0;
padding: 4px 0 2px 6px;
}
.posth2 a:visited{
border-left: 6px solid #ccc;
color:#ccc;
border-bottom:1px solid #ccc;
margin-left:1px;
display:block;
}
.posth2 a:hover{
display:block;
border-left: 6px solid #cc0000;
color:#cc0000; /* letra preta */
border-bottom:1px solid #cc0000;/* borda preta */
}

Alguns sites disponibiliza ícones e setas legais, para por na lista.

3. Agora procure por:

Códigos

<b:if cond='data:post.title'>

E abaixo dele cole:

Códigos

<span class='numComments'>
<a expr:href='data:post.url'>
<data:post.numComments/></a></span>

4. Se você escolheu acima com número de comentários, procure por ]]></b:skin>  e acima dele cole:

Códigos

/* Numcomments-----------------------------------------------*/
.numComments {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj32RK_AMS35BT-im5Kzk63xMa6k1HDnLuZcSeCqMg5mHPTCCKIOqcps_c_O8gXlEjXhvHF7sdBSoNH_CM6-pHATXF8voI4fEg1TSRCVIx1yPTdpmg8X52ytmUc-CvmJrl3U8kyAGHrm4Sm/s320/comment.png) no-repeat bottom;/*balão azul*/
  float:right;
  padding: 1px 2px;
  font-size: 12px;/*tamanho do número*/
  width: 20px;
  height:16px;
  color: #fff;/*cor do número*/
}
.numComments a:link{
  margin: 13px 6px;
  color: #ffffff;
}
.numComments a:visited{
  margin: 13px 6px;
  color: #000000;
}
.numComments a:hover{
  margin: 13px 6px;
  color: #FAD62C;
}

Agora vamos arrumar a data, existe dois modos. Data junto ao título ou data acima de todos os títulos. Vou mostrar como aplicar ele e você escolhe qual lhe agrada mais, lembrando que sua aparência, cores, fontes etc... podem ser alterados.


Data junto aos títulos:

1. Para que a data fique junto aos títulos procure pelo código abaixo, apague toda a área:

Códigos

h2.date-header {
  margin:1.5em 0 .5em;
  }

No lugar cole esse:

Códigos

h2.date-header { float: right;text-align: right; margin: 1px 0 3px 0;padding: 5px 0px 0 0;}

Salve!

2. Agora procure por:

Códigos

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/></h2>
</b:if>

E substitua por esse:

Códigos

<b:if cond='data:post.dateHeader'>
<script>var lastDate= '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(lastDate);</script>
</h2>
</b:if>

Salve e prontinho!

Data junto em todos os post do dia:

Se você preferir que a data fique acima de todas os posts do mesmo dia basta substituir:

Códigos

h2.date-header { margin:1.5em 0 .5em; }

por:

Códigos

.date-header { margin:20px 0 3px 0; padding: 3px 0 3px 4px; color: #FF4040;/*cor da fonte*/ font-size: 10px; /*tamanho da fonte*/ background: #cccccc;/*cor de fundo*/ }

Crédito do tutorial ao blog: Templates e acessórios.