La nuvoletta col numero dei commenti nel post su Blogger!

Me l’avete tanto chiesta ed eccomi qui a spiegare come inserire nei vostri blog quella nuvoletta col numero dei commenti vicino al titolo, come il template che uso in questo momento. E’ vero che fa molto effetto nel blog, e forse è uno dei motivi per cui ho scelto questo template.

L’intervento è così semplice che riuscirete a farlo prima ancora di riuscire a dire “Quidditch!” (se non avete letto o visto Harry Potter, spegnete il computer e andate a comprarvi tutti i libri!).

Come sempre, fate prima una copia di backup del template di Blogger.

Modificare il codice del template

L’intervento che sto per spiegare io l’ho provato sul template Minima, ma dovrebbe andare bene in tutti i casi. Dalla bacheca, andate in Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa porzione di codice:

]]></b:skin>

Subito sopra, incollate questo:

.older-cloud {
        width:35px;
        height:30px;
        float:right;
        margin:-13px 8px 0 0;
        background: url(http://i43.tinypic.com/f03r6q.png) no-repeat;
        color:#fff;
        line-height:24px;
        text-align:center;
}

a.older-cloud {
        background: url(http://i39.tinypic.com/t0mav7.png);
        color:#fff;
        text-decoration:none;
}

.older-cloud:hover {
        color:#fff;
        background: url(http://i39.tinypic.com/t0mav7.png);
        text-decoration:none;
        cursor:pointer;
}

Successivamente, cercate questa porzione di codice:

<b:includable id='post'

E subito sotto, incollate questo:

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> 
    <span class='older-cloud'>
         <data:post.numComments/>
    </span>
</a>

Adesso salvate il template e visualizzate il blog, ecco l’effetto che otterrete:

Tutto fatto! Ho modificato le immagini rendendo lo sfondo trasparente, quindi dovrebbe andare bene con qualsiasi template.

Personalizzare le immagini

Se l’immagine della nuvoletta non vi piace, o volete cambiarne i colori, potete realizzare le vostre e sostituirle nel codice, cambiando nella prima porzione di codice la seguente riga:

background: url(http://i43.tinypic.com/f03r6q.png) no-repeat;

e più sotto la seguente riga (questa si ripete due volte):

background: url(http://i39.tinypic.com/t0mav7.png);

con, rispettivamente, l’indirizzo dell’immagine normale (nel primo caso) e l’indirizzo dell’immagine quando vi passa sopra il mouse (nel secondo caso).

Spostare la nuvoletta

Nel codice che ho fornito ho posizionato la nuvoletta subito sopra il titolo, per evitare che tolga spazio al testo, ma a seconda del template (o dei gusti) potreste volerla spostare. In questo caso basta modificare questa riga presente nella prima porzione di codice:

margin:-30px 8px 0 0;

I quattro valori indicano la distanza dal bordo del post partendo dall’alto e girando in senso orario, quindi cambiando –30px in –40px la nuvoletta si alzerà, e aumentando il valore invece di diminuirlo la nuvoletta si abbasserà. Potete fare varie prove per capire come funziona il meccanismo.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!