Come mostrare l'ora e la data corrente nel blog.

Ci sono un sacco di siti che offrono dei graziosissimi orologi digitali da inserire nel blog per mostrare l'ora corrente così come ci sono dei calendari altrettanto carini. Certo però che crearsi un calendario e un orologio da soli e personalizzarlo secondo i colori del nostro blog è tutta un'altra cosa. Utilizzando un meccanismo abbastanza simile a quello per mostrare il numero dei commenti e degli articoli pubblicati dal blog vado a presentare uno script che può essere inserito in un elemento pagina del blog o anche in un singolo articolo che mostrerà la data corrente e l'ora comprensiva di secondi di quando è stata caricata la pagina.

Il codice può essere inserito in Modalità HTML in un post o nelle pagine statiche. Se si vuole mettere in una sidebar occorre andare su Design > Aggiungi un gadget > HTML/Javascript e incollarlo in sezioni del sito. Ecco il codice

<font color="#191919" size="3">Sono le </font><font color="#940F04" size="4"><b><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></b></font><font color="#191919" size="3"> di </font><font color="#940F04" size="4"><b><script type="text/JavaScript">
var mydate=new Date()
var year=mydate.getYear()
if (year <1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domenica ","Lunedì ","Martedì ","Mercoledì ","Giovedì ","Venerdì ","Sabato ")
var montharray=new Array("/ 01 /","/ 02 /"," / 03 /"," / 04 /","/ 05 /","/ 06 /","/ 07 /","/ 08 /","/ 09 /","/ 10 /","/ 11 /","/ 12 /")
document.write(dayarray[day]+" "+daym+" "+montharray[month]+" "+year)
</script></b></font>

Dove possono essere personalizzate le parti evidenziate di rosso e che riguardano

1. La dimensione dei caratteri :size="3" e size="4"
2. Il colore dei caratteri dato dalle sestine esadecimali dei codici dei colori 
3. Il testo da inserire insieme a ora e data "Sono le…  di …"
4. Il grassetto <b> e </b>
5. Si può inserire questo codice tra <div align="center"> e </div> per inserirlo in una posizione centrale sulla sinistra (left) o sulla destra (right)

Ecco come si presenta questo script inserito al centro

Sono le di

Con le dovute personalizzazioni penso che possa essere una cosa che caratterizzi ancora di più il nostro blog.

Osservazioni finali: Se si inserisce in un post lo si deve fare con l'Editor di Blogger e non con Windows Live Writer. Si può anche scegliere di mostrare solo la data o soltanto l'ora visto che i rispettivi codici sono facilmente individuabili.