Widget scorrevole orizzontale degli Ultimi Post per Blogger.

Come installare il widget scorrevole degli Ultimi Articoli per Blogger.

A seguito di un commento appena ricevuto su un widget di 5 anni fa che non funziona più ho deciso di riproporre una nuova versione dello stesso gadget per Blogger. Si tratta di un tipo di widget che probabilmente avrete già visto in molti siti.

Soprattutto nei portali di notizie nella parte alta della pagina si vedono spesso gli ultimi highlights che scorrono in orizzontale per essere mostrati ai lettori. Mi viene in mente tra l'altro il sito dell'Ansa. Per poter creare un widget di questo genere occorre che il sito abbia consentito i feed. Non occorre che siano abilitati i feed completi ma basta anche solo quelli brevi.

Il gadget è utilizzabile solo per Blogger. Se avete intenzione di mostrare un widget di notizie di altri siti si possono convertire i feed in widget con un servizio esterno. L'installazione non presenta nessuna difficoltà visto che non occorre neppure modificare il modello.

Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla

<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>

Si salva l'elemento e, con il trascinamento del mouse, si posiziona sopra l'area del post o nel footer per poi salvare la disposizione. L'aspetto del gadget sarà simile a questo

PERSONALIZZAZIONI

1. L'immagine TOP NEWS il cui URL è colorato di rosso l'ho creata in 30 secondi e può essere cambiata. Basterà sostituire il suo URL dopo averla caricata su Picasa. Le dimensioni sono 100x27 pixel ma possono anche essere modificate.
2. La larghezza del widget è proposta al 100% del layout ma può essere modificata o 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.
4. 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.
5. Il numero di titoli visualizzati è settato in 10. Ci sono due occorrenze di questo parametro. Una nella prima parte dello script e una nella terz'ultima riga.
6. 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à di scorrimento risulterà essere circa la metà.
7. var sBulletChar = ">>" è il simbolo da anteporre ai titoli
8. Va settato l'indirizzo dei feed della sorgente dei titoli e sostituito a quello di questo blog.

Demo
Clicca qui

Come vedete nello screenshot viene mostrato con lo stesso script anche il widget degli Ultimi commenti. Per poterlo creare va sostituito l'URL dell'immagine Top News con un altro

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

come il precedente che ha la scritta Commenti. Al posto dell'indirizzo dei feed del blog va inserito quello dei feed dei commenti. Nel caso di questo blog tale URL è il seguente

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

È anche possibile mostrare il widget senza l'immagine iniziale. Se si sceglie questa configurazione va eliminato questo blocco 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;

Concludo ricordando che quando si passa con il mouse sopra a un titolo lo scorrimento cessa.