Widget scorrevoli degli Ultimi Post e dei Commenti Recenti.

Come installare in Blogger il widget scorrevole degli Ultimi Post, degli Ultimi Commenti e degli Ultimi Articoli per Etichetta.

Con questo post faccio seguito alla richiesta di un particolare widget fattami in un gruppo di cui faccio parte che mostri i titoli degli ultimi articoli in modo scorrevole da inserire in un elemento del blog. I titoli scorreranno da destra verso sinistra e ci si potrà cliccare sopra per aprire il post a cui fanno riferimento. Avevo già pubblicato un gadget con queste caratteristiche ma ha cessato di funzionare.

I contenuti saranno ovviamente dati dai feed del sito e si potrà scegliere di mostrare quelli del nostro blog ma anche i titoli delle ultime pubblicazioni di un sito online. L'unica limitazione è che la risorsa a cui si attinge per i titoli abbia abilitato i feed. L'aspetto del widget sarà completamente personalizzabile e i colori che ho proposto vanno bene per un blog con fondo scuro ma possono essere facilmente modificati

Per la sua installazione non occorre modificare il modello. Si va su Layout > Aggiungi un gadget e si scorrono i widget Base fino a HTML/Javascript. Si può digitare opzionalmente un Titolo e, in Sezione del sito, si incolla il seguente codice

<style>
.topnews,.topnews a:link {text-decoration: none; color:#FFF !important}
.topnews a:visited {text-decoration: none; color:#FDFDFD !important;}
.topnews a:hover {text-decoration:none; color: red !important;}
</style>
<div class="topnews">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKAQlVzmV7lA0mI1GTU8fBjkN1lOn3P31N7N_ySN_6qIke5n8nyoIJCSqFIz_OGWIiCn-8zvQteaz5x4GW88rOSjXaA548PaxuNGUl3VfEw9VSmuENsCe1vMMtSUPHe0_vPoKMg1eho-Id/s100/top-news.jpg) no-repeat center left; padding:3px 3px 3px 100px; border: 1px solid #000;  background-color:#272727;"><tbody><tr><td><div style="position:relative;overflow:hidden;width:100%; height:20px;" onmouseover="copyspeed=pausespeed"
onmouseout="copyspeed=memoryspeed"><div id="memoryscroller" style="position: absolute; left: -101px; top: 0px;"><nobr><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script><script type="text/javascript">
var nMaxPosts =10;
        var nWidth = 100;
        var nScrollDelay = 0;
        var sDirection = "left";
        var sOpenLinkLocation = "N";
        var sBulletChar = ">>"
</script>
<script type="text/javascript">
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
  try {
   sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
   if (nWidth) {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
  } else {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
  }
  if (nScrollDelay) {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
  }
  if (sDirection) {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";
    if (sDirection == "left" || sDirection == "right") {
    sHeadlineTerminator = "&nbsp;&nbsp;";
   } else {
    sHeadlineTerminator = "\<br/\>";
   }
  }
  if (sOpenLinkLocation == "N") {
   sPostLinkLocation = " target= \"_blank\" ";
  } else {
   sPostLinkLocation = " ";
  }
  sMoqueeHTMLEnd = "\</MARQUEE\>"
   sHeadLines = "";
   for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
   var objPost = json.feed.entry[nFeedCounter];
    if (nFeedCounter == json.feed.entry.length) break;
    for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
    if (objPost.link[nCounter].rel == 'alternate') {
     sPostURL = objPost.link[nCounter].href;
     break;
    }
   }
   sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" +
sHeadlineTerminator;
  }
   if (sDirection == "left") {
   sHeadLines = sHeadLines + "&nbsp;&nbsp;" + sPoweredBy;
  } else if (sDirection == "right") {
   sHeadLines = sPoweredBy + "&nbsp;&nbsp;" + sHeadLines;
  } else if (sDirection == "up") {
   sHeadLines = sHeadLines + "\<br/\>" + sHeadLines;
  }
  document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
  alert(exception);
}
}</script>
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10"
type="text/javascript"></script></nobr></div></div></td></tr></tbody></table>
</div>

Ho anche postato una demo per mostrare il funzionamento di questo gadget

Le personalizzazioni più importanti sono state colorate per facilitare la loro modifica.

1. L'immagine TOP NEWS l'ho creata io e visto che sono negato come grafico certamente potete far meglio. Basterà sostituire il suo URL dopo averla caricata su Picasa. Le dimensioni sono 100x27 pixel ma possono anche essere modificate.
2. La larghezza è proposta al 100% del layout ma può essere sostituita anche dal numero di pixel. L'altezza è invece stata settata a 20 pixel.
3. Il colore del titolo è #FFF, quello del titolo già visitato è #FDFDFD mentre se si punta un titolo con il mouse cessa di scorrere e il suo colore diventa red. background-color:#272727; è invece il colore dello sfondo del gadget. Infine border: 1px solid #000; definisce il colore, lo stile e lo spessore del bordo del widget. I meno esperti possono consultare il post sui codici dei colori.
4. Il numero di titoli visualizzati è settato in 10. Ci sono due occorrenze di questo parametro.
5. var nScrollDelay = 0; serve per aumentare o diminuire la velocità di scorrimento. A valori più alti corrisponde una velocità più bassa. Con 200 al posto di 0 la velocità sarà circa la metà.
6. var sBulletChar = ">>" è il simbolo da anteporre ai titoli
7. Va settato l'indirizzo dei feed della sorgente dei titoli e sostituito a quello di questo blog.

Si salva e si posiziona il gadget in nella parte larga del layout immediatamente sopra all'area dei post oppure più in alto nella zona del menù o ancora nell'area del footer.

WIDGET SCORREVOLE DEGLI ULTIMI COMMENTI

Questo stesso widget può essere usato anche per mostrare gli ultimi commenti. I commenti cancellati dagli utenti avranno la dicitura undefined. Le modifiche che debbono essere fatte riguardano l'immagine iniziale che potrebbe essere sostituita da questa

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEU8H6wB1srozh__4p6egpiECv0l0W63I3bkEVju4oFJTIkEv523V3j_mbySoiGb65sE5JpIeo7bHUVANmmXeO9PaQGohsbkBwPUsjXVLSglGYmC9UCixBSZZTXFnfzShx3-aVl9gDoy5b/s100/commenti.jpg

e ovviamente l'indirizzo dei feed dei commenti che per questo blog è

http://www.ideepercomputeredinternet.com/feeds/comments/default

WIDGET SCORREVOLE DEGLI ULTIMI POST PER ETICHETTA

Il codice può anche essere usato per mostrare le ultime pubblicazioni riguardo a una singola etichetta sostituendo al feed degli articoli quello seguente

http://nomedelblog.blogspot.com/feeds/posts/default/-/etichetta

dove dovrà essere inserito il nome del blog e quello della etichetta prescelta.

Osservazione conclusiva:

Se non si vuole visualizzare l'immagine iniziale ma si vogliono solo vedere i titoli che scorrono bisogna eliminare tutta questa parte di codice

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKAQlVzmV7lA0mI1GTU8fBjkN1lOn3P31N7N_ySN_6qIke5n8nyoIJCSqFIz_OGWIiCn-8zvQteaz5x4GW88rOSjXaA548PaxuNGUl3VfEw9VSmuENsCe1vMMtSUPHe0_vPoKMg1eho-Id/s100/top-news.jpg) no-repeat center left; padding:3px 3px 3px 100px;