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

COMENTÁRIOS

Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Numerar os novos comentários Blogger sem JavaScript. Opção com subíndice
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.
http://3.bp.blogspot.com/-k-b5SucEjdA/T9U9uNnlsOI/AAAAAAAAAbs/Nbu4ceDO948/s1600/avatares+redondos.PNG
http://3.bp.blogspot.com/-k-b5SucEjdA/T9U9uNnlsOI/AAAAAAAAAbs/Nbu4ceDO948/s72-c/avatares+redondos.PNG
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/05/numerar-novo-sistema-de-cometarios.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/05/numerar-novo-sistema-de-cometarios.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar