Pubblicato il 04/04/16 - aggiornato il  | 12 commenti :

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://lh4.googleusercontent.com/-3qUORqdN5ZI/UirXoodvGXI/AAAAAAAAjYM/81Mokq45Ym8/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

ultime-notizie-blogger


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.


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://lh3.googleusercontent.com/-nuYx3OTFwo4/UireV7lJkzI/AAAAAAAAjYc/pvJjFr7tsEU/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://lh4.googleusercontent.com/-3qUORqdN5ZI/UirXoodvGXI/AAAAAAAAjYM/81Mokq45Ym8/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.




12 commenti :

  1. Caro Ernesto, ho inserito questo widget. Alla fine (anche nella tua demo) compare "undefined". E' proprio necessario? Non si potrebbe piuttosto cambiarlo con un "fine"? Grazie e ciao.

    RispondiElimina
    Risposte
    1. Non è che undefined sia presente nel codice. Se tu digiti F3 o Ctrl+F vedrai che non c'è nessun tag undefined quindi non si può cambiare con un'altra espressione. Undefined viene fuori quando un feed non è strutturato in modo semanticamente perfetto. Associare feed a marquee non lo è. In definitiva non si può far nulla :)
      @#

      Elimina
  2. Allora ce lo teniamo così :) Grazie carissimo per la tua consueta cortesia.

    RispondiElimina
  3. Buongiorno. Ho notato con entusiasmo che il widget viene visualizzato anche nella versione mobile!!
    Mi chiedevo però, quale parametro bisogna modificare per la distanza tra un articolo e l'altro.
    Inoltre vorrei sapere se è possibile modificare l'uscita del testo scorrevole nel box. Mi spiego meglio. Ora mi esce a metà della barra mentre io vorrei farlo uscire da destra.
    La ringrazio.

    RispondiElimina
    Risposte
    1. Il widget si vede nella versione mobile se si utilizza un browser che supporta il tag marquee come Chrome o Firefox. Per il resto non ti posso rispondere in un commento. Però riprenderò questo post tra qualche giorno e magari potrò aggiungerci altre informazioni (senza impegno)
      @#

      Elimina
    2. Ho verificato per quanto riguarda l'uscita del testo. Dipende dal numero dei caratteri che ha un titolo. Per quanto riguarda la distanza tra si può ovviare mettendo ++NEWS++ al posto dei >>

      Visto che ci sono le chiedo se ha idea di come si possa mettere un'immagine all'interno di un menù. Le allego lo screenshot per farle capire meglio http://imgur.com/a/heZrO
      La ringrazio.

      Elimina
    3. Dipende ovviamente dal menù :) Non c'è una regola generale. Il codice di una immagine è questo
      <img src='URL IMMAGINE' />
      che dovresti provare a incollare al posto del testo di una voce del menù. Non sempre però il menù supporta una tale sostituzione
      @#

      Elimina
  4. Ora provo e le dico se funziona, così sarà fonte d'ispirazione per un suo prossimo articolo;)

    RispondiElimina
  5. Buonasera. Volevo chiederle un account online simile a Google Foto. (ex Piacasa). Mi sta dando troppi problemi per utilizzare immagini sul blog.
    Ogni volta che cambio account Google mi scompaiono dal blog.

    Consigli??

    RispondiElimina
    Risposte
    1. Non vedo l'esigenza di cambiare account Google visto che si possono creare fino a 100 blog con un unico account. Con la piattaforma Blogger la scelta migliore è quella di Google Foto. Le alternative hanno tutte bisogno di fornire il link diretto. Una scelta interessante è Imgur che rende la cosa semplice però non conosco i limiti temporali e di spazio dell'hosting gratuito che viene offerto
      http://www.ideepercomputeredinternet.com/2017/03/imgur-hotlink-image-addon-chrome.html
      @#

      Elimina
  6. Si senza dubbio ma, avendo più account Google, non capisco il perché ogni qualvolta che faccio il logout mi tolga la visualizzazione delle immagini nel blog. Le è mai capitato?

    RispondiElimina
    Risposte
    1. No. Le immagini sono sempre visibili nel blog. Non lo sono negli Album. Puoi provare a settare la Privacy degli album come Pubblici
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.