Pubblicato il 30/01/10 - aggiornato il  | 12 commenti :

Come inserire una icona con il numero dei commenti accanto al titolo di ogni articolo in un blog su Blogger.

In un precedente articolo avevo illustrato come inserire delle icone numerate nei commenti del blog e avevo anche postato una dimostarione nell'articolo sulla numerazione dei commenti. Se adesso andate nel mio blog di demo vedrete che le stesse icone sono presenti anche in Homepage accanto al titolo di ogni post 
icone-numero-commenti
Il metodo che vado ad illustrare consente di inserire l'icona con il numero dei commenti ricevuti da ciascun articolo e sono possibili le seguenti personalizzazioni
  1. Si può scegliere l'icona che si desidera e anche le sue dimensioni, in questo post ne presento ventisette già caricate nel web
  2. Si può personalizzare la posizione dell'icona relativamente al layout del blog
  3. Si può scegliere il colore del numero che si visualizza dentro la stessa icona
Andate su Layout > Modifica HTML e salvate il modello completo. Dopo aver messo la spunta a "Espandi i modelli widget" cercate la riga

<h3 class='post-title entry-title'>
quindi, immediatamente sotto, incollate il seguente codice
<!--ICONE NUMERO COMMENTI INIZIO-->
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<!--ICONE NUMERO COMMENTI FINE - www.ideepercomputeredinternet.com-->
come mostrato dallo screenshot
icone-numero-commenti-blogger
Successivamente cercate la riga
</head> 
e, immediatamente sopra, incollate questo codice
<!--ICONE NUMERO COMMENTI INIZIO-->
<style type="text/css">
.comment-bubble {
float: right;
color: white !important;
background: url(http://public.blu.livefilestore.com/y1p4jsEcyWGgFNHqh2Rx0OrOsGvFXOwAdBWJ63vKCm6i_4PDTCMJzTk71PSzV_PcQYt858Oqxxr6hfly1c4m1vhLw/bivlu77.png) no-repeat;
width: 50px;
height: 48px;
font-size: 18px;
margin-top: -5px;
margin-right: 8px;
text-align: center;
}
</style>
<!--ICONE NUMERO COMMENTI FINE - www.ideepercomputeredinternet.com-->
come mostrato in un nuovo screenshot
numero-commenti
Non resta che salvare il modello e guardare il risultato. Le personalizzazioni da fare sono
  1. white è il colore del numero all'interno dell'icona. Si può usare qualsiasi altro colore, l'importante è usare l'espressione inglese (red, blue, black, green, ecc) 
  2. 50 e 48 sono le dimensioni dell'icona in larghezza e altezza e ovviamente possono essere variate a seconda delle esigenze del nostro modello. Questi valori devono essere modificati anche nel caso non fosse perfettamente centrato il numero all'interno della stessa icona 
  3. -5px e 8px rappresentano la distanza in pixel dal margine alto e dal margine destro del layout del post e possono essere modificati, magari in un secondo tempo per posizionare al meglio l'icona
  4. 18px rappresenta la dimensione del carattere del numero all'interno dell'icona
  5. L'URL evidenziato in rosso è quello della icona che si è scelta per il nostro blog e può essere sostituito con un altro di una immagine caricata da noi su un hosting tipo Skydrive. Per agevolare coloro che volessero installare questa personalizzazione qui di seguito inserisco 27 icone di diverso colore e genere

                       

                       

               
Per acquisire l'URL di quella che vogliamo utilizzare è sufficiente cliccarci sopra e copiare l'indirizzo nella barra del browser
icona-commenti-2
Questa fa parte di quelle modifiche che non aggiungono nulla in termini di posizionamento e usabilità ma rendono il blog più carino e suscitano una buona impressione nei lettori.



12 commenti :

  1. Grazie per questa utile applicazione. Se volessi posizionarla in fondo al post anzichè in alto, come potrei fare? Grazie

    RispondiElimina
  2. @Enzo
    invece di posizionare il codice sotto la riga < h3 class='post-title entry-title' > lo devi incollare sotto a < div class='post-footer' >
    NB. Nell'inserire i codici ho aggiunto degli spazi perché altrimenti il commento non veniva postato

    RispondiElimina
  3. Ciao , grazie mille per la guida !!
    ho provato ad usarla , ed effettivamente funziona , ma non riesco in nessun modo a centrare il numero all'interno della nuvola....mi puoi aiutare ?
    www.spazioandroid.com

    RispondiElimina
  4. @damigor
    Prova a sostituire la riga presente nella seconda parte del codice
    text-align: center;
    con
    text-align: right;
    Ciao

    RispondiElimina
  5. Ciao, grazie per la tua risposta! Ho provato a fare sia left che center ma anche Right, e il testo resta sempre li, ed in più il ridimensionamento Non funziona , ne quanto riguarda il testo, Quantomeno l'icona

    RispondiElimina
  6. @damigor
    Come ultimo tentativo prova a aumentare i pixel del margin-right e a inserire questa riga
    text-align: right; !important;
    al posto di
    text-align: center;
    E' strano che il tuo modello non prenda questi comandi...

    RispondiElimina
  7. Grazie mille per la tua disponibilità e la gentillezza ...ma come potrai vedere , non succede nulla. Non vorrei che fosse sbagliata la posizione dove ho inserito il codice??dato che non avevo proprio la giusta stringa h3 post.title , ma era leggemrente diversa ...

    RispondiElimina
  8. non riesco proprio a farla funzionare sul mio blog...il problema forse è il template? :-(

    RispondiElimina
  9. @Dony
    Hai già provato con quest'altro metodo?
    http://www.ideepercomputeredinternet.com/2011/01/inserire-una-icona-con-il-numero-dei.html

    RispondiElimina
  10. ci sono riuscita (con questo metodo) e si vede ma il numero è centrato troppo in alto,ho provato a modificare le dimensioni della figura ma mi rimane così,pazienza! Si potrebbe mettere il contatore sulla sinistra fuori dal post? (scusa se rompo,ti seguo sempre e i tuoi post mi aiutano tantissimo,ma non sono pratica >_< )

    RispondiElimina
  11. @Dony
    Ho visto il tuo blog, si tratta proprio di una sottigliezza. Comunque per abbassare il numero o per spostarlo più sulla sinistra puoi modificare i valori di margin-top e margin-right. Prova togliendo o aggiungendo un paio di pixel per trovare la giusta posizione.
    Per mettere l'icona sulla sinistra si può sostituire float: right; con float: left; ma bisogna cambiare anche gli altri parametri che determinano la posizione.
    Ciao

    RispondiElimina
  12. grazie per i chiarimenti! Ho cambiato un pò i parametri,il risultato non mi viene mai perfetto ma va bene! ^_^

    RispondiElimina

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