Numerar os novos comentários Blogger sem JavaScript. Opção com subíndice

Aprenda a numerar o novo sistema de comentários do Blogger sem JavaScript.

Agora que desfrutamos do novos cometários a maioria dos scripts instalados anteriormente para numerá-los parou de funcionar, assim creio que é um momento ideal para apresentar uma alternativa na minha opnião muita mais vantajosa.

Siga o @bloggermin agora e fique por dentro das novidades para o seu blog. E curta nossa página no Facebook.

 

Se trata de uma interessante propriedade CSS2 chamada content que nos permitir inserir praticamente qualquer tipo de contéudo à frente ou à atrás de um elemento qualquer e que inclue um não menos precioso complemento denominado counter.

A combinação de ambos é o que vamos criar um contador e colocá-lo em cada comentário. E como vamos somente utilizar CSS, o sistema terá um carregamento muita mais rápido do que com JavaScript.

Se você quiser tentar agora e ver como isso funciona em tempo real, apenas tem que inserir no CSS do modelo (antes de ]]></b:skin>) o seguinte código:

.comments-content {
counter-reset: contarcomentarios;
}

.comment-thread li:before {
content: counter(contarcomentarios);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}

Entendendo o código:

1. Quando se  iniciar os comentários no bloco geral (.comments-content) um contador que chamamos de contarcomentarios ativa e obtém um valor inicial de 1.
2. Então, toda vez que o fluxo do código passa por um comentário de qualquer nível, seja um comentários principal ou uma resposta (.comment-thread li), content levará para a frente (:before) do corpo do comentário, o número para o qual será contado no momento.
3. Em seguida, é aumentado de uma unidade o contador (counter-increment). 

Na próxima vez que o código ler outro comentário ou que o mesmo, vai passar de novo pelo .comment-thread li, se repetirão as etapas 2 e 3, mas cada vez com um valor mais alto.

O resto do estilo (float/font-size/color) serve apenas para dar estilo a numeração que será exibida. Se, devido a outras mudanças em seus comentários o número não permanecer no lugar exato onde você deseja, pode adicionar margens para realocá-lo.

Quando você testar, verá que são numerados todos os comentários e respostas sucessivamente, sem distinção de se são do primeiro ou do segundo.

Isso para mim e provavelmente para outras pessoas que com frequência usam esses números como uma referência para observações específicas, pode ser uma desvantagem. Lembre-se de que quando se introduz uma reply, todos os comentários e respostas que estiver abaixo se remuneram.

Para corrigir, restruturamos o código anterior para fazer uma numeração distinta como se fosse capítulos e seções, assim temos que mergulhar em outras classes distintas para distinguir quando contar comentários (contarcomentarios) e quando respostas (contarbis).

.comment-thread ol {
counter-reset: contarcomentarios;
}
.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}
.comment-thread ol ol {
counter-reset: contarbis;
}
.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;
color: #666666;
}

Se preferir outra apresentação para a numeração, você pode alterar o decimal e/ou lower-latin. Pelos possíveis valores:

• decimal: números decimais, começando por 1.
• decimal-leading-zero: números decimais iniciando com o zero (01, 02, 03, ..., 98, 99).
• lower-latin: letras minúsculas (a, b, c, etc.).
• upper-latin: letras maiúsculas (A, B, C, etc.).
• lower-roman: algarismos romanos em minúsculas (i, ii, iii, etc.).
• upper-roman: algarismos romanos em maiúsculas (I, II, III, etc.).