1 agosto 2011

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.

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

widget scorrevole ultimi commenti

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

widget commenti scorrevoli in alto per blogger  

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.



17 commenti:

  1. Salve, ho installato questo codice nel mio blog alcuni mesi fa e mi piaceva molto..da venerdì ho un dominio mio e non funziona più nemmeno dopo aver cambiato l'indirizzo..come posso fare?
    grazie!
    Morena

    RispondiElimina
    Risposte
    1. @Morena+-+-+-
      Quando si passa a un dominio personalizzato i javascript caricati su Google Sites smettono di funzionare. Devi procedere in questo modo
      1)Scarica questo file
      https://sites.google.com/site/scriptperilblog/widget-1/ultimi-commenti.js
      incollando l'indirizzo nel browser e cliccando su Invio
      2)Caricalo su Dropbox
      http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
      3)Acquisiscine l'URL e sostituiscilo al precedente nel codice del widget

      Elimina
    2. Grazie Ernesto per la risposta..ho scaricato Dropbox..ma oltre non sono riuscita ad andare..dovrò mettermi con calma e capirne di più..
      Buona Domenica
      Morena

      Elimina
  2. Ciao sono nuovo e ho appena aperto un blog. Mi chiedevo se in questo widget è possibile inserire sia l'autore del commento e il riferimento del post.
    ti ringrazio di tutti i consigli che hai esposto in questo utilissimo sito!

    Michele

    RispondiElimina
    Risposte
    1. @ Adelmo
      Il widget è volutamente minimalista. Però volendo si può modificare il javascript
      https://sites.google.com/site/scriptperilblog/widget-1/ultimi-commenti.js
      però è un lavoro piuttosto complesso anche per chi è esperto :(

      Elimina
    2. Ciao Ernesto.
      Alla fine ho deciso di usare il "Widget dei Commenti Recenti per Blogger con icona" molto più comodo.
      Grazie della tua veloce risposta e ancora complimenti

      Elimina
  3. Ciao parsifal nonmi funziona più il gadget di google ultimi commenti,sto cercando di sostituirlo,ma tutti quelli che ho provato non vanno anche2 dei tuoi...quello definitivo mi ha funzionato per un paio di giorni poi soloil titolo.Puoi aiutarmi a capire cosa ostacola? Può essere il banner di bionieri? è l'ultima cosa che ho aggiunto. Grazie mille per i tuoi consigli

    RispondiElimina
    Risposte
    1. il titolo del mio blog è ibridatoripercaso

      Elimina
    2. Ho provato ad installare quello scorrevole e si vede solo una striscia sottile di colore giallino, ma non si legge niente...dove ho sbagliato?

      Elimina
    3. @falconelvento
      Il widget scorrevole funziona benissimo. Questi widget basati su JQuery smettono di funzionare se ne inserisci più di uno che abbia lo stesso feed. Bisogna quindi scegliere.

      Elimina
  4. Ciao Ernesto, grazie per la risposta, ma in effetti io avevo eliminato gli altri widget dei commenti recenti, quando ho visto che non mi funzionavano...non li ho sommati. Quello scorrevole l'ho ancora in funzione nel blog e lo puoi vedere se ci vai...si vede solo uno dei 2 bordi colorati e niente commenti (ho anche provato a modificare il margin che era 0 aggiungendo numeri diversi,nella speranza saltassero fuori tutti e due...ma io non li vedo.
    Nela pagina demo vedo che ci sono due bordi, ma non sono riuscito a vedere commenti nemmeno lì...Penso che nel mio blog ci deve essere qualcosa che ostacola, ma non capisco cosa.

    RispondiElimina
    Risposte
    1. @falconelvanto
      In questa pagina Demo si vedono entrambi i widget orizzontali e verticali
      http://design-prova.blogspot.it/2011/07/post-di-demo-del-widget-orizzontale.html
      Per quello che riguarda i bordi puoi fare riferimento a questo post
      http://www.ideepercomputeredinternet.com/2011/01/come-modificare-gli-stili-i-colori-e-le.html

      Elimina
  5. Utilissimo gadget, soprattutto perché Google visualizza solo
    gli ultimi 5 commenti e non di più.
    Una domanda: come si mette il nome di chi commenta?
    Puoi spiegarmi anche come codice perché più o meno riesco a ciarabattare.
    Le spiegazioni che hai messo sono comprensibili e chiarissime.

    RispondiElimina
    Risposte
    1. @lapennadaniele
      con questo widget non viene visualizzato il nome di chi commenta

      Elimina
  6. Salve! ho installato il tuo widget e funziona benissimo! Nel mio blog ho messo anche la possibilità di commentare i post tramite facebook. Volevo chiedere se fosse possibile inserire nello stesso widget anche i commenti di facebook o se c'è una possibilità differente che mi permetta di inserire gli ultimi commenti anche per facebook! grazie!!!

    RispondiElimina
    Risposte
    1. @# I commenti fatti nel modulo di Facebook sono sui server di Facebook e quindi non si possono importare in Blogger.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.