Comentários numerados no blog

Colocar um contador nos comentário do blogger não é tão difícil como parece, vamos ver em poucos passo como fazer este efeito em seu blog.

Primeiro faça o DOWNLOAD do seu template, entre em DESIGN/Editar HTML clique em BAIXAR MODELO COMPLETO, assim você evita transtorno caso não funcione.

1º Passo: Depois de fazer o DOWNLOAD do seu template clique em EXPANDIR WIDGET e procura pela tag abaixo:

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

Caso não encontre essa tag procure pela tag seguinte:

 <dl id='comments-block'>

2º Depois de localizada adicione os códigos que estão em vermelho na ordem exata como descrito no código abaixo:

<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>

3º Agora copie o código abaixo e coloque antes da seguinte 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;
}

4º Salve e confira o seu blog.

Créditos à Clau do Mundo Blogger.