Pubblicato il 23/09/11e aggiornato il

Come inserire avvisi o messaggi scorrevoli in Blogger.

Questa la possiamo considerare come la settimana dedicata agli avvisi e ai messaggi. Ho infatti già pubblicato un post su come inserire messaggi scorrevoli dentro una textarea e un altro per mostrare un avviso nella home del blog. Continuando su questa falsariga passo a illustrare un metodo per mostrare del testo scorrevole in un widget del blog con una prerogativa importante che lo differenzia da quelli classici che sfruttano il tag marquee.

All'inizio vedrete la scritta MESSAGGI IMPORTANTI che lampeggerà varie volte prima di sparire. Ricomparirà solo quando si ricaricherà la pagina. Successivamente si visualizzerà un testo con vari messaggi che scorreranno vero sinistra e che continueranno a farlo indefinitamente. Tali avvisi possono essere personalizzati come più ci pare.

Per l'installazione di questo widget, occorre andare su Design > Modifica HTML e salvare il modello completo per un eventuale backup di ripristino. Bisogna quindi cercare la riga </head> e, immediatamente sopra, incollare questo codice

<!-- MESSAGGIO SCORREVOLE INIZIO -->
<script language='JavaScript'>
//<![CDATA[
var testo= "MESSAGGI IMPORTANTI" // PRIMO TESTO
var message= new initArray("PRIMO MESSAGGIO SECONDO MESSAGGIO TERZO MESSAGGIO QUARTO MESSAGGIO"); // GLI ALTRI MESSAGGI
var lentxt= testo.length;
var width_IPCEI= 100;
var count_IPCEI= 14;
var count= width_IPCEI+lentxt;
var nmsg=1;
function initArray() {
  this.length= initArray.arguments.length
  for (var i= 0; i < this.length; i++)
  this[i+1]= initArray.arguments[i]
}
function shift() {
  var outtxt= ""
  var  dif= count-lentxt;
  if (dif>0) {
    for (var i= 1; i<=dif; i++) {
      outtxt= outtxt+" "}
    outtxt= outtxt+testo.substring(0,width_IPCEI-dif)
  }
  else {
    outtxt= testo.substring(-dif,lentxt)
  }
  document.form_IPCEI.text_IPCEI.value= outtxt
}
function scorrimento() {
  var n_IPCEI;
  if ((count_IPCEI>0) && (count-lentxt==0)) {count=0}
  if (count-->0) {
    shift();
    setTimeout("scorrimento()",70) // VELOCITA
  }
  else {
    if (count_IPCEI-->0) {
      if ((count_IPCEI % 2)==0) {
        document.form_IPCEI.text_IPCEI.value= " "
        setTimeout("scorrimento()",300)
        }
      else {
        document.form_IPCEI.text_IPCEI.value= testo;
        if (count_IPCEI==1) {
          setTimeout("scorrimento()",3000)}  // DURATA DELLA PRIMA SCRITTA
        else {
          setTimeout("scorrimento()",300)}
      }
    }
    else {
      now= new Date();
      n_IPCEI= 1+Math.floor(nmsg*Math.abs(Math.sin(now.getTime())));
      if (n_IPCEI>nmsg) { n_IPCEI= nmsg} 
      testo= message[n_IPCEI];
      lentxt= testo.length;
      count= lentxt+width_IPCEI+1;
      setTimeout("scorrimento()",300)
    }
  }
}
window.onload=scorrimento
//]]>
</script>
<!-- MESSAGGIO SCORREVOLE FINE - http://www.ideepercomputeredinternet.com -->

dove occorre inserire il Messaggio iniziale e gli altri messaggi scorrevoli. Si può anche modificare la permanenza del primo messaggio e la velocità di scorrimento di entrambi gli avvisi. Si salva il modello. Adesso andiamo su Design > Aggiungi un gadget > HTML/Javascript e incolliamo in Sezioni del sito

<form name="form_IPCEI" onsubmit="0">
      <input type="text" name="text_IPCEI" style="font-family: 'Trebuchet'; color:#940F04; background: transparent; font-weight: bold; font-size:22px; width:700px; text-align:left; border:0"/></form>

che serve per dare lo stile alla scritta scorrevole. Si possono modificare la famiglia dei caratteri (Trebuchet), il colore di sfondo (transparent attingendo ai codici dei colori), il grassetto della scritta (bold), la dimensione dei caratteri (22px), l'allineamento della scritta (left) e il bordo (totalmente mancante - vedi il post sullo stile dei bordi). Si clicca su Salva e si posiziona con il mouse in Design > Elementi pagina.





5 commenti :

  1. Grazie veramente. Bisognerebbe costruirti un monumento (virtuale).

    RispondiElimina
  2. Grazie per le tue lezioni così chiare e semplici. E' impossibile NON imparare da te. Ti chiedo di inserire lezioni sulla L.I.M.( lavagna interattiva multimediale) per la scuola..sono docente e brancolo nel buio .
    Buon week end

    RispondiElimina
  3. @kamasa54
    Purtroppo non ne ho mai vista una! Conosco il progetto
    http://it.wikipedia.org/wiki/Lavagna_interattiva_multimediale
    e so che dovrebbe essere introdotta in 10.000 scuole ma nulla più.

    RispondiElimina
  4. un altro ottimo consiglio, questo strumento potrebbe portare ad aumentare i nostri iscritti ai feed e alla pagina fan ;)

    RispondiElimina
  5. Ciao Ernesto,grazie per i tuoi consigli,sei molto bravo e spieghi molto bene.Bravo.Buona giornata

    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.