Como numerar os comentários de seu blog

Desde quando comecei a mexer no template que uso em meu blog (sim, jamais mudei de template) eu adicionei um recurso muito legal e que faz tempo queria ensinar: como numerar automáticamente todos os comentários do blog.
Daí, outro dia, a Giu Lopes, do Espaço da Giu e a Ana Paula Santiago, do Inventando casa, pediram que eu ensinasse comofaz e eu prometi. Promessa é dívida, então vamos lá?

Talvez você se pergunte pra que serve numerar os comentários do blog… Eu uso para os sorteios que faço. Mas tem muitas outras utilidades, claro. E por ser automático você faz uma vez e esquece. Prático, né?

Para começar eu quero que você repita comigo: sou corajoso/a e não temerei nada.
Repetiu? Agora faça backup de seu blog para ter mais segurança. Agora pode confiar em mim e mãos à obra:

Abra o painel de seu blog e clique em Editar html. Quando abrir a página com o código-fonte de seu blog marque a caixinha Expandir modelos de widgets. Agora localize este trecho:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>        
<b:loop values='data:post.comments' var='comment'>         
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>         
<a expr:name='data:comment.anchorName'/>         
<b:if cond='data:comment.authorUrl'>         
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>         
<b:else/>         
<data:comment.author/>         
</b:if>         
<data:commentPostedByMsg/>         
</dt>         
<dd class='comment-body'>         
<b:if cond='data:comment.isDeleted'>         
<span class='deleted-comment'><data:comment.body/></span>         
<b:else/>         
<p><data:comment.body/></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>         
</b:loop>         
</dl>

E substitua todo ele por este outro:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'> <script type='text/javascript'>var CommentsCounter=0;</script>        
<b:loop values='data:post.comments' var='comment'>         
<div class='' expr:id='data:comment.id'>         
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>         
<a expr:name='data:comment.anchorName'/>         
<b:if cond='data:comment.authorUrl'>         
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>         
<b:else/>         
<data:comment.author/>         
</b:if>         
<data:commentPostedByMsg/>         
<span class='comment-number'>         
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>         
<script type='text/javascript'>         
CommentsCounter=CommentsCounter+1;         
document.write(CommentsCounter)         
</script>         
</a>         
</span>         
</dt>         
<dd class='comment-body'>         
<b:if cond='data:comment.isDeleted'>         
<span class='deleted-comment'><data:comment.body/></span>         
<b:else/>         
<p><data:comment.body/></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>

Você concluiu a parte mais difícil. Agora vamos dar estilo ao seu numerador de comentários. Encontre esta tag:

]]</b:skin>

E acima dela cole este código:

.comment-number {        
float: right; /ALTERE A POSIÇÃO DOS NÚMEROS         
background: #cccccc no-repeat; /ALTERE A COR DE FUNDO         
width:20px; /ALTERE A LARGURA DO FUNDO         
height:20px; /ALTERE A ALTURA DO FUNDO         
margin-right: 15px;         
margin-top: -25px; /*comments-counter position*/         
text-align: center;         
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif; /ALTERE A FONTE         
font-size: 18px; /ALTERE O TAMANHO DA FONTE 
}            
.comment-number a:link, .comment-number a:visited {           
color:#445566; !important; 
text-decoration: none !important;           
}            
.comment-number a:hover, .comment-number a:active {      
color: #FF9933 !important;           
text-decoration: none !important;           

Onde eu marquei em  com este sinal # são os códigos das cores. O primeiro se refere ao fundo onde aparecerão os números. E os outros 2 se referem à cor dos números.Este código pode ser modificado para mudar as cores conforme você desejar.Para conhecer todos os códigos das cores siga o link: Tabela de cores.

Caso deseje alterar a fonte dos números mude onde está escrito font-family. Se quiser alterar o tamanho dos números altere em font-size. Clique em Visualizar e se não apresentar erro, salve.

Importante:

A numeração de comentários só estará visível quando você clicar em um título de qualquer postagem. Daí abre a página da postagem e você verá os comentários numeradinhos, bonitinhos. Também fica visível se seus comentários são do tipo que aparecem embaixo dos posts.


Quer aprender mais uma coisa legal?
Existem atualmente 3 tipos de formulário de comentários no Blogger.

1. Janela pop up► é a que eu uso aqui atualmente.
2. Página inteira► ao clicar para comentar abre uma outra página, “fora” do blog.
3. Postagem abaixo incorporada►mostra o formulário de comentários abaixo do post a ser comentado. Nesta os comentários numerados aparecem de cara. Nas outras 2 precisa estar na página do post para ver.

Caso queira trocar a posição de seu formulário de comentários do blog vá em Configurações e clique em Comentários. Role a página até achar isto:

Escolha a opção que deseja e salve. Nesta página também é possível escolher se seu blog aceita ou não comentários anônimos, e muitas outras coisas. Bom, né?

Importante:
Há um tutorial mais moderno, para os modelos de design do Blogger.
Leia aqui:

Como numerar os comentários do blog e manter o recurso Responder

Gostou, quer ter em seu blog mas não tem tempo/paciência para fazer?

Entre em contato comigo e eu faço para você!