Come mostrare delle frasi a rotazione in uno stesso spazio.

In questo blog mi propongo di aiutare a risolvere delle problematiche che possono presentarsi nei siti sulla piattaforma Blogger che trattano argomenti i più variegati. Questo lo faccio a scapito del mio blog la cui grafica risale a tre anni fa e che colpevolmente non mi decido ancora a rinnovare. In una email che ho ricevuto attraverso il modulo di contatto mi è stato posa la domanda di come inserire degli annunci nel blog in modo che si visualizzassero a rotazione in una stessa zona del layout. Ho già recentemente presentato delle funzionalità simile nei seguenti post

1. Come inserire un avviso flottante con link a Facebook, Twitter e Google+ -
2. Come inserire avvisi o messaggi scorrevoli -
3. Come inserire testo o immagini lampeggianti -
4. Generatore automatico di frasi casuali -
5. Invito a leggere un post a caso inserito alla fine del post -

In questo caso l'idea è quella di creare un contenitore che potrebbe essere un rettangolo in cui si visualizzano a ripetizione tutta una serie di frasi senza bisogno di rinfrescare la pagina. Può essere utile per mostrare tutta una serie di messaggi ai vari utenti che frequentano il sito.

Il codice che vado a presentare può essere incollato in un gadget HTML/Javascript, in un post o in una pagina statica in Modalità HTML. Ecco un esempio

Mentre il codice da incollare è il seguente

<script type="text/javascript">
var TextIndex = 0;
frase = new Array();
frase[0] = "Testo1";
frase[1] = "Testo2";
frase[2] = "Testo3";
frase[3] = "Testo4";
TextIndex = Math.random()*(frase.length);
TextIndex = Math.floor(TextIndex);
function rotazione() {
if (TextIndex == frase.length) {TextIndex = 0;}
document.getElementById("ruotare").innerHTML = frase[TextIndex];
TextIndex++;
setTimeout("rotazione();",5000);
}
</script>
<div id="ruotare" style="align:center; height:60px; width:400px; border: solid 1px #003366; color:#003366; background-color: #FFEAE9; font-weight:bold; font-size:14px; margin:0px auto; padding:8px;"></div>
<script type="text/javascript">rotazione();</script>

dove le frasi da ruotare vanno inserite al posto di TestoX. Lo stile del rettangolo è evidenziato di viola e può essere modificato per quanto riguarda la posizione (center), l'altezza (60px), la larghezza (400px), lo stile del bordo, il colore del testo (#003366), il colore di sfondo (#FFEAE9), il grassetto (font-weigh: bold), la dimensione dei caratteri (14px) il margine rispetto all'esterno (margin) e il margine interno (padding). Il valore 5000 è in millisecondi e rappresenta il tempo di permanenza di ciascun testo. Aumentando tale parametro la rotazione sarà più lenta.
Concludo osservando che questa personalizzazione può essere installata anche su piattaforme diverse di quelle di Blogger (Splinder, Wordpress, ecc).