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

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

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

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1kBGmUJfYmB1mogeLwkUUUAOPVvE4Axl1BhYT-NSAmYMaGScD0FeLxider6mEIcyTJrTTO00guesgdquaqGxpCD5gqbVUpibCkok_0h8QUcus92sYxCwm0VEfnnGJ04TZ4luiaG2zWOI/") 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

1. Come inserire una icona con il numero dei commenti -
2. Come numerare i commenti di un blog -