Pubblicato il 03/01/11 - aggiornato il  | 27 commenti :

Inserire una icona con il numero dei commenti in un blog su Blogger.

Il visualizzare accanto al titolo dell'articolo una icona che mostri anche il numero dei commenti che sono stati postati, è una caratteristica di molti template. Quelli che hanno un modello che non la prevede ma gli piacerebbe averla, possono seguire queste semplici indicazioni. Ecco come potrebbe apparire un articolo con questa feature
icona-numero-commenti
Sulla destra del titolo del post, si visualizza una icona che mostra anche il numero dei commenti che ha ricevuto. Nell'icona ci sarà anche un collegamento alla sezione dei commenti dell'articolo a cui si riferisce.
Andate su Design > Modifica HTML e salvate il modello completo per eventualmente ripristinare la situazione precedente alle modifiche. Espandete i modelli widget e cercate la linea </head> e, immediatamente sopra, incollate questo codice
<!--ICONA NUMERO COMMENTI INIZIO-->
<link href='https://sites.google.com/site/scriptperilblog/javascript-2/icona-viola.css' media='screen' rel='stylesheet' type='text/css'/>
<style>.IconaCommenti a:link{color:#FFFFFF;} .IconaCommenti a:visited{color:#003366;} .IconaCommenti a:hover{color:#FF0000;}</style>
<!--ICONA NUMERO COMMENTI FINE - www.ideepercomputeredinternet.com-->
Cercate adesso il codice
<b:if cond='data:post.title'>
e, subito sotto, incollate queste due righe
<span class='IconaCommenti'><a expr:href='data:post.addCommentUrl'>
<data:post.numComments/></a></span>
come mostrato nello screenshot seguente
codice-icona-numero-commenti
Salvate il modello e l'immagine con il numero dei commenti apparirà accanto al titolo in ciascuna pagina. Con il codice precedente l'icona avrà questa forma
icona-commenti
Se volete una icona di diverso colore, dovete semplicemente sostituire l'URL del file CSS evidenziato di rosso con i seguenti
https://sites.google.com/site/scriptperilblog/javascript-2/icona-celeste.css per          
https://sites.google.com/site/scriptperilblog/javascript-2/icona-gialla.css per            
https://sites.google.com/site/scriptperilblog/javascript-2/icona-grigia.css per            
https://sites.google.com/site/scriptperilblog/javascript-2/icona-marrone.css per        
https://sites.google.com/site/scriptperilblog/javascript-2/icona-sfumata.css per         
https://sites.google.com/site/scriptperilblog/javascript-2/icona-verde.css per            
https://sites.google.com/site/scriptperilblog/javascript-2/icona-viola.css per             

Si possono personalizzare anche i colori dei numeri in questo modo:
  1. a:link{color:#FFFFFF;} definisce il colore del numero
  2. a:visited{color:#003366;} definisce il colore di un numero dopo che si sono visualizzati i commenti a cui si riferisce
  3. a:hover{color:#FF0000;} definisce il colore del numero quando si punta il link con il mouse
I codici esadecimali dei colori che ho inserito possono essere sostituiti con altri più adatti al vostro blog.
Se la posizione della icona non è quella ottimale per il vostro sito, allora si può incollare nel browser l'indirizzo del file CSS che avete prescelto, cliccare su Invio e scaricare il file. Dovrete quindi aprirlo con Notepad++. Vedrete un codice di questo genere
.IconaCommenti {
    background: url("
http://lh4.ggpht.com/_nT13UtBmmiU/TSGdk1JfNqI/AAAAAAAARFU/F47rCL4Nnf0/marrone.png") no-repeat scroll right top transparent;
    color: #FFFFFF;
    float: right;
    font-family: Trebuchet,Arial,helvetica,sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 50px;
    line-height: 40px;
    padding: 0 0 0;
    text-align: center;
    width: 50px;}

.IconaCommenti a:link{color: #333333;}
.IconaCommenti a:visited{color: #333333;}
.IconaCommenti a:hover{color: #333333;}

in cui potranno essere modificati alcuni elementi riguardo alle dimensioni e al padding. Come vedete di default i numeri saranno di colore grigio (#333333) e così si vedranno nel caso non inseriate la porzione di codice che va da <style> a </style>. Dopo aver fatto le modifiche opportune, il file dovrà essere salvato quindi caricato su Google Sites mediante l'opzione Schedario. Si dovrà acquisirne l'URL da immettere nel codice al posto dell'altro.
In passato avevo già presentato delle personalizzazioni simili a questa con delle icone un po' diverse. Chi è interessato può consultare i post


27 commenti :

  1. L'icona compare sul blog ma non è interattiva. Come fare ad aprire la pagina dei commenti quando ci si clicca sopra?
    Thanks...

    RispondiElimina
  2. @Graziano
    Vai in questo blog
    http://sonouningenuo.blogspot.com/
    E' installata la stessa icona che hai scelto tu e funziona correttamente.
    Prova a verificare il codice. Ho visto che ti manca il collegamento, quindi ci dovrebbe essere qualche problema con quello inserito per secondo.
    Ciao

    RispondiElimina
  3. Sei un grande! Complimenti! Adesso provo

    RispondiElimina
  4. non sono riuscita a inserire l'icona di diverso colore. Non devo convertire il codice in XML? Fammi sapere, ciao!

    RispondiElimina
  5. @Valentina
    Non c'è da convertire nulla, solo da sostituire un URL. Dimmi quale colore non ti viene così controllo se hai sbagliato tu o se non funziona lo script

    RispondiElimina
  6. Ciao parsifal,
    su explorer funziona perfettamente, ma se guardo il mio sito (http://fantacalciopvo.blogspot.com) da firefox o chrome non funziona il link dei commenti...c'è una soluzione? mi puoi aiutare?

    Grazie mille per tutti i tuoi preziosi consigli

    RispondiElimina
  7. @Menga
    E' una cosa strana che è comune anche ad altri blog, forse dipende dal modello. Prova questo foglio di stile
    https://sites.google.com/site/scriptperilblog/javascript-2/icona-sfumata1.css
    Ciao

    RispondiElimina
  8. Purtroppo non funziona ugalmente. Vabbè, l'importante è l'icona con il numero, poi per leggere i commenti possono sempre vederli sotto.
    Grazie comunque e buona giornata!

    RispondiElimina
  9. @Menga
    Prova con quest'altro metodo
    http://www.ideepercomputeredinternet.com/2010/01/come-inserire-una-icona-con-il-numero.html
    e per l'icona inserisci questo URL
    http://lh5.ggpht.com/_nT13UtBmmiU/TSGdk5lUhLI/AAAAAAAARFY/Z0WpZqE9GIA/sfumato.png
    Ciao

    RispondiElimina
  10. Ciao Parsi e Buon Anno. :)

    Ho fatto dei test e volevo chiederti se è nornale che questo script ci metta ben 2 secondi pieni ogni volta a caricarsi sulla pagina web. Da cosa dipende?

    Ciao.

    RispondiElimina
  11. Dimenticavo... C'è la possibilità di leverare l'icona dalle pagine statiche e lasciarla solo per i commenti agli articoli? Guarda nel mio menu in testa al Blog, così capisci meglio. Tnx. :)

    Ciao.

    RispondiElimina
  12. @LeNny
    Per la lunghezza di caricamento non ti saprei dire. E' uno script molto semplice e comporta il caricamento solo di una piccola icona. Magari nella homepage, se hai 10 articoli allora sono 10 icone da caricare e può darsi che rallenti.
    Per non visualizzare l'icona nelle pagine statiche puoi seguire questo post
    http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html
    Devi inserire la riga relativa a "non visualizzare il widget nelle pagine statiche" prima del secondo codice cioè prima di < span...
    e inserire la classica riga di chiusura < /b:if > alla fine.
    Non ho testato ma dovrebbe funzionare.
    Ciao

    RispondiElimina
  13. Grazie. Lo avevo cercato ma non riuscivo a trovare l'articolo di riferimento. :)

    Ciao Parsi.

    :)

    RispondiElimina
  14. mi piacerebbe inserire quella azzurra, in tono con il mio blog, grazie!

    RispondiElimina
  15. Grazie mille per l'utilissimo post, Parsifal, come sempre.
    Quanto al numerino non cliccabile, credo di aver svelato l'arcano. Almeno nel mio blog, il numero diventa NON cliccabile quando il titolo del post va su due righe.

    RispondiElimina
  16. Ci sono riuscita, scusami ma mi sa che avevo sbagliato qualcosa io! Grazie!

    RispondiElimina
  17. ho usato questo tipo di icone e devo dire molto belle e di "presa"
    ho visto che in alcuni siti sono cliccabili e portano alla pagina dei commenti .. si può fare con queste??
    sarebbe una scorciatoia per entrare nei commenti e rispondere o commentare di nuovo

    RispondiElimina
  18. @Tex Willer
    Il numero dovrebbe avere il link e portare di filato ai commenti
    Prova a vedere se il numero è non cliccabile anche se il titolo è di una sola riga. Perché taluni hanno notato che il collegamento sparisce con titoli su due o più righe. E' una problematica relativa ai singoli template.

    RispondiElimina
  19. Modello Awesome Inc
    confermo non cliccabile anche su una riga sola di titolo
    Modello Ethereal
    idem con patate
    quest'ultimo poi non mostra nemmeno le stelline di gradimento post nonostante siano state spuntate nel modello semplice
    idem non funziona

    RispondiElimina
  20. grazie!!!ho visto i 3 differenti metodi per istallare l'icona dei commenti,questo è stato l'unico che mi ha funzionato bene.soprattutto lo consiglio perchè si adatta automaticamente all'articolo.solo una domanda:sapete se è possibile porre l'icona in fondo al post?

    RispondiElimina
  21. @Tutti...
    Puoi inserire il codice prima o dopo questa linea
    < div class='post-footer' >
    Altre posizioni le puoi trovare in questo post
    http://www.ideepercomputeredinternet.com/2010/06/come-personalizzare-i-pulsanti.html

    RispondiElimina
  22. Ottimo post! inizialmente ho seguito i consigli che hai postato su http://www.ideepercomputeredinternet.com/2010/01/come-inserire-una-icona-con-il-numero.html poi, siccome non riuscivo a centrare perfettamente il numero all'interno dell'immagine, mi sono affidato a quest'altra tua guida.
    Grazie

    RispondiElimina
  23. Aiuto!!
    Vorrei visualizzare questa nuvoletta solo sulla home page, dove sono i miei post, e non su tutte le altre pagine, quindi ho seguito le indicazioni scritte qui al commento 12 per LeNny.... ma non mi riesce!
    Ho provato inserendo i seguenti codici (seguiti dal di chiusura):

    Per visualizzare il widget solo in Homepage
    Per visualizzare il widget solo nei post
    Per non visualizzare il widget nelle pagine statiche

    Ma a quanto pare non succede nulla! Qualcuno mi può dare una mano?
    Il mio blog è questo: http://montessori-vialeadriatico.blogspot.it/
    Grazie

    RispondiElimina
    Risposte
    1. @AlbertoLaurenti
      Invece del codice

      <span class='IconaCommenti'><a expr:href='data:post.addCommentUrl'>
      <data:post.numComments/></a></span>

      incolla nel punto indicato nel post il codice seguente

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <span class='IconaCommenti'><a expr:href='data:post.addCommentUrl'>
      <data:post.numComments/></a></span>
      </b:if>

      e le nuvolette si vedranno solo in homepage

      Elimina
    2. Grande!
      Sbagliavo a mettere il codice di chiusura.
      Grazie Ernesto!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy