Pubblicato il 21/10/11e aggiornato il

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




8 commenti :

  1. Per wordpress intendi anche quelle con wordpress.com?

    RispondiElimina
  2. @Stefano
    Dovrebbe funzionare anche in quelle.

    RispondiElimina
  3. Non mi funziona nè con Wordpress nè con Blogger.
    Ho copiato il codice, ho inserito 4 frasi al posto di Testo1-4, ma il rettangolo rimane vuoto.

    RispondiElimina
  4. @Stefano
    Forse è il caso di inserire ulteriori informazioni
    1)Non si possono inserire frasi con apostrofi o virgolette. Anche uno solo impedisce il funzionamento
    2)Per vedere se funziona ricopiare prima il codice così com'è e successivamente effettuare le modifiche
    3)Non si può inserire javascript attraverso Windows Live Writer, si può fare solo attraverso l'editor di Blogger e pubblicando la pagina quando siamo in modalità HTML
    4)Si possono aggiungere altre frasi usando la stessa sintassi

    RispondiElimina
  5. Con blogger funziona, mentre con wordpress.com non riesco. Grazie come al solito.

    RispondiElimina
  6. Ciao! Ho notato che nel blog il gadget non parte dal primo testo immesso. Visto che mi serve per delle news "numerate", vorrei che ogni volta che si ricarica la pagina la prima notizia mostrata fosse, appunto la prima. Grazie mille per il lavoro che fai gratis per noi lettori!

    RispondiElimina
  7. @MariaFelicia99
    Questo è strutturato in modo da mostrare gli annunci in modo casuale. Puoi provare con uno dei cinque metodi che ho linkato all'inizio del post.

    RispondiElimina
  8. Bellissimo questo post! Grazie mille per i preziosi consigli.

    RispondiElimina

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.