Pubblicato il 16/01/12e aggiornato il

Come inserire il numero del contatore dei commenti nelle discussioni nidificate di Blogger.

Una delle ragioni per cui molte persone non hanno ancora scelto di passare alla nuova impostazione dei commenti di Blogger è quella che si vengono a perdere diverse personalizzazioni interessanti quali le emoticon di Facebook o il contatore dei commenti. Vista la gran mole dei CSS a disposizione degli utenti ritengo che sarà comunque trovata una soluzione per reinserire la maggior parte di queste personalizzazioni.

Cominciamo con quella del numero accanto a ciascun commento che ha avuto un grande successo tra i lettori di questo blog. La soluzione ci è data direttamente dalle direttive del W3C per i contatori e tale procedura dovrebbe portare a visualizzare il numero del commento con tutti i browser più recenti. Come ho già detto nei precedenti articoli che ho dedicato a questo argomento, lo stile del singolo commento è determinato da quello della citazione o blockquote. Creeremo quindi una classe padre per i commenti

.comments {
counter-reset: contatore-commenti;
}

che ho chiamato contatore-commenti. Per creare la regola di numerazioni dei commenti sarà necessaria un'altra classe con lo pseudo selettore :after che sarà applicato ai blockquote dei commenti che potremo personalizzare a piacere

.comments blockquote:after {
content: counter(contatore-commenti, decimal);
counter-increment: contatore-commenti;
font-size: 26px; /* Dimensioni del numero*/
color: #1B93C1 !important; /* Colore del numero */
font-family: Century Gothic,Lucida Grande,Arial,Helvetica,Sans-Serif,Trebuchet MS; /* Tipo di Font */
font-weight: bold; /* Grassetto */
font-style: italic; /* Corsivo */
text-align: center;
float:right;
margin-right:45px;
margin-left:15px;
margin-top:-6px;
}

Accanto a ciascun valore è presente il commento in verde che ne indica il significato. I numeri dei tre margini in basso servono per posizionare al meglio il commento nel layout e possono essere calibrati in funzione del nostro modello. Entrambi questi codici devono essere incollati nel modello. Si va su Modello > Backup/Ripristino e si salva il modello completo per un backup di sicurezza. Quindi si torna su Modello > Modifica HTML > Procedi e si espandono i modelli widget. I due codici possono essere incollati subito sopra la riga ]]></b:skin>. Se i numeri dei commenti non si vedessero correttamente si cercherà allora

<b:includable id='threaded_comment_css'>
  <style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}

e si sostituirà con quest'altro codice

<b:includable id='threaded_comment_css'>
  <style>
.comments {
  counter-reset: contatore-commenti;
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments blockquote:after {
content: counter(contatore-commenti, decimal);
counter-increment: contatore-commenti;
font-size: 26px; /* Dimensioni del numero*/
color: #1B93C1 !important; /* Colore del numero */
font-family: Century Gothic,Lucida Grande,Arial,Helvetica,Sans-Serif,Trebuchet MS; /* Tipo di Font */
font-weight: bold; /* Grassetto */
font-style: italic; /* Corsivo */
text-align: center;
float:right;
margin-right:45px;
margin-left:15px;
margin-top:-6px;
}

Dopo aver salvato il modello si vedrà il numero dei commenti accanto a ciascuno di essi

numero-commenti-nidificati-blogger

Una problematica non indifferente che si pone con questo procedimento è che, se si inserisce una risposta in un commento che non sia l'ultimo postato, varierà la numerazione dei commenti. Credo che in futuro dovremo cercare di numerare le discussioni invece dei singoli commenti.





16 commenti :

  1. io prima di inserire il numerino commenti (che mi piace molto) vorrei prima che si modificasse l'oraio e il giorno come prima. vedo che qui da te è tutto ok ma da me no...cosa devo fare? pensavo si 'aggiustasse' in automatico!

    RispondiElimina
  2. @Fioredicollina
    Ho ripristinato il modello senza commenti nidificati per adesso visto che mi dava problemi di visualizzazione con IE8

    RispondiElimina
  3. mi dici come si fa a tornare al vecchio sistema commenti? allora chi si collega al mio blog con IE8 dici che non vede bene i commenti? se metto il sistema commenti come il tuo allora poi posso inserire sia i numerini che le emoticons? Grazie!!! :-)

    RispondiElimina
  4. @Fioredicollina
    In un tuo blog ho aperto questa pagina
    http://fioredicollina.blogspot.com/2012/01/foto-sfida-2-e-iniziativa-solidale.html
    e i commenti si vedono benissimo anche con IE8. Ci sono però dei problemi a postare con Rispondi però si può sempre commentare normalmente. Per tornare indietro devi fare il percorso inverso a quello che hai fatto. Personalmente io ho salvato il modello, come faccio sempre e come consiglio sempre di fare, e l'ho caricato. Ho anche salvato il modello con i commenti nidificati in modo da poterlo rimettere quando tutto sarà perfettamente funzionante.

    RispondiElimina
  5. grazie come sempre per la precisa e sollecita risposta, io pero' non avevo fatto nullaa e mi sono ritrovata con questo nuovo sistema nidificazione da un giorno all'altro!
    e mi sono spariti i numerini accanto che avevo sistemato qualche giorno prima!

    RispondiElimina
  6. Anch'io dopo un iniziale cambiamento sono tornato alle vecchie impostazioni...meglio aspettare che la situazioni si stabilizzi...

    RispondiElimina
  7. ora vedo di modificare per forza poichè ho ricevuto qst commento:
    "Ciao!
    non so se sono l'unica, ma ho problemi a postarti i commenti in qsti gg

    spero che si risolva presto il problema.."

    ecco, quindi mi spiace se ci sono amici che nn riescono a commentare!:-((

    RispondiElimina
  8. Non capisco come mai Blogger non abbia testato per bene e come è solito fare questa novità dei commenti nidificati. Per ora sono solo problemi per gli admin e per i lettori che usano diversi browser. Ma...

    Ciao Parsi. :)

    RispondiElimina
  9. Per domani ho idea di proporre la doppia numerazione di discussioni e risposte a un singolo commento. Per esempio 4.c è la terza risposta al quarto commento

    RispondiElimina
  10. Grazie Ernesto!!!! Giusto per conoscenza e statistica, i numeri sul mio blog si leggono benissimo sia con IE che con Firefox e Chrome

    Federica

    RispondiElimina
  11. Ciao,
    scusa posso chederti come sei riuscito a tornare ai commenti non nidificati?
    Mi risolverebbe molti problemi (soprattutto relativi alla data, all'ora e alla separazione dei commenti con una riga che ora è scomparsa).
    Grazie

    RispondiElimina
  12. @Josephuss
    I commenti nidificati non li avevo e li ho attivati con questo sistema
    http://www.ideepercomputeredinternet.com/2012/01/come-attivare-le-risposte-nidificate-ai.html
    Prima di farlo ho salvato il template che adesso ho ricaricato.

    RispondiElimina
  13. Grazie...un'altra cosa: seguento una tua guida avevo inserito una linea (tratteggiata)di separazione tra i commenti, che ora è scomparsa. C'è un modo per poterla rimettere? Perchè guardando il codice Html del template tecnicamente c'è, però poi nei fatti non compare.

    RispondiElimina
  14. @Josephuss
    E' cambiato tutto il codice quindi bisogna avere pazienza. Piano piano ripubblicherò articoli sulle varie personalizzazioni che sono andate perdute

    RispondiElimina
  15. Ciao, io ho utilizzato il primo codice ma la numerazione dei commenti me li segna tutti come 1 :( ho provato ad inserire il secondo codice che consigli ma non trovo la sostituzione nel mio HTML

    RispondiElimina
  16. @Iris Tinunin
    Questo articolo è superato. Segui quest'altro tutorial

    http://www.ideepercomputeredinternet.com/2012/01/numerazione-di-commenti-e-risposte-in.html
    che permette di inserire una doppia numerazione

    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.