Comentários numerados

Hoje tem pedido de tutorial atendido! Vou mostrar para vocês como deixar os comentários numerados. Esse recurso é muito útil para fazer sorteios e também para ajudar na hora de responder os comentários. Eu anoto o número em que eu parei para continuar respondendo depois.

Este tutorial mexe com vários códigos, então recomendo que antes de começar você faça download do modelo de seu blog, assim se houver algum erro, dá pra restaurar tudo como era antes. Fez backup? Então vamos começar!

ATENÇÃO

O script só funciona em comentários configurados para abrir em janela pop-up ou em página inteira ou se não usarem o sistema de respostas do próprio blogger.

Abra seu HTML, e marque a caixinha "Expandir Modelos de Widgets"
Aperte Ctrl+F e procure por:

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

Abaixo dessa linha cole isso:

<script type='text/javascript'>var contadorComentarios=0;</script>

Agora procure por esta linha:

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

E logo abaixo dela cole esse código:

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

Novamente, procure por:

<data:commentPostedByMsg/>

E logo abaixo cole isso:

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

Por último procure por:

<b:include data='comment' name='commentDeleteIcon'/></span></dd>

E logo abaixo cole: </div>

No final seu código deve estar assim:

 <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='&quot;#comment-&quot; + data:comment.id' title='Link para este comentário'><script type='text/javascript'>contadorComentarios=contadorComentarios+1;            document.write(contadorComentarios)</script></a></span>

            </dt>

            <dd class='comment-body' 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/>

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

Visualize se não tem nenhum erro e salve as alterações. Agora vamos aplicar os estilos á numeração. Nesta etapa você vai ter que salvar as alterações e depois visualizar no blog mesmo, já que não dá pra ver os comentários na  pré-visualização.

Aperte Ctrl+F e procure por ]]></b:skin>

Logo acima da tag cole o seguinte código:

.comentacontador {
float: right;  /* alinhamento do número*/
display: block;
width: 50px; /*Largura do espaço do número*/
margin-top: -30px;  /* distância dos números ao topo */
text-align: right;
font-family: Trebuchet MS; /* Fonte do múmero*/
font-size: 36px;  /* tamanho da fonte */
background: #uijvj; /*Coloque cor de fundo se quiser*/
font-weight: normal; /*Troque normal por bold se quiser a fonte em negrito*/
}

Merecidos créditos ao Mundo Blogger! Não deixem de visitar :) Lembrando para quem ainda não está particpando, tem um sorteio muito legal rolando aqui no blog, não deixem de conferir!