Comentarios Numerados

                  


Oii gente vamos aprender a colocar comentarios numerados.
Créditos : Cherry Bomb

ATENÇÃO

O script só funciona em comentários configurados para abrir em janela pop-up ou em página inteira ouse 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*/
}