Comentários Numerados no Blogger

Hoje você vai aprender como numerar os seus comentários, vai ver como é fácil aplicar este recurso.

[becape]Antes de mais nada, você já deve saber que é sempre bom fazer um backup do seu Template para evitar transtornos.[/becape]

Feito isso, entre na edição HTML do seu template, clique em “Expandir modelos de widgets” e procure pelo seguinte código:(você pode usar ctrl+f colando a 1ª linha do código para facilitar sua busca)

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

[dica]Caso seu template não esteja dessa maneira, tente procurar pela referência: <dl id=’comments-block’>[/dica]

Uma vez localizada, você deverá adicionar os códigos que estão destacados na cor vermelha, exatamente nos locais que estão indicados, sem alterar nada:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<script type='text/javascript'>var contadorComentarios=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comentacontador'>
 <a expr:href='"#comment-" + data:comment.id' title='Link para este comentário'>
 <script type='text/javascript'>
 contadorComentarios=contadorComentarios+1;
 document.write(contadorComentarios)
 </script>
 </a>
 </span>

</dt>
<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>

Visualize, e se estiver tudo certo, salve!

2º passo. Agora você pode estabelecer os estilos para os comentários numerados no CSS do seu template.

Volte na edição HTML, e cole o código a seguir, logo ACIMA da tag ]]></b:skin> :

.comentacontador {
float: right; /* alinhamento á direita */
display: block;
width: 50px; 
margin-top: -30px; /* distância dos números ao topo */
text-align: right; /* texto alinhado á direita */
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 36px; /* tamanho da fonte */
font-weight: normal;
}

Antes que me perguntem: o código da área dos comentários postado neste tutorial, foi retirado do Template Minima. Nos templates padrões todo este trecho se apresenta desta maneira. Se o seu template já sofreu muitas modificações na área de comentários, provavelmente esta parte deve se apresentar de outra maneira, portanto é bem capaz que este hack não funcione para alguns casos.
Caso não dê certo no seu blog, pode ter certeza que seu template já sofreu bastante modificação na área dos comentários e infelizemnte a sua única solução é: tentar encontrar trechos ao menos parecidos e testar, testar, testar e tentar bastante, quem sabe você não dá sorte!