Widget degli ultimi commenti con avatar del commentatore.

Come installare il widget dei Commenti Recenti che mostri anche l'avatar del commentatore e il link al commento ricdvuto o pubblicato dall'autore con immagine di default per i commenti anonimi (se consentiti).

Riprendo un post di qualche anno fa che ha avuto un certo successo tra i lettori visto che mostra gli ultimi commenti ricevuti da un blog su Blogger insieme alla immagine del commentatore visibile in forma circolare. I widget dei commenti recenti non è solo utile per offrire nuovi contenuti ai lettori ma è importante anche per l'amministratore del sito che può verificare se ci siano commenti per eventualmente pubblicare la risposta. 

Per qualche giorno installerò questo widget anche su questo sito e quindi potrete verificarne il funzionamento. Visto che non utilizza script esterni può essere inserito senza alcun problema anche nei blog con dominio personalizzato. L'aspetto del gadget sarà il seguente

Per l'inserimento del gadget non ci sono grossi problemi visto che non è necessario modificare il template. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla 

<style type="text/css">
ul.commenti_recenti {
    list-style: none;
    margin: 0;
    padding: 0;
}
.commenti_recenti li {
    font-family:Georgia !Important;
    font-size:13px !important;
    font-weight:bold;
    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: 13px;
   font-family:Georgia !Important;
    font-weight:normal !important;   
    line-height: 1.3;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Impostazioni personalizzate
    var
numComments  = 8,
showAvatar  = true,
avatarSize  = 46,
roundAvatar = true,
characters  = 60,
showMorelink = true,
moreLinktext = "More",
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">
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 D=D||5,9=9||19,A=A||1a,m=m||"h://W.S.g/16/?d=18",E=E||" 1p &1f;",v=(p v===\'o\')?j:v,z=(p z===\'o\')?Z:z,n=(p n===\'o\')?j:n,M=(p M===\'o\')?Z:n;1l 12(L){7 b;b=\'<Y C="12">\';H(7 i=0;i<D;i++){7 x,y,2,k;4(i==L.14.8.q)1g;b+="<X>";7 8=L.14.8[i];H(7 l=0;l<8.I.q;l++){4(8.I[l].1j==\'1o\'){x=8.I[l].w}}H(7 a=0;a<8.K.q;a++){y=8.K[a].1i.$t;2=8.K[a].1h$1k.N}4(2.f("/O/")!=-1){2=2.u("/O/","/s"+9+"-c/")}e 4(2.f("/T/")!=-1){2=2.u("/T/","/s"+9+"-c/")}e 4(2.f("/U-c/")!=-1&&2.f("h:")!=0){2="h:"+2.u("/U-c/","/s"+9+"-c/")}e 4(2.f("G.g/B/1n-P.J")!=-1){2="h://3.13.Q.g/-1m-1e/17/1c/1b/s"+9+"/15.R"}e 4(2.f("G.g/B/1d-P.J")!=-1){2="h://3.13.Q.g/-1R/1U/1P/1K/s"+9+"/1J.R"}e 4(2.f("G.g/B/1M.J")!=-1){4(m.f("S.g")!=-1){2=m+"&s="+9}e{2=m}}e{2=2}4(v==j){4(n==j){k="1O"}e{k=""}b+="<V C=\\"1T "+k+"\\"><B C=\\""+k+"\\" N=\\""+2+"\\" 1H=\\""+y+"\\" 1w=\\""+9+"\\" 1I=\\""+9+"\\"/></V>"}b+="<a w=\\""+x+"\\">"+y+"</a>";7 11=8.1v.$t;7 6=11.u(/(<([^>]+)>)/1u,"");4(6!=""&&6.q>A){6=6.1r(0,A);6+="&1s;";4(z==j){6+="<a w=\\""+x+"\\">"+E+"</a>"}}e{6=6}b+="<r>"+6+"</r>";b+="</X>"}b+=\'</Y>\';7 F="";4(M==j){F="10:1F;"}b+="<r 1G=\\"1E-1D:1A;10:1B;1C-1S:1z;"+F+"\\">1y 1t<a w=\\"h://W.1x.1L/\\">1Q</a></r>";1N.1q(b)}',62,119,'||authorAvatar||if||commBody|var|entry|avatarSize||commentsHtml|||else|indexOf|com|http||true|avatarClass||defaultAvatar|roundAvatar|undefined|typeof|length|span|||replace|showAvatar|href|commentlink|authorName|showMorelink|characters|img|class|numComments|moreLinktext|hideCSS|blogblog|for|link|gif|author|w2b|hideCredits|src|s1600|rounded|blogspot|png|gravatar|s220|s512|div|www|li|ul|false|display|commHTML|commenti_recenti|bp|feed|w2b_blogger_logo|avatar|TxMKLVzQ5BI|mm|60|40|QYau8ov2blE|AAAAAAAABYY|openid16|1X32ZM|raquo|break|gd|name|rel|image|function|AaI8|b16|alternate|More|write|substring|hellip|by|ig|content|width|way2blogging|Widget|right|10px|block|text|size|font|none|style|alt|height|w2b_openid_logo|8iasY0xpLzc|org|blank|document|avatarRound|AAAAAAAABYc|Way2Blogging|9lSeVyNRKx0|align|avatarImage|TxMKMIqMNuI'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript" src="http://www.ideepercomputeredinternet.com/feeds/comments/default?alt=json&callback=commenti_recenti&max-results=8"></script>

Si salva l'elemento e si posiziona il gadget con il drag & drop del mouse quindi si va su Salva disposizione.  Le personalizzazioni più importanti riguardano:

1. L'URL del vostro blog da sostituire a quello di questo sito con il .com se gratuito
2. Il colore dello sfondo dell'immagine del commentatore è #efefef
3. Il colore dell'ombreggiatura dell'avatar è #bbb
4. Il colore del testo del commento #191919
5. La dimensione del carattere del testo del commento è di 13 pixel così come la dimensione del testo del nome del commentatore (il primo 13px riguarda il nome del commentatore)
6. font-weight :bold; per avere in grassetto il nome del commentatore
7. font-weight:normal per avere senza grassetto il testo del commento
8. line-height: 1.3; è l'altezza delle righe del commento
9. La famiglia di caratteri proposta è Georgia
10. Il numero dei commenti da mostrare proposto come 8 va modificato nelle due occorrenze
11. La dimensione dell'avatar è proposta in 46 pixel
12. Il numero dei caratteri dell'incipit del commento è proposto in 60
13. showMorelink con  true per mostrare il link per leggere tutto il commento con false per non visualizzare tale link. More è invece il testo di ancoraggio di tale link
14. In alcuni blog si può commentare da anonimi senza connettersi con Blogger. Relativamente a questa situazione verrà mostrata una immagine di default dell'avatar. 
15. I codici dei colori dei link saranno ereditati dal vostro modello.
16. roundAvatar = true, per mostrare gli avatar in modo circolare. Si può sostituire true con false per visualizzarli in forma quadrata.