Come mostrare nel blog un messaggio in funzione dell'ora.

Come impostare una serie di messaggi in funzione dell'ora del browser del lettore che apre i nostri post.

Le persone che leggono i nostri contenuti a tutte le ore. C'è chi lo fa di mattino appena alzato ma ci sono anche quelli a cui piace leggere i nostri contenuti durante la notte. Poi c'è da considerare che molti siti hanno un pubblico più o meno internazionale non fosse altro che per persone di lingua italiana che ci leggono dalle Americhe o dall'Estremo Oriente. 

Potrebbe essere interessante mostrare un messaggio personalizzato in funzione dell'ora del browser di chi legge i nostri post. Quello che è una Buonasera in Italia potrebbe diventare un Buongiorno  in America o una Buonanotte in India. Con il javascript possiamo creare un semplice widget che saluti i lettori in un modo originale in funzione appunto della loro ora corrente. È anche possibile mostrare l'ora al lettore prima o dopo il messaggio stesso. 

Ho creato uno script di esempio che naturalmente può essere cambiato a piacere con messaggi più attinenti al tema del vostro sito. Mi sono limitato a suddividere le ore del giorno in funzione del mangiare e del dormire ma si può essere senz'altro più originali di come non lo sia stato io. In un blog su Blogger si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo codice

<div align="center"> 
<span style="color:#f0f; font-size:16px; font-family:Georgia; font-weight: bold;"> 
Sono le
<script>
ora = new Date();
ora1= ora.getHours();
ora2 = ora.getMinutes();
ora3= ora.getSeconds();
if(ora1==0){ora4=" AM";ora1=12}
else if(ora1 <= 11){ora4=" AM"} else if(ora1 == 12){ora4=" PM";ora1=12} else if(ora1 >= 13){ora4=" PM";ora1-=12}
if(ora2 <= 9){ora2="0"+ora2} document.write(""+ora1+":"+ora2+":"+ora3+""+ora4+""+"");
</script>
<span>
<br/>
 <span style="color:#00f; font-size:16px;font-family:Georgia; font-weight: bold;">
<script>
day1 = new Date()
ora1 = day1.getHours()
if (ora1 < "6") {
document.write(" Così presto e sei già sveglio? ")
}else if (ora1 < "10"){
document.write(" Buon giorno, fatta la colazione? ")
}else if (ora1 < "11"){
document.write(" Comincia a pensare al pranzo ")
}else if (ora1 < "12") {
document.write(" Non dimenticare il brunch? ")
}else if (ora1 < "13") {
document.write(" Se non hai mangiato è ora di farlo! ")
}else if (ora1 < "15") {
document.write(" Bravo meglio il mio blog della siesta ")
}else if (ora1 < "17") {
document.write(" Ciao, buon pomeriggio e buona lettura")
}else if (ora1 < "20") {
document.write(" Se non hai cenato è l'ora di farlo ")
}else if (ora1 < "22") {
document.write(" Buona serata! ")
}else if (ora1 < "23") {
document.write(" Buona sera. È ancora presto per dormire ")
}else if (ora1 >= "23") {
document.write(" Buona notte. Hai intenzione di fare le ore piccole? ")
}
</script>
</span>
</span></span>
</div>

La prima e l'ultima riga di colore viola servono per centrare le due espressioni. Il tag <br/> è un salto di riga e serve per separare l'ora dal messaggio. Se interessa solo il secondo si può eliminare tutta la parte precedente a questo tag con l'esclusione della prima riga. Le ore possono essere cambiate oppure integrate da altre aggiungendo altri elementi con la stessa sintassi. Le espressioni di colore blu possono essere personalizzate. Si salva il widget e si posiziona a piacere nel layout.

La riga evidenziata di giallo serve per personalizzare colori, famiglia di caratteri e dimensioni del testo dell'ora mentre la riga evidenziata di verde serve per personalizzare l'aspetto del messaggio.