Pubblicato il 21/10/11 - aggiornato il  | 14 commenti :

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


14 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
  9. Salve, è possibile modificare l'effetto rotazione con un altro tipo di effetto?

    RispondiElimina
  10. Non capisco il senso della domanda. La "rotazione" non è un effetto ma un modo per mostrare più cose in uno stesso spazio
    @#

    RispondiElimina
    Risposte
    1. Forse mi sono spiegata male, è possibile dare un effetto di comparsa al testo?

      Elimina
  11. Una specie di dissolvenza in entrata e in uscita? Non con questo semplice JavaScript senza librerie esterne
    @#

    RispondiElimina
  12. Ciao ed i miei più sentiti complimenti per il tuo ottimo lavoro in questo blog! Ti ringrazio per questo codice, mi sarà molto utile per creare un gadget per blog nel mio nuovo spazio online! Alla prossima :)

    RispondiElimina

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