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 

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

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

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

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.