31 gennaio 2011

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.


19 commenti:

  1. @LaDamaBianca
    E' vero! Sono rimasto soddisfatto anch'io del risultato :-)

    RispondiElimina
  2. Modificato un po' per adattarlo alla mia sidebar e ai miei gusti. Grazie mille. Peccato solo che non possa autoaggiornarsi costantemente.

    RispondiElimina
  3. Grazie. Anche io l'ho un pò modificato lasciando la data e togliendo l'ora

    RispondiElimina
  4. carinissimo!!
    se volessi aggiungere un'immagine
    all'ora c'e' un modo?
    grazie e buona giornata!

    RispondiElimina
  5. ciao parsifal, intendo un'immagine come una gif oppure anche una semplice foto e sull'immagine inserire l'ora.
    mi va bene anche al lato o sopra.
    grazie in anticipo.

    RispondiElimina
  6. Buona sera, Sig. Ernesto.
    Rieccomi qui, spero proprio di non disturbarla.
    Le chiedo: sto usando questo ottimo codice per la data (ho omesso l'ora), dapprima l'avevo inserito con il gadget "Aggiungi HTML/Java", ma era momentaneo, perché lo vorrei posizionare giusto sopra la casella "Cerca nel blog", che si trova sullo sfondo. Ora, sto facendo dei tentativi, ma non appare proprio nulla nel blog. Considerando la posizione della casella di ricerca, non è che ci siano molte possibilità. Io ora l'ho inserito alla fine dell'elemento: /* Navigation (con tutti i suoi "layout header nav main"...). Subito dopo questo elemento c'è l'elemento: /* Search Form e prima di questo ho inserito il codice. Nessun errore ma non appare nulla. Un suggerimento?
    Grazie.
    Joy

    RispondiElimina
  7. @Joy
    Il codice funziona quindi hai fatto un errore nell'inserirlo. Ricontrolla delle volte basta tralasciare un apostrofo per impedirne la visualizzazione. Inoltre non metterlo nello stesso widget insieme a altre cose.

    RispondiElimina
  8. Grazie.
    No, ma infatti fino a ieri era nella sidebar, ma era temporanea lì, non avrei lasciato la data nella sidebar e da "Elementi pagina" il posizionamento è limitato. Oggi l'ho rimossa e ho cercato di posizionare il codice a livello di HTML. E qui c'è il problema, per posizionarla dove io vorrei, fin'ora non ho trovato il punto preciso nel codice. E cumunque mi chiedo: al di là di questo specifico codice, un qualsiasi altro per inserire una data lì, sopra la casella di ricerca, dove si deve posizionare nel codice del blog?
    Joy

    RispondiElimina
  9. @Joy
    Devi sempre e comunque andare su Design > Aggiungi un gadget > HTML/javascript e incollare il codice in Sezioni del sito. Dopo aver cliccato su Salva in Design > Elementi pagina trascini l'elemento HTML nella posizione desiderata quindi clicchi nuovamente su Salva.

    RispondiElimina
  10. Grazieeee !! E' propio quello che cercavo!! :)

    RispondiElimina
  11. ....uffa non funziona sempre :/ ...potrebbe dipendere dalla connessione?

    RispondiElimina
  12. @Pixia61
    Non credo dipenda dalla connessione. Se lo hai messo in un widget dovrebbe funzionare sempre se invece è in un post devi stare attenta a riaprirlo perché Blogger potrebbe cambiare qualcosa automaticamente.

    RispondiElimina
  13. L'ho messo in un widget .....ma non sempre funziona :/

    RispondiElimina
  14. ...ora pare che appaia tutto...mi sa che sbagliavo a codice :)

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.