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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFPmPFOEy1InG8l-XcSmHh11CNsQJq5qvCTpgrE__4K2-tIG3TFVUgJbnGV0D7E_PudyTAcUl-4VNvXw1eJRvxpKcEkmmY8yzWvd_o_7jXRrGQ5NAqfvZY9hD1eoPdtoShuzy-UPNXnds/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 -