Pubblicato il 28/05/12e aggiornato il

Widget dei Commenti Recenti con avatar dei commentatori.

Widget degli Ultimi Commenti per Blogger con l'avatar del commentatore.
Vado a presentarvi l'ennesimo widget che riguarda gli Ultimi Commenti che ha però la particolarità di mostrare l'avatar del commentatore accanto all'incipit del commento. Sono anche possibili diverse personalizzazioni come il numero dei commenti da visualizzare, il numero dei caratteri dell'incipit del commento, il testo del Read More, le dimensioni degli avatar e l'immagine di default per l'avatar dei commenti anonimi.

Gli avatar dei commentatori saranno visualizzati in forma circolare con tutti i browser eccettuato Internet Explorer con cui si vedranno nella normale forma quadrata. Le immagini si posizioneranno sulla sinistra in modo da far assumere al widget un aspetto simile a questo screenshot


commenti-recenti-avatar
L'installazione è semplicissima visto che i fogli di stile si possono inserire direttamente nell'elemento HTML senza dover modificare il modello del blog. Si va quindi su Layout > Aggiungi un gadget > HTML/Javascript e si inserisce un titolo a piacere. In Sezioni del sito si incolla questo codice

<style type="text/css">
ul.commenti_recenti {
    list-style: none;
    margin: 0;
    padding: 0;
}
.commenti_recenti li {
    background: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 6px 0 !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.commenti_recenti li .avatarImage {
    padding: 3px;
    background: #efefef;
    -webkit-box-shadow: 0 1px 1px #bbb;
    -moz-box-shadow: 0 1px 1px #bbb;
    box-shadow: 0 1px 1px #bbb;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.commenti_recenti li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}
.commenti_recenti li span {
    margin-top: 4px;
    color: #191919;
    display: block;
    font-size: 12px;
    font-weight :bold;
    font-style: italic;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Impostazioni personalizzate
    var
numComments  = 8,
showAvatar  = true,
avatarSize  = 46,
roundAvatar = true,
characters  = 65,
showMorelink = true,
moreLinktext = "Leggi tutto",
defaultAvatar  = "https://lh4.googleusercontent.com/-d8sFfc8eZoA/T8OGeWC33nI/AAAAAAAAYZA/OseLBU2FwI8/s80/avatar.png",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/scriptperilblog/javascript-2/avatar-commenti.js"></script>
<script type="text/javascript" src="http://www.ideepercomputeredinternet.com/feeds/comments/default?alt=json&callback=commenti_recenti&max-results=8"></script>

Le personalizzazioni sono numerose. Elenco quelle più importanti
  1. Il colore dello sfondo dell'avatar #efefef;
  2. Il colore dell'ombreggiatura dell'avatar #bbb;
  3. Il colore del testo del commento #191919;
  4. La dimensione dei caratteri del testo del commento 12px;
  5. Con questo codice il testo dei commenti si vedrà in grassetto e in corsivo. Per eliminare una delle due opzioni o entrambe vanno semplicemente cancellate le righe font-weight :bold; per il grassetto e font-style: italic; per il corsivo
  6. L'altezza delle righe 1.4; del testo del widget
  7. Il numero dei commenti (8) da modificare nella riga numComments e in max-results
  8. Le dimensioni dell'avatar avatarSize = 46, sempre che si voglia mostrare. Se si vuole nascondere basta sostituire true con false in showAvatar 
  9. Il numero dei caratteri iniziali del commento (65)
  10. Mostrare o meno il link Leggi tutto inserendo true o false nella riga showMorelink. In moreLinktext si può personalizzare l'espressione da visualizzare come anchor text
  11. L'immagine di default dell'avatar per i commentatori che hanno pubblicato in modo anonimo o senza essersi loggati con Blogger. L'immagine va caricata su Picasa, ne va acquisito l'URL e va sostituito a quello in defaultAvatar
  12. L'URL del vostro blog da sostituire a quello di questo sito
  13. Se avete un blog con dominio personalizzato, il codice non funzionerà. Dovrete incollare nel browser il javascript il cui URL è colorato di blu e cliccare su Invio. Si scaricherà un file che va quindi caricato su Dropbox o su un dominio di nostra proprietà. Dopo averne copiato l'URL si sostituisce a quello del codice.
  14. Il colore dei link sarà ereditato dal vostro modello.
Salvate il gadget e posizionatelo con il drag & drop del cursore.
Fonte | Way2Blogging -




14 commenti :

  1. Ciao questa volta il codice funziona anche da me....:O)) però vorrei sapere se è possibile omettere l'avatar mio ad esempio come risposta al commento....
    Grazie e ciaooo

    RispondiElimina
  2. @edvige
    No. Si dovrebbe usare un Pipe di Yahoo apposito.

    RispondiElimina
    Risposte
    1. e te pareva sempre complicata io....immagino che la procedura del pipe sia più o meno la stessa dell'altro mio infelice caso.
      Grazie Ernesto sempre gentile.
      PS.
      L'ho provato ed anche modificato colori adatti al mio blog ma è troppo esagerato in lunghezza se devono esserci anche i miei commenti....grazie ancora

      Elimina
  3. appena inserito nei miei due blog, grazie mi piace un sacco!

    RispondiElimina
  4. Grazie mille, non l'avevo ancora vista, mi sarà utilissima!!

    RispondiElimina
  5. Ciao Ernesto, ho inserito il codice e si vede, ma come mai non "ruotano" gli avatar quando si passa sopra con il mouse?
    Ho forse sbagliato qualcosa?

    Grazie!

    RispondiElimina
    Risposte
    1. @# Usi come browser Internet Explorer 9 o precedente? Può dipendere da quello. Prova quest'altro widget
      http://www.ideepercomputeredinternet.com/2013/04/last-comments-widget-with-rotating-avatar.html
      funziona anche con IE10

      Elimina
    2. Uso Chrome... Il problema è che sul tuo blog ed altri che usano lo script funziona tutto, solo sul mio blog (dominio personalizzato) non va. Eppure ho caricato il codice su un mio dominio e modificato il relativo link... Non capisco dove ho sbagliato :(

      Elimina
    3. Ecco, ce l'ho fatta con l'altro codice! Grazie :)

      Elimina
  6. Bello, peccato che nonf faccia vedere il titolo del post in cui si trova il commento.

    RispondiElimina
  7. Si possono ridurre le dimensioni dei caratteri del nome dell'autore del commento?

    RispondiElimina
    Risposte
    1. @# Prova a incollare sotto questa riga
      .commenti_recenti li {
      un'altra riga di codice come questa
      font-size:8px !important;

      Elimina
    2. Perfetto, grazie per la rapida risposta! ;)

      Elimina

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.