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.

• Demo di avvisi scorrevoli postati nel blog -

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.