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.

Separar os comentários do blogger

Procurei na internet como separar os comentários do blogger, foi muito difícil mais encontrei um blog em espanhol "Cuidad Blogger" que explicava como separar os comentário de diversas maneiras, assim deixando a área dos comentários mais organizada.

Antes de mais nada faça o DOWNLOAD do seu template em BAIXAR MODELO COMPLETO, para evitar transtorno

1º Colocar um limite abaixo do comentário, este método é simples, mas eficaz:

Créditos da imagem à Cuidad Blogger

Entre em Design/Editar HTML e procure por ]]></b:skin> antes desta tag cole o código abaixo:

#comments-block .comment-footer {
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

2º Podemos fazer o mesmo, mas usar imagem para separar:

Créditos da imagem à Cuidad Blogger

Neste caso utilize o código abaixo:


#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6W-ndzSOH-z3lg79iem4oEFGldVS4O6nKfI3El0KDrNitTo3vLFjj5lCjCv3y8QW2y8heU-Rcse1TCy6EL7sDbv_9Gk87ZVfK3qstUVazfWwM8O1VBRicbWXSR9wRu-zi8jq41Cdw4GM/);
background-repeat:no-repeat;
background-position:center bottom;
height:70px;
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

A Url que está em azul você pode alterar pela Url da sua imagem, lembre-se de alterar a altura da imagem sempre com 20px a mais do que o tamanho real da imagem, exemplo: imagem de 30 px de altura, o código ficará assim: height: 50px; 

3º Enquadrando o comentário, adicionando cor de fundo e borda:

Créditos da imagem à Cuidad Blogger

Para colocar este efeito no blog entre em Desing/Editar HTML e marque a caixa Expandir modelos de widgets, procure pela tag abaixo: "Dica: presione ctrl+F para procurar a tag"


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

Abaixo dela coloque a tag:


<div class='comentarios-cb'>

Agora logo mais abaixo procure por </b:loop> antes dela feche a div com o código

</div>

Agora procure por ]]></b:skin> e coloque o seguinte código antes dela.


.comentarios-cb {
background:#E6E6E6; /* Cor do fundo */
border-top:1px solid #240B3B; /* Borda superior */
border-bottom:1px solid #240B3B; /* Borda inferior */
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Cor de fundo dos comentarios */
}
.comment-timestamp { /* Hora dos comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}



Salve sua alteração e confira o resultado.

Aplicar e personalizar "Formulário de comentário"

Formulário de comentário do Blogger, serve para colocar mensagens para seus visitantes antes da caixa de comentários, seja avisos, normas de comentários, ou uma mensagem qualquer, como no exemplo abaixo.

Adicionando mensagem:

1. No painel do Blogger, clique em "Configurações", para ser redirecionado até o painel de controle.

2. No menu "Configurações" clique em "Comentários".

3. Role até o final da página, e digite o texto desejado no campo "Mensagem do formulário de comentário".

4. Clique em "Salvar configurações" no final da página.

Você pode usar as seguintes tags:

Negrito: Use <b> e </b> entre o texto que deseje deichar em negrito.

Itálico: Use <i> e </i> entre o texto que deseja deichar em itálico.

Adicionar link ao texto: Use <a href='SEULINK'>TEXTODOLINK</a> para acrescentar um link ao texto.

Personalizar formulário de comentários:

1. Vá em "Design", na aba "Editar HTML", marque a opção "Expandir modelos de widgets" e procure por:

<p><data:blogCommentMessage/></p>

2. E substitua por:

<p class='comment-message' ><data:blogCommentMessage/></p>

3. Copie o código abaixo e cole antes da tag "]]></b:skin>".

.comment-message {
padding: 5px;    //--Altere o espaçamento--//
font-size: 12px;   //--Altere o tamanho da fonte--//
color: #000000;   //--Edite a cor das bordas e da fonte--//
border: 1px solid;   //--Edite as bordas--//
font-family: "Trebuchet MS",sans-serif;    //--Altere a fonte--//
}

4. Salve e pronto.

Bem é só isso, personalize ao seu gosto, se quiser pode colocar bordas arredondadas, e aplicar sombras, fica ao seu critério. Utilize da maneira que achar melhor este ótimo recurso do Blogger.