Pubblicato il 07/06/17 - aggiornato il  | 14 commenti :

Widget scorrevole di Blogger che mostra i titoli dei post nelle versioni mobile e desktop.

Come installare su Blogger un widget che mostra un banner scorrevole nella versione mobile e in quella desktop con i titoli degli ultimi post.
Riprendo un post di qualche tempo fa a fronte di commenti e di richieste di delucidazioni ricevute. Si tratta di visualizzare una scritta scorrevole con colori personalizzabili dello sfondo e del testo che mostra i titoli degli Ultimi post.

Quando si passa con il mouse sopra al widget il titolo puntato dl cursore si colora diversamente e lo scorrimento si blocca. Cliccando sul titolo si aprirà il corrispettivo articolo.

Lo script si basa sul tag HTML <marquee> che è stato recentemente deprecato da HTML5 ma che continua a essere supportato da tutti i principali browser.

Con questa nuova versione la scritta scorrevole sarà visibile anche nella versione mobile di Blogger. Mi riferisco naturalmente a Temi non Responsive visto che nei Nuovi Temi di Blogger non c'è distinzione tra le versioni mobile e desktop. Per mostrare in modo completo l'aspetto del widget dovrei usare un video o una GIF visto che si tratta di una scritta scorrevole. Si può comunque indovinarne l'aspetto anche dallo screenshot






widget-scorrevole






Ho dato il titolo NEWS al gadget ma se ne può usare un altro oppure fare a meno di inserirlo. Si va su Bacheca -> Layout -> Aggiungi un gadget -> Base -> HTML/Javascript quindi, 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%; padding:3px 3px 3px 3px; 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 quindi con il drag&drop si trascina l'elemento pagina subito sopra a quello Post del blog in quella che viene chiamata Main Area. Subito dopo si va in alto a destra su Salva disposizione.






widget-blogger-scorrevole

Se adesso si apre il blog vedremo la scritta scorrevole nella versione desktop. Per visualizzarla anche nella versione mobile dovremo attivarla e trovare l'ID del widget.

Per attivare la versione mobile si va su Bacheca -> Tema -> Cellulare -> Ruota dentata. Si mette la spunta su Sì. Mostra la versione mobile del tema sui dispositivi mobili. Più in basso nella scelta del Tema si clicca sul Tema Personalizza.

L'attivazione della versione mobile non basta perché occorre rendere visibile il widget anche in questa versione. Su Layout si clicca su Modifica nell'elemento pagina appena creato. Nella finestra che si apre verrà mostrato l'indirizzo nella parte alta. Dovremo scorrere l'URL fino a visualizzare l'ultima stringa

id-widget

Dopo questa acquisizione si va su Tema -> Modifica HTML e con Ctrl+F si cerca appunto tale ID

id-blogger-mobile

Nella prima riga del widget si aggiunge il tag mobile='yes' subito dopo locked='false' quindi si Salva il Tema. A questo punto il gadget diventerà visibile anche da dispositivo mobile

widget-mobile

Eventualmente si possono usare i tag condizionali per mostrare i widget solo in alcune tipologie di pagine.


PERSONALIZZAZIONI DEL WIDGET SCORREVOLE

  1. La larghezza del widget è impostata al 100% del layout ma può essere modificata o sostituita anche dal numero di pixel. L'altezza è invece stata settata a 20 pixel.
  2. Il colore del titolo del post è #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.
  3. background-color:#272727; è invece il colore dello sfondo della barra orizzontale. Infine border: 1px solid #000; definisce il colore, lo stile e lo spessore del bordo del widget. I meno esperti di codice HTML possono consultare il post sui codici dei colori.
  4. 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.
  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à di scorrimento risulterà essere circa la metà.
  6. var sBulletChar = ">>" per impostare i due simboli che precedono i titoli
  7. Va settato l'indirizzo dei feed della sorgente dei titoli e sostituito a quello di questo blog.
  8. Infine var sOpenLinkLocation = "N"; serve per aprire il link in un'altra scheda
Prima dei titoli si può mostrare anche una immagine in questo modo

immagine-widget
Se si preferisce questa scelta stilistica si deve aggiungere il codice

background:url(https://lh4.googleusercontent.com/-3qUORqdN5ZI/UirXoodvGXI/AAAAAAAAjYM/81Mokq45Ym8/s100/top-news.jpg) no-repeat center left;


subito dopo width:100%; e modificare padding:3px 3px 3px 3px; in padding:3px 3px 3px 100px;  se la larghezza della immagine, come quella proposta nell'URL colorato di rosso è di 100 pixel.


14 commenti :

  1. Risposte
    1. Ciao Ernesto. Sto provando a mettere il widget anche nella versione mobile ma mi viene fuori questo: Errore di analisi XML, riga 1230, colonna 44: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".
      Eppure l'ho messo nel punto giusto, devo aggiungerci qualcosa? Grazie.

      Elimina
    2. Vediamo se ho capito bene. Il widget funziona da desktop ma tu lo vorresti vedere anche da mobile?
      Se è così dovresti quindi aggiungere solo la stringa
      mobile='yes'
      nella riga di inizio del widget. Da quanto ho capito non te la salva. Mi sembra molto strano perché mobile='yes' dovrebbe essere salvato senza problemi. Forse non sei stata attenta nell'incollare il codice (ipotesi)
      @#

      Elimina
    3. Ho riprovato ancora una volta ma mi dice la stessa cosa di prima. Ho incollato mobile yes subito dopo locked false e viene così:
      b:widget id='HTML2' locked='false'mobile='yes' title='' type='HTML'

      Elimina
    4. Hai messo tutto attaccato. Prova in questo modo
      locked='false' mobile='yes' title=''

      @#

      Elimina
    5. Fatto! Ora funziona.
      Grazie mille e buona serata.

      Elimina
  2. grazie, molto interessante;
    ho un quesito che non si riferisce a questo post, ma ad una funzione di blogger che non trovo più e che è il seguente: dovrebbe esserci un'attivazione/disattivazione che consente di modificare un post, una configurazione di blogger direttamente dalla visualizzazione della pagina; nella pagina vengono evidenziati un "piccolo cacciavite e una chiave".
    La domanda è: dove diavolo si trova la funzione per attivare/disattivare?
    non la trovo più; è molto probabile che è davanti a me, ma non la vedo;
    è come il cappello sulla testa;
    chiedo qui, che sicuramente qualcuno mi risponderà; la miglior community di blogger che c'è.
    Grazie e buona giornata a tutti. Valter Bruno

    RispondiElimina
    Risposte
    1. La funzione esiste sempre nei vecchi modelli ma è stata rimossa nei nuovi template Responsive
      @#

      Elimina
  3. grazie Ernesto, ma io dovrei avere un vecchio modello, il più semplice che c'è
    vedo comparire in modalità visualizzazione della pagina "il cacciavite+chiave" quindi presumo che potrei disabilitarlo; ma non trovo più dove :(

    RispondiElimina
    Risposte
    1. Non ho capito. Vuoi mostrarlo o disabilitarlo?
      Comunque visto che il tema potrebbe interessare altri tra una mezzoretta ci faccio un instant post
      @#

      Elimina
  4. vorrei provare a disabilitarlo
    grazie! :)

    RispondiElimina
  5. Ciao Ernesto, volevo sapere se è possibile ingrandire un pò i caratteri dei titoli scorrevoli.
    Grazie.

    RispondiElimina
    Risposte
    1. Prova a aggiungere p.e.
      font-size:16px;
      a questo codice
      style="width:100%; padding:3px 3px 3px 3px; border: 1px solid #000; background-color:#272727;"
      in questo modo
      style="width:100%; padding:3px 3px 3px 3px; border: 1px solid #000; background-color:#272727; font-size:16px;"
      oppure aggiungilo a quest'altro in questo modo
      style="position:relative;overflow:hidden;width:100%; height:20px; font-size:16px;"
      dove al posto di 16px puoi mettere il numero che credi più giusto
      @#

      Elimina

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