Come installare un widget scorrevole su Blogger che mostra i titoli dei post nelle versioni mobile e desktop

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 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 dedurre l’aspetto anche dallo screenshot.

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

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

 

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

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.

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

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.

Tags:

Add a Comment

X