Pubblicato il 11/05/11e aggiornato il

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

numerare commenti in blogger

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.





37 commenti :

  1. Seguo da tempo il tuo blog e lo trovo validissimo.
    Riguardo il numero progressivo nei commenti, non riesco a farlo funzionare.
    Ho provato (2 volte in giorni diversi), ma dice che c'è un errore.
    Secondo Blogger manca un tag di chiusura XML. ("...")
    Riproverò ancora.
    T.

    RispondiElimina
  2. @magocamillo Quando ti dà l'errore? Talvolta basta aggiungere una slash finale. Se ti succede con il secondo codice prova con questo
    <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>
    e fammi sapere. Ciao

    RispondiElimina
  3. Grazie, Ernesto T.
    Sicuramente è una stupidaggine, seguirò i tuoi consigli e ti terrò informato.
    T.

    RispondiElimina
  4. Problema risolto.
    Una mia disattenzione, un errore nel copia incolla.
    Grazie Ernesto, sei stato prezioso.
    T.

    RispondiElimina
  5. Ecco un'altra cosa utile che ancora mi manca, anche se cerco di limitare l'inserimento di codici html nel mio modello perchè a volte ho strani conflitti che temo siano dovuti a qualcosa che ho messo, stranezze tipo interlinee che non vengono recepite o eliminate in modifica post se ho già formattato il testo con l'allineamento compatto...

    RispondiElimina
  6. Con Firefox tutto OK.
    ----
    Rimane un "piccolo" problema da risolvere.
    IE 8 non legge (almeno il mio) i numeri.
    Per quanto riguarda il sistema con le icone, IE 8 funziona correttamente.

    RispondiElimina
  7. @magocamillo I numeri si vedono con IE8 e con IE9 solo che, come spesso accade con i browser Microsoft, le distanze non vengono rispettate perfettamente. Può darsi che i numeri ti siano andati fuori layout

    RispondiElimina
  8. Con FF appaiono i numeri ma non rispettano i margini di posizione. Esce subito dopo il nome del commentatore. Come mai?

    Ti invio il css modificato:
    .comm-num {
    color: #666666 !important;
    text-decoration: none !important;
    float: left;
    display: block;
    margin-left: 1px;
    margin-top: 2px; /*posizione del contatore*/
    text-align: center;
    font-family: "Comic Sans MS","Trebuchet MS",Verdana;
    font-size: 12px;
    font-weight: normal;
    }

    RispondiElimina
  9. Ernesto se può servire a qualcuno... avrei risolto:

    Io ho un CSS esterno, inserendo la classe all'interno delle classi dei commenti (e non a piè pagina come avevo fatto) FF lo legge. Non è proprio precisissimo nei margini ma può bastare.

    RispondiElimina
  10. Grazie Ernesto
    Il tuo commento coincide con le modifiche da me apportate.
    Anche io avevo pensato ad un problema del genere.
    Ho provato prima con "left" (visibile) poi con "center" (visibile) ed infine modificando le distanze con "right" (adesso visibile).

    RispondiElimina
  11. Come sempre molto utile e preciso nella spiegazione. Grazie. :)

    Ciao grande Parsi. :D

    LeNny.

    RispondiElimina
  12. Un immenso grazie! Come sempre preciso e molto utile.

    Ciao Parsi. :)

    LeNny.

    RispondiElimina
  13. Ciao..volevo solo annotare come Blogger dopo questi giorni di inattività mi abbia ripristinato il modello senza gli utlimi due aggiornamenti che avevo fatto, tra cui proprio la numerazione dei commenti.
    Assurdo :)

    RispondiElimina
  14. @Ernesto T.

    Dovrebbe mancare un ; all'altezza della riga di comando javascript

    document.write(CommentsCounter);

    RispondiElimina
  15. @Auto di...
    E' successo a tutti. Le modifiche dopo l'orario indicato nel post sono state eliminate hanno fatto un backup di ripristino del modello prima di quell'ora

    @Marco Robutti
    Dal punto di vista della giusta sintassi del codice javascript hai perfettamente ragione. Però funzionava lo stesso :)

    RispondiElimina
  16. Perfetto Ernesto.

    Grazie per tutto

    RispondiElimina
  17. è possibile aggiunger un comando per dare al numero un particolare tipo di carattere (arial, times new roman, ecc...)? se si, quale? GRAZIE E COMPLIMENTI!!

    RispondiElimina
  18. domanda superflua...non avevo letto bene il codice...scusate!..ciaooo

    RispondiElimina
  19. E' possibile, caro Ernesto, inserire un nuovo link "posta un commento" anche sotto il titolo del post giusto per facilitare l'utenza che ha già letto l'articolo?

    Grazie per tutto.

    RispondiElimina
  20. @francescomisc
    Tutto è possible ma non ci avevo mai pensato e non sono a conoscenza di tutorial di altri blogger in tal senso.

    RispondiElimina
  21. @The Fashion Twice
    Per prima cosa non mi spammare lasciando link attivi perché altrimenti sono costretto a eliminare i tuoi commenti.
    Sei sicura di aver cliccato su espandi modelli widget quindi su F3 o su Ctrl+F? In questo modo è molto più semplice trovare il codice.

    RispondiElimina
  22. Ho lasciato il link solo per essere più facilmente contattabile....
    ad ogni modo, mi pare ovvio che ho usato quel metodo per cercare i codici... ma quando seguo le guide online di html non riesco mai a trovarli! pare che io usi dei templates difettosi XD

    RispondiElimina
  23. @The Fashion Twice
    Quando si scaricano dei template non ufficiali bisogna mettere in conto queste problematiche. Gli sviluppatori mettono il codice un po' come vogliono :P

    RispondiElimina
  24. Scusa ma non mi trova questo codice:


    Come posso fare?
    Grazie!

    RispondiElimina
  25. @Auroryna_98
    Forse non hai messo la spunta su espandi modelli widget

    RispondiElimina
  26. fatto: messo il numerino anche io!!! ma quante belle cose interessanti che ci sono in questo tuo sito!!!
    ora metto l antipixel nei miei bottoni 'Varie' perchè troppo utili queste nozioni!!

    RispondiElimina
  27. @Fioredicollina
    Grazie lo apprezzo molto.

    RispondiElimina
  28. Salve! Sono molto contenta della numerazione commenti e vorrei chiederti se cambio lo sfondo o modello del template (sempre scelto da quelli di blogger) devo di nuovo rimettere tutto questo codice? o automaticamente mi va nel nuovo? grazie.

    RispondiElimina
  29. @Fioredicollina
    Delle volte azzera tutto quindi per sicurezza salva il modello.

    RispondiElimina
  30. Immaginavo....grazie x la solerte risposta!:-)

    RispondiElimina
  31. Ernesto buongiorno, mi è successa una cosa molto strana, dall'oggi al domani i numeri dei commenti sono scomparsi... eppure ho ricontrollato il codice ed è tutto al suo posto...! non ho modificato ne sfondo ne template, proprio non riesco a capire... Hai qualche idea?

    Grazie!

    Federica

    www.laragazzadaicapellirossi.com

    RispondiElimina
  32. @Federica
    Per prima cosa ti chiedo di non lasciare link attivi nei commenti altrimenti sarò costretto a cancellarli. La ragione della scomparsa sta nella nuova funzionalità di Blogger relativa alla nidificazione dei commenti
    http://www.ideepercomputeredinternet.com/2012/01/blogger-introduce-le-risposte-e-la.html
    Dovremo rifare la procedura sempre ammesso che funzioni nuovamente

    RispondiElimina
  33. ooohhh ma non mi piace cosi!!!!!!!!!!!!!!!!!!!proprio ora che avevo messi i numerini ai commenti !!! uffa!!!! si puo' variare?

    RispondiElimina
  34. Perdonami Ernesto, non volevo spammare, avevo pensato che poteva farti comodo il link del blog per evntuali controlli/statistiche! la prossima volta eviterò! ;)
    corro a leggermi il post, grazie per la tua disponibilità!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.