Come visualizzare in Blogger il numero del commento a lato di ciascuno di essi.

Se si ha un blog con molti commenti, può essere utile avere un sistema di numerazione per riferirci a un commento specifico, indicandone appunto il numero d'ordine. Ho riadattato un metodo che avevo già utilizzato per mostrare le icone a lato del commento, optando per la visualizzazione di un semplice numero che forse è anche più elegante di una immagine.

Andate su Design > Modifica HTML e salvate il modello completo per un eventuale backup di ripristino. Espandete i modelli widget e cercate

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

immediatamente sopra, incollate quest'altra riga

<script type='text/javascript'>var CommentsCounter=0;</script>

Adesso cercate quest'altra riga

<data:commentPostedByMsg/>

e, immediatamente sopra, incollate quest'altro codice

<!-- NUMERO COMMENTI INIZIO -->
<span class='comm-num'>
<a expr:href='data:comment.url' title='Link al Commento'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter);
</script>
</a>
</span>
<!-- NUMERO COMMENTI FINE -->

Salvate il modello. Dobbiamo adesso creare uno stile per il numero dei commenti da visualizzarsi sulla parte destra. Ritornate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate questo codice

<!-- NUMERO COMMENTI INIZIO -->
<style type='text/css'>
.comm-num a:link, .comm-num a:visited {
color: #1B93C1 !important;
text-decoration: none !important;
float: right;
display: block;
margin-right: 45px;
margin-top: -5px; /*posizione del contatore*/
text-align: center;
font-family: &#39;Century Gothic&#39;,&#39;Lucida Grande&#39;,Arial,Helvetica,Sans-Serif,Trebuchet MS;
font-size: 26px;
font-weight: bold;
font-style: italic;
}
.comm-num a:hover, .comm-num a:active {
color: #940F04 !important;
text-decoration: none !important;
}
</style>
<!-- NUMERO COMMENTI FINE - http://www.ideepercomputeredinternet.com  -->

Salvate nuovamente il modello. Le parti da personalizzare sono evidenziate di rosso e riguardano

1. color: #1B93C1 - il colore del numero (leggi i codici dei colori)
2. margin-right: 45px; e margin-top: -5px; - la posizione del numero rispetto alla parte alta e a quella destra
3. font-size: 26px; - la dimensione del carattere del numero
4. font-weight: bold; e font-style: italic; - sono rispettivamente il grassetto e il corsivo. Le linee si possono eliminare se non interessano
5. color: #940F04 - è il colore del numero quando quando viene puntato dal mouse
6. 'Link al Commento' - è il tooltip che si visualizza quando si punta il numero con il mouse

Lo screenshot precedente mostra come a ciascun commento venga associato il suo numero d'ordine. Volendo si può anche inserire una linea di separazione tra commento e commento, e visualizzare il link Rispondi per creare collegamenti ad altri commenti.