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>
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
- La dimensione dei caratteri :size="3" e size="4"
- Il colore dei caratteri dato dalle sestine esadecimali dei codici dei colori
- Il testo da inserire insieme a ora e data "Sono le… di …"
- Il grassetto <b> e </b>
- 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.
Che idea carina, grazie!
RispondiElimina@LaDamaBianca
RispondiEliminaE' vero! Sono rimasto soddisfatto anch'io del risultato :-)
Modificato un po' per adattarlo alla mia sidebar e ai miei gusti. Grazie mille. Peccato solo che non possa autoaggiornarsi costantemente.
RispondiEliminaGrazie. Anche io l'ho un pò modificato lasciando la data e togliendo l'ora
RispondiEliminacarinissimo!!
RispondiEliminase volessi aggiungere un'immagine
all'ora c'e' un modo?
grazie e buona giornata!
@nanussa
RispondiEliminaSpiegati meglio
ciao parsifal, intendo un'immagine come una gif oppure anche una semplice foto e sull'immagine inserire l'ora.
RispondiEliminami va bene anche al lato o sopra.
grazie in anticipo.
@nanussa
RispondiEliminaCi penserò
ok, grazie e buona serata!!
RispondiEliminaBuona sera, Sig. Ernesto.
RispondiEliminaRieccomi 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
@Joy
RispondiEliminaIl 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.
Grazie.
RispondiEliminaNo, 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
@Joy
RispondiEliminaDevi 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.
Grazieeee !! E' propio quello che cercavo!! :)
RispondiElimina....uffa non funziona sempre :/ ...potrebbe dipendere dalla connessione?
RispondiElimina@Pixia61
RispondiEliminaNon 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.
L'ho messo in un widget .....ma non sempre funziona :/
RispondiElimina...ora pare che appaia tutto...mi sa che sbagliavo a codice :)
RispondiElimina@Pixia61
RispondiEliminaMi sa anche a me ;)
Ma se voglio inserire uno sfondo a questo orologio è possibile farlo?
RispondiEliminaSì. Incolla questa riga
Elimina<div style="background-color: #ffff00;">
prima del codice
e quest'altra riga
</div>
alla fine del codice. Il codice #ffff00 è quello del giallo che naturalmente puoi cambiare con un altro
@#
Fatto Grazie Ernesto
Elimina