Pubblicato il 29/04/11e aggiornato il

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

icone con numero commenti in blogger

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
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://lh6.googleusercontent.com/_nT13UtBmmiU/TbpsTrkx86I/AAAAAAAATAw/-NhBJv9gOkU/sfumato.png) 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.




28 commenti :

  1. Ciao, io che uso il box commenti di Disqus posso inserirlo oppure non vengono rilevati?

    RispondiElimina
  2. @SE-Gen Se non hanno un URL riconducibile a Blogger i commenti non vengono rilevati.

    RispondiElimina
  3. io ho lasciato tutti i numeri invariati..solo che nel blog non riesco a vederlo. come mai??

    RispondiElimina
  4. @BrilliDiLuce
    Ho guardato il tuo blog.Infatti non si vede l'icona. Hai sbagliato, hai messo questo link
    https://picasaweb.google.com/lh/photo/DDxA2I0Y_AF5cYPbf6RJe6laK1-mYb5MP1rnHS08wYc?feat=directlink
    invece dovevi inserire
    quest'altro
    https://lh5.googleusercontent.com/_PSLYv9AZuMQ/TbrnSkBE8TI/AAAAAAAAAUw/lAU6j44iZWw/88f0fe3.png
    Ciao
    P.S Ho guardato il tuo sorgente pagina e il tuo Picasa Album

    RispondiElimina
  5. @Ernesto T.

    ti ringrazio. Io lo vorrei mettere però a sinistra e magari un pochino più giu. come faccio?? mi daresti dei numeri orientativi?' grazie. ps ma il colore non si può cambiare?' anche se a me di base piaceva questa??

    RispondiElimina
  6. @BrilliDiLuce Ti riferisci al numero? A me pare centrato abbastanza bene.
    Comunque se lo vuoi mettere un po' più in basso e un po' più a sinistra prova questo
    padding:5px 1px 0px 2px;

    RispondiElimina
  7. Bellissimo e finalmente inserito! Funziona perfettamente, ho fatto solo una piccolissima modifica per centrare un po' meglio il numero, grazie come sempre!

    RispondiElimina
  8. è possibile fare la stessa cosa anche nelle pagine statiche? GRAZIE E COMPLIMENTI!!

    RispondiElimina
  9. @Mario Alan
    Togli la prima e l'ultima riga del codice. Dovrebbe visualizzarsi l'icona anche nelle pagine statiche.

    RispondiElimina
  10. ho inserito il codice e visualizzo l'icona da me scelta, ho solo due problemi: mi appare sia il classico "commenti" in basso che l'icona in alto a destra, come faccio a rimuovere la scritta preimpostata? secondo problema: non riesco a spostare in basso l'icona, si porta dietro anche il post, se abbasso l'una si abbassa anche il post, grazie!

    RispondiElimina
  11. @Alessandra
    Per eliminare la scritta Commenti devi andare su Design > Elementi pagina > Post sul blog > Modifica e togliere la spunta a Commenti. Puoi seguire le istruzioni di questo post
    http://www.ideepercomputeredinternet.com/2010/12/impostazioni-per-configurare-il-post-su.html
    Per quello che riguarda il posizionamento non è che ti possa dire di più di quello che già c'è scritto nel post. Bisogna agire sui parametri di margin e padding. Poi ogni template fa storia a sé.

    RispondiElimina
  12. Ciao, volevo rimuovere la nuvoletta col numero di commenti per riposizionarla accanto al titolo e non in fondo al post. Solo che cercando: <b:includable id='post' var='post' di seguito non c'è un testo uguale al codice che ci hai dato e presumo che anch'io abbia incollato pari, pari. Si sarà spostato in seguito alle mie varie modifiche? E' possibile rimediare? Grazie

    RispondiElimina
  13. @Tamerice
    Non si è spostato. Solo che Blogger trasforma l'HTML in XML e quindi al posto delle virgolette c'è per esempio "
    Se vuoi trovare il codice ti conviene cercare con F3 l'URL della immagine della nuvoletta.
    Comunque guardando il tuo sorgente pagina ho trovato due CSS con due diverse nuvolette, questa
    http://gfeibg.blu.livefilestore.com/y1p9cVwjOE_FvfPu6Pfdz4e-k3-AlOgTszUypqlJjGHYSHarSgTWuCk1V95_RgZihTPlo-79uG46ktXRYzb5X_NkA/b99m5on.png
    e quest'altra
    http://public.blu.livefilestore.com/y1p4jsEcyWGgFNHqh2Rx0OrOsGvFXOwAdBWJ63vKCm6i_4PDTCMJzTk71PSzV_PcQYt858Oqxxr6hfly1c4m1vhLw/bivlu77.png
    che sono stati inserite con un metodo diverso da quello di questo articolo. Mi pare che tu abbia seguito questo tutorial
    http://www.ideepercomputeredinternet.com/2010/01/come-inserire-una-icona-con-il-numero.html

    RispondiElimina
  14. Ciao Ernesto, io invece la voglio rimuovere sta nuvoletta accanto al titolo del post. Come fare? Anticipatamente grazie!

    RispondiElimina
  15. @lauradeno
    Incollami l'url del tuo blog e vedo che posso fare

    RispondiElimina
  16. hey ernesto, perché a me appare uno 0 in tutte le nuvolette? anche se ci sono 2 commenti? io uso Disqus, però nella parte inferiore del blog, mi dice 2 commenti...

    RispondiElimina
  17. @kevinmaggi
    I commenti su Disqus non vengono conteggiati visto che non sono sui server di Blogger.

    RispondiElimina
    Risposte
    1. ma allora perché in fondo al post insieme all'autore, etichette mi dice 2 commenti?? Se non li riconosce nella nuvoletta, non li dovrebbe riconoscere neanche li...

      Elimina
    2. @KevinMaggi
      Non mi hai incollato l'URL del tuo blog ma credo che i Commenti siano magari scritti in inglese Comments e siano stati conteggiati e inseriti da Disqus e non da Blogger

      Elimina
  18. purtroppo non mi apare l'icona... seguo le istruzioni ma non riesco affatto ad istallare il codice.... :(

    RispondiElimina
    Risposte
    1. @VicaInCucina
      In alcuni modelli questa riga
      b:includable id='post' var='post
      ha una funzionalità diversa, puoi provare a incollare il codice una o due righe sopra, salva però sempre il modello

      Elimina
  19. Ernesto buonasera, grazie per il post, scritto bene, chiaro e con consigli che funzionano. Ti disturbo per chiederti un consiglio su una cosa che non riesco a risolvere da sola. Io qualche giorno fa ho eliminato la scritta cliccabile commenti da sotto il post perchè mi sembrava ridondante ed spariti i commenti ed anche l'icona commenti di fianco al titolo. Adesso grazie al tuo post ho rinserito l'icona che però non è cliccabile perchè devo aver cancellato la funzione commenti, come posso fare? Grazie in anticipo.

    RispondiElimina
    Risposte
    1. E' cosa molto più difficile di quanto possa sembrare. Ti riferisci alla scritta Commenti in Homepage o nei post o in tutti e due? In ogni caso come primo passo vai su Layout > Post sul blog > Modifica e metti la spunta a Opinioni dei lettori poi vai su Salva, Controlla se si riesce a vedere nuovamente il link Commenti.
      In caso negativo dopo aver salvato il template cerca le righe che iniziano con questo codice

      <a class='comment-link' expr:href='data:post.createLinkUrl'

      Ce ne dovrebbero essere almeno tre. Per risolvere dovresti creare un blog di prova con lo stesso template di Blogger che stai usando e "riparare" queste tre righe o aggiungerne una se fosse mancante
      @#

      Elimina
    2. facendo il raffronto tra il template di prova e quello che utilizzi
      @#

      Elimina
  20. Grazie Ernesto per la risposta veloce. Purtroppo spuntando i commenti sul Post in Layout non si ripristina, del resto non si toglieva neanche deselezionando la spunta ed è per questo che poi ho tolto le righe html dei commenti, ingenuamemente pensando di togliere solo quelli sotto il post e non anche l'icona di fianco al titolo. Ci smanetto un pò e ti faccio sapere, eventualmente ti disturbo ancora. Nel frattempo ti farò pubblicità perchè sei una persona seria!

    RispondiElimina
  21. Ciao Ernesto, magicamente, il giorno dopo che ho spuntato i commenti sul Post in layout, l'icona funzionante che c'era prima per i commenti è riapparsa ma solo sul post in alto..bizzarro...sai perchè per caso? Grazie tantissimo.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.