Comentários enumerados no Blogger

Com esse tutorial você irá aprender a numerar os comentários do seu blog (aqui esta função está implementada à muito tempo). Essa funcionalidade existe no Wordpress por padrão, mas também pode ser implementada aqui no Blogger.

Como sempre, recomendo fazer o backup do template do seu blog, porque se ocorrer algum problema, você poderá restaurar o modelo.
Instruções:
Entre no Painel de Controle do Blogger, clique em Layout -> Editar HTML, clique na caixinha Expandir Modelos de Widgets e procure por este código no seu template: <dl id='comments-block'>
E abaixo desse código adicione:
<script type='text/javascript'>var contadorComentarios=0;</script>
PS: Se não achar o código <dl id='comments-block'>, tente <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Faça a mesma coisa com esse código: <b:loop values='data:post.comments' var='comment'> e abaixo dessa linha adicione:
<div class='' expr:id='data:comment.id'>
Agora você terá que encontrar o seguinte código: <data:commentPostedByMsg/>
Após essa linha adicione:
<span class='comentacontador'>
<a expr:href='"#comment-" + data:comment.id' title='Link para esse comentário'>
<script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios)
</script>
</a>
</span>
Para terminar essa etapa da instalação, procure pela última tag </dd> e após ela adicione o seguinte trecho:
<script type='text/javascript'>
ContarC('<data:comment.id/>')
</script>
</div>
O Código deverá ficar assim:
</dd>
<script type='text/javascript'>
ContarC(&#39;<data:comment.id/>&#39;)
</script>
</div>
</b:loop>
</dl>
Agora adicione o código abaixo antes da tag </head>:
<style type='text/css'>
.comentacontador {
float: right;
display: block;
width: 50px;
margin-top: -25px;
padding: 5px 0 0;
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 36px;
font-weight: normal;
}

.comentacontador a:link, .comentacontador a:visited {color: #456 !important;}
.comentacontador a:hover, .comentacontador a:active {color: #728200 !important;}

.comentarioPar {
margin: 5px 0;
padding: 5px 10px 0;
background-color: #ececec;
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
}

.comentarioImpar {
margin: 5px 0;
padding: 5px 10px 0;
background-color: #e1e1e1;
border-bottom: 1px solid #dadada;
border-top: 1px solid #dadada;
}
</style>

<script type='text/javascript'>
function ContarC(cual) {
var resto;
resto = contadorComentarios % 2;
if (resto == 0)
document.getElementById(cual).className='comentarioPar'
else
document.getElementById(cual).className='comentarioImpar'
}
</script>
Os códigos das cores em laranja, deve ser personalizado de acordo com o seu blog, ele está personalizado de acordo com a caixa de comentários do meu blog. Então, mão na massa!

Demonstração:
Comentários enumerados no Blogger
Comentários enumerados no Blogger Comentários enumerados no Blogger Reviewed by Fabricio Araujo on 19:03:00 Rating: 5

4 comentários:

  1. po velho
    li o texto inteiro e votei pq achava que o titulo era "comentarios remunerado..."
    hauahauhau
    mas vlw vlw

    abraços

    ResponderExcluir
  2. Muito útil, parabêns.

    ResponderExcluir
  3. Muito útil, parabêns.

    ResponderExcluir

Adicione seu comentário nesse post.
- Receba a resposta por e-mail, clique em inscrever-se por e-mail.
- Não use palavras de baixo escalão.
- Quer mostrar seu blog? Use a opção Open ID.
- Se selecionar a opção Nome/URL na URL digite http:// na frente do endereço do seu blog.
- Quer falar somente com o Autor? Então clique Aqui.

Muito obrigado por sua visita e volte sempre!

Tecnologia do Blogger.