Come mostrare una icona con il numero dei commenti accanto al titolo del post in Blogger.

Come mostrare accanto al titolo di un post un fumetto con il numero dei commenti che detto articolo ha ricevuto. Si può mostrare solo nella versione desktop o anche in quella mobile, in tutte le pagine o solo in homepage.

L'obiettivo di questo articolo è quello di illustrare come si possa mostrare una icona con il numero dei commenti ricevuti accanto al titolo del post in un sito su piattaforma Blogger. Si può decidere di mostrare icona con numero dei commenti solo nella homepage, nelle pagine di etichette e in quelle di archivio, solo nei singoli post o ovunque. Basterà inserire il codice che vado a presentare tra i due tag condizionali che ne vincolano l'attivazione alla tipologia di pagine prescelta.

L'icona potrà essere scelta del colore desiderato, sarà visibile solo nella versione desktop e l'aspetto di un articolo dopo la fine della personalizzazione sarà il seguente

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga

<b:includable id='post' var='post'>

che è l'inizio della sezione per il desktop. Se tale sezione non fosse visibile occorre cliccare sulla freccetta nera posta alla sinistra. Subito sotto questa riga si incolla questo codice

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<span style='font-size:24px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju_UJK7kThYE3V3lN82SM0zZoyd6cC0aq4NlEewaGR6ZKW2vYJdC3Jw0n3GlD1SQa8sfc7qjOqDiI7x0ln1iBcXP9w4NLy18ugUSRaPu6SNkzMH8ClMqSLNnXyB7ydekx4Jjzk0G5gMmuo/) no-repeat top right; width:48px; height:48px; text-align:center; float:right; margin:-12px 0px 0px 5px; padding:4px 0px 0px 5px;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>
</span>
</b:if>

Si salva il modello. L'URL colorato di rosso è l'indirizzo della immagine della icona. Si può sostituire con un'altra scegliendola tra quelle presenti in questa cartella caricata su Dropbox

Download
Clicca qui

Le altre personalizzazioni riguardano:

1. Le dimensioni della icona che sono 48x48 pixel
2. Il posizionamento dell'icona con i parametri margin:-12px 0px 0px 5px;. Il primo numero serve per la distanza della icona dall'alto, il secondo per quella dalla destra e così via in senso orario. Se l'icona fosse troppo bassa si può per esempio sostituire -12px con -15px.
3. Posizionamento del numero all'interno della icona. Difficilmente al primo colpo la posizione del numero sarà perfettamente centrata dentro l'icona. La prima cosa da fare è di scegliere la dimensione giusta dei caratteri (24 pixel quella proposta) che dipende anche dalla famiglia di font del sito. Successivamente si opera sui parametri padding:4px 0px 0px 5px; con il primo parametro (4px) che determina la distanza del numero dalla parte alta, il secondo dalla destra e così via in senso orario. Per esempio per spostare il numero leggermente più in alto e più a sinistra il tag può essere così modificato padding:3px 0px 0px 4px;.

Gli eventuali tag condizionali vanno inseriti uno all'inizio e uno alla fine del codice. Per visualizzare l'icona anche nella versione desktop lo stesso codice va incollato anche subito dopo la riga

<b:includable id='mobile-post' var='post'>