Blogger: Widget dei Commenti Recenti con Avatar del commentatore.

Come installare il widget degli Ultimi Commenti in un blog su Blogger che mostra anche l'avatar del profilo del commentatore.

Riprendo un widget che mostra gli ultimi commenti ricevuti da un blog su Blogger che presentai circa tre anni fa  che come altri simili aveva avuto problemi con il passaggio dalla  connessione HTTP  quella HTTPS.

Il codice è piuttosto vecchio ed è stato creato da un sito storico del blogging però può essere facilmente personalizzato nello stile per modificarne l'aspetto. Aveva smesso di funzionare come il gadget dei Top Commentatori e del widget degli Ultimi Commenti con Avatar Ruotante.

Anche in questo widget viene mostrato l'avatar del commentatore ma risulta statico quando ci si passa sopra con il mouse. La particolarità di questo gadget è che si può scegliere in modo molto semplice se visualizzare la miniatura della immagine del commentatore in forma quadrata o in forma rotonda.

Questo widget non ha bisogno di script esterni e si può installare senza modificare il template di Blogger. Sarà sufficiente modificare l'indirizzo del blog da cui estrarre i commenti tramite l'URL dei feed. Chi ha attivato la connessione HTTPS dovrà semplicemente incollare l'URL del suo sito preceduto appunto da https:// mentre chi ancora non l'ha attivata dovrà anteporre al dominio la stringa http://.

Si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript. Si digita il titolo del widget quindi 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 {
     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;    
     box-shadow: 0 1px 1px #bbb;
     float: left;
     margin: 0 6px 0 0;
     position: relative;
     overflow: hidden;
}
.avatarRound {    
     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  = 48,
roundAvatar = true,
characters  = 80,
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 quindi si posiziona nella sidebar con il drag&drop del mouse e si va su Salva Disposizione.

Le principali personalizzazioni di questo widget sono le seguenti:

1. L'URL del vostro blog da sostituire a quello di questo sito con il .com finale al posto del .it se gratuito e con https:// iniziale se è stata attivata la connessione HTTPS.
2. Il colore dello sfondo dell'immagine del commentatore è #efefef e si può modificare
3. Il colore dell'ombreggiatura dell'avatar è proposto come #bbb
4. Il colore del testo del commento è proposto come #191919
5. La dimensione del carattere del testo del commento proposta è di 13 pixel così come la dimensione del testo del nome del commentatore (il primo 13px delle due occorrenze)
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 della interlinea del commento
9. La famiglia di font proposta è Georgia
10. Il numero dei commenti da mostrare proposto come 8 va modificato nelle 2 occorrenze di cui una nell'ultima riga del codice.
11. La dimensione dell'avatar è proposta in 48 pixel
12. Il numero dei caratteri dell'incipit del commento è proposto in 80
13. showMorelink con  true per mostrare il link per leggere tutto il commento con false per non mostrare tale link. More è l'anchor text di tale link cioè la sua parte visibile e può essere modificato.
14. In alcuni blog di Blogger si può commentare da anonimi senza loggarsi con Google. Relativamente a questa situazione verrà mostrata una immagine di default dell'avatar. Tale immagine è stata caricata su Google Foto e ha l'URL diretto colorato di viola che può essere modificato.
15. I codici dei colori dei link saranno ereditati dal vostro modello.
16. roundAvatar = true, per mostrare gli avatar circolari. Si può sostituire true con false per visualizzarli in forma quadrata. Con questa scelta però verrà mostrato il link di attribuzione del creatore dello script che sarà visibile in basso a destra del widget. 
17. margin:4px; è la distanza tra il nome del commentatore e il testo del commento.

Il widget degli Ultimi Commenti è utile anche per visualizzare immediatamente i commenti postati dai lettori e per rispondervi senza bisogno di controllare nella scheda Commenti della Bacheca.