Widget scorrevole degli Ultimi Commenti per Blogger.

Modificando il codice relativo al gadget scorrevole degli Ultimi Articoli ho realizzato un widget che mostra l'inizio Commenti Recenti postati nel blog. Utilizzando il tag marquee si riesce a visualizzarli mentre scorrono all'interno di un contenitore che può essere totalmente personalizzato e inserito indifferentemente nella parte più larga del layout o in una sidebar.

• Demo del widget scorrevole degli ultimi commenti -

Per la sua installazione non occorre modificare il modello. E' infatti sufficiente incollare il codice in un elemento HTML/Javascript

Con la nuova Bacheca si va su Layout > Aggiungi un gadget > HTML/Javascript mentre se si usa sempre la vecchia Bacheca il percorso è Design > Aggiungi un gadget > HTML/Javascript. In ogni caso, in Sezioni del sito, si incolla questo codice 

<div style="border: dashed 1px #c9c93a; padding: 2px; margin: 0px 0px 0px 0px; text-align: justify; line-height: 22px; color: #a37c18; font-size: 18px; background-color:#fafaa5;"><b><script style="text/javascript" src="https://sites.google.com/site/scriptperilblog/widget-1/ultimi-commenti.js"> </script><script style="text/javascript"> var NumeroCommenti = 12; var sBgColor; var nWidth; var nScrollDelay = 100; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar="<<"; </script> <script style="text/javascript" src="http://www.ideepercomputeredinternet.com/feeds/comments/default?alt=json-in-script&callback=UltimiCommenti"> </script></b></div>

Si salva l'elemento pagina e, con il mouse, si posiziona nel punto desiderato salvando nuovamente. Le personalizzazioni riguardano

1. L'inserimento dell'indirizzo del vostro blog al posto di quello di questo sito (colorato di blu)
2. La scelta dello stile del bordo del contenitore. Con questo codice sarà di colore #c9c93a, di spessore 1px e tratteggiato.
3. L'impostazione del padding (distanza interna tra testo e contenitore) e del margin (distanza esterna tra contenitore e resto del layout. Il primo valore è relativo alla distanza dall'alto e gli altri a seguire riguardano le altre direzioni in senso orario)
4. L'altezza della linea del widget (22px) e la dimensione dei caratteri (18 pixel). 
5. Il colore dei segni separatori tra commento e commento (#a37c18)
6. Il simbolo/i di separazione (<<)
7. Il numero dei commenti da mostrare nel widget scorrevole (12)
8. La velocità di scorrimento, nScrollDelay = 100; (a numeri più alti corrisponde una velocità più bassa)
9. La direzione di scorrimento (left). Le altre opzioni sono right, up e down
10. Il colore di sfondo del contenitore #fafaa5
11. I due tag <b> e </b> sono per visualizzare i commenti in grassetto. Si possono togliere o inserire anche <i> e </i> per il corsivo (anche insieme)
12. Il numero dei commenti da mostrare (12)

Considerazioni conclusive

Consiglio di incollare il codice il codice così com'è per vedere se funziona nel vostro modello e di operare le personalizzazioni in un secondo momento. In relazione al punto 4) l'altezza della linea del widget coincide con quella del widget se si sceglie la direzione left, punto 9), se invece si sceglie per esempio la direzione up, ecco che aspetto assumerà questo gadget

  

con tutti i commenti elencati che scorrono dal basso verso l'alto. Sono stati inseriti gli eventi onmouseover e onmouseout per interrompere lo scorrimento quando si passa sopra al widget con il mouse e per riprenderlo quando si toglie. In ciascun commento del gadget è presente un collegamento che farà aprire la pagina esattamente nel commento linkato. Ho inserito anche una seconda demo del widget con l'opzione up. In quel caso ho anche modificato i margini in questo modo margin: 0px 50px 0px 10px; per lasciare un po' di spazio a sinistra e a destra.