Come numerare i commenti in un blog su Blogger con delle icone personalizzate.

In un blog su Blogger potrebbe essere utile numerare i commenti, non solo per questioni puramente estetiche ma anche per esigenze pratiche. Infatti un singolo commento può essere immediatamente individuato dal suo numero. Questo vale soprattutto per i blog che sono molto commentati che non sono necessariamente anche i più visti. C'è da dire che in molti modelli questa personalizzazione è già presente.

Coloro che non avessero un template di questo genere e fossero interessati a personalizzarlo in questo senso possono dare uno sguardo al post delle icone numerate nel mio blog di prova. Accanto ai commenti che ho inserito come prova si vede una immagine con un numero progressivo

Dico subito che è ulteriormente personalizzabile l'icona, la sua posizione, il colore dei numeri in situazione normale e quando si puntano con il mouse.

Andare su Layout > Modifica HTML e salvare il modello completo. Espandere i modelli widget e cercare la riga di codice

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

e, immediatamente sopra, incollare quest'altra riga

<script type='text/javascript'>var CommentsCounter=0;</script> <!-- NUMERO COMMENTI INIZIO -->

come mostrato dallo screenshot

 

Successivamente cercare questo codice

 <data:commentPostedByMsg/>

e, subito sopra, incollare quest'altro codice

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

come mostrato dallo screenshot

Salvare il modello. Dobbiamo adesso creare uno stile per le icone che visualizzeremo nei nostri commenti. Cercate la riga

</head>

e, immediatamente sopra, incollate il seguente codice

<!-- NUMERO COMMENTI INIZIO -->
<style type='text/css'>
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://goo.gl/1gmo) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 25px;
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: 15px;
font-weight: normal;
}

.comm-num a:hover, .comm-num a:active {
color: red !important;
text-decoration: none !important;
}
</style>
<!-- NUMERO COMMENTI FINE -->

Le personalizzazioni da fare sono le seguenti

1. white indica il colore del numero e può essere scelto a seconda del colore dell'icona. Ricordarsi di inserire i colori in lingua inglese, perché l'italiano non viene riconosciuto (black, blue, red, yellow, grey, green, ecc)
2. 50px e 48px sono le dimensioni che volete abbia la vostra icona e possono essere scelte in funzione del modello
3. 25px e -5px sono le distanze dal margine destro e dal margine alto dell'icona; questi numeri servono per posizionarla al meglio, dipendono dal template e possono sempre essere modificati in un secondo momento
4. red è il colore del numero quando viene puntato dal mouse ed è opportuno metterlo diverso dal colore precedente ma adatto a quello dell'icona
5. http://goo.gl/1gmo è l'URL dell'immagine che abbiamo scelto come icona. Da notare che ho accorciato l'URL con il servizio Goo.gl.

Ecco l'ultimo screenshot dell'inserimento

Non resta che salvare il modello per l'ultima volta.

Per agevolarvi nella scelta dell'icona più giusta ne posto una serie di 27

                       

 

                       

 

               

 

 

Per acquisire l'URL di quella più adatta al vostro modello o al vostro senso estetico, cliccateci sopra con il mouse e copiate l'indirizzo direttamente nella barra del browser. Questo potrà così essere sostituito a http://goo.gl/1gmo, nell'ultimo blocco di codice da inserire.

Fonti | Webaholic e Bloggerstop da cui ho preso anche le immagini delle icone.