Icona con numero dei commenti accanto al titolo del post in Blogger.

Presento la terza versione della personalizzazione che inserisce una icona con il numero dei commenti accanto al titolo del post in un blog su Blogger. Il primo articolo era basato sull'introduzione della classe comment-bubble mentre il secondo concerneva in una serie di javascript a seconda dell'icona che si sarebbe scelta. Ho anche presentato un tutorial per numerare con una immagine i singoli commenti in modo da renderli più facilmente identificabili.

Questo articolo dà una ulteriore chance di inserire l'icona con il numero dei commenti specialmente a chi utilizza i nuovi template del Designer modelli. Si tratta di una modalità di installazione molto semplice che non ha bisogno di file javascript esterni ma che si limita al solo HTML. Ha quindi un incidenza bassissima sulla velocità di caricamento delle pagine. Cliccando sul numero dei commenti all'interno dell'icona, si potrà accedere direttamente a quell'area. Ecco uno screenshot di questa personalizzazione testata nel mio Blog di prova con numeri a una e a due cifre

I colori dei numeri saranno ereditati dal blog e varieranno in funzione del fatto se il link collegato è stato visitato o è puntato con il mouse. Le icone potranno essere personalizzate. Ho postato in rete una piccola raccolta di icone adatte alla bisogna che potete scaricare da DropBox con un click

• Cartella icone commenti -

Ce ne sono di colori e stili diversi in una galleria di tre pagine e credo possano adattarsi a quasi tutti i siti. L'icona che avrete scelto dovrà essere caricata su Picasa per ottenerne l'hotlink. Andate su Design > Modifica HTML e salvate il modello completo per un eventuale backup di ripristino. Espandete i modelli widget e cercate questa riga di codice

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

Immediatamente sotto incollate quest'altro 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>

Salvate il modello. L'URL della icona prescelta dovrà essere incollato al posto di quello evidenziato di rosso. Dovranno eventualmente essere anche modificate le dimensioni. L'icona che ho usato era di width:48px; height:48px; (rispettivamente larghezza e altezza). Le operazioni da fare successivamente riguardano il posizionamento della icona nel blog e l'inserimento ottimale dei numeri al centro dell'immagine.

Posizionamento dell'icona

Bisogna agire sui parametri margin:-12px 0px 0px 5px;. Ogni template fa storia a sé e questi numeri sono stati calcolati per allineare l'immagine al titolo del post nel blog che ho usato come test. Il primo numero, in questo caso -12px, indica la distanza dalla parte alta del layout. Se per esempio si mette -16px, l'icona si sposta in alto perché abbiamo diminuito il margine, se invece scegliamo -4px si sposterà più in basso. I numeri come vedete possono prendere anche valori negativi. Gli altri tre valori rappresentano i margini rispetto a tutte le altre tre direzioni andando in senso orario (0 pixel per destra e basso e 5 pixel per la sinistra).

Posizionamento del numero all'interno dell'icona

Difficilmente al primo colpo riuscirete a centrare perfettamente il numero dentro l'icona. Per farlo bisogna innanzitutto selezionare la dimensione dei caratteri più appropriata per l'immagine che abbiamo scelto (ho messo 24px per una icona di 48 pixel). Successivamente bisogna agire sui parametri

padding:4px 0px 0px 5px;

Anche in questo caso il primo valore indica la distanza del numero rispetto alla parte alta. Quindi per innalzarlo bisogna diminuire il numero. Gli altri si riferiscono alle altre tre direzioni andando sempre in senso orario. A titolo di esempio se vogliamo spostare il numero dei commenti leggermente verso sinistra basterà usare i parametri padding:4px 0px 0px 4px; che diminuisce di un pixel il margine da quella stessa parte.