Inserire nel blog un Calendario e un Orologio digitale personalizzabili.

Come mostrare un Calendario e un Orologio Digitale con colori e font personalizzabili che possono anche essere installati in modo flottante.

Presenterò l'installazione di questo gadget in un blog su Blogger ma può essere usato in tutti i siti che supportano il javascript. Ci sono in rete molti siti che offrono widget molto carini per calendari e orologi da mettere nel nostro sito. La proposta di questo articolo riguarda un Calendario e un Orologio estremamente minimalisti formati da solo testo che però è personalizzabile nei colori e nella famiglia di caratteri per essere in tono con i colori del nostro sito.

L'aspetto del gadget sarà il seguente

con i numeri dei secondi che scatteranno senza bisogno di ricaricare la pagina ma come succede in un qualsiasi orologio digitale.

Si va su Layout > Aggiungi un gadget > HTML/Javascript e e si incolla questo codice

<div style="text-align:center; color:#940F04;  font-size : 22px; font-weight:bold; font-family: Georgia;">
<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> <br/><script>
document.write("<font color='#940F04'>");
var clockid=new Array()
var clockidoutside=new Array()
var i_clock=-1
var thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
var thistime = hours+":"+minutes+":"+seconds
      
function orologio() {
       i_clock++
       if (document.all || document.getElementById || document.layers) {
               clockid[i_clock]="clock"+i_clock
               document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")
       }
} 
function clockon() {
       thistime= new Date()
       hours=thistime.getHours()
       minutes=thistime.getMinutes()
       seconds=thistime.getSeconds()
       if (eval(hours) <10) {hours="0"+hours}
       if (eval(minutes) < 10) {minutes="0"+minutes}
       if (seconds < 10) {seconds="0"+seconds}
       thistime = hours+":"+minutes+":"+seconds
              
       if (document.all) {
               for (i=0;i<=clockid.length-1;i++) {
                       var thisclock=eval(clockid[i])
                       thisclock.innerHTML=thistime
               }
       }
      
       if (document.getElementById) {
               for (i=0;i<=clockid.length-1;i++) {
                       document.getElementById(clockid[i]).innerHTML=thistime
               }
       }
       var timer=setTimeout("clockon()",1000)
}
window.onload=clockon
</script>
<script>orologio()</script></div>

Si salva e si posiziona con il drag & drop. I parametri in rosso possono essere personalizzati e riguardano i codici dei colori, il grassetto (bold se si desidera altrimenti normal) e la famiglia dei caratteri (Georgia).  Questo calendario può anche essere inserito in modo flottante vale a dire si può lasciarlo fisso allo scorrere della pagina in modo che sia sempre visualizzato nel layout.

Basta sostituire il codice evidenziato di giallo con quest'altro

<div style="position:fixed; top:120px; right:75px; text-align:center; color:#940F04; font-size : 22px; font-weight:normal; font-family: Georgia;">

dove ovviamente si possono sempre personalizzare i parametri. La posizione in questo caso sarà a 120 pixel dall'alto (top:120px;) e a 75 pixel dalla destra (right:75px;). Al posto di top e right possono anche essere usati i tag bottom e left con ovvio significato. Concludo ricordando che il tag <br/> rappresenta un salto di riga e può essere tolto o sostituito con una espressione testuale.