Ciao a tutti, cari amici del Taccuino di Grazia!

In questo post impareremo insieme a realizzare un piccolo widget artistico per siti che mostra in tempo reale la fase lunare corrente, anche visivamente parlando (la luna cambia graficamente forma in base alla sua fase)!

Offro gratuitamente questo tipo di widgets nel mio piccolo sito grafico, Dreamland, ma qualche esempio pronto da utilizzare potete trovarlo anche qui nel Taccuino.

Un esempio 

Il codice di base che utilizzo

Ecco qui sotto il codice completo (io lo uso da tantissimi anni!) per realizzare da voi l’utilità e personalizzarla, codice da aprire con il vostro editor HTML preferito (programma con cui si creano i siti web classici). Vanno bene anche i cari, vecchi e sempre funzionanti editor quali ad esempio Microsoft Sharepoint Designer 2007 o altri semplificati che hanno la modalità visuale (anche il blocco note di Windows andrebbe benissimo, ma ovviamente i programmi che ci permettono di visualizzare sia il codice che la modalità visuale, per l’appunto, li trovo decisamente più comodi!) .

Il codice per realizzare da zero l’utilità potete trovarlo cliccando qui

Copiate e incollate il codice nel vostro editor. Se provate a visualizzare l’anteprima nel vostro programma, vedrete tutte le mie “personalizzazioni” che ora spiegherò passo passo.

Cambiare lo Sfondo 

Il widget “galleggia” sopra un’immagine di sfondo (nel mio esempio è una nuvola). Per usare la tua immagine, cerca questa sezione nel codice CSS:

.style1 {
    border-width: 0px;
    background-image: url('https://iltaccuinodigrazia.altervista.org/.../faselunarebackground.png'); 
}

Cosa fare: Sostituisci l’URL tra le parentesi con il link della tua immagine di sfondo, che avrai creato in precedenza. Assicurati che l’immagine sia di circa 180×229 pixel.

I Colori della Luna (Luce e Ombra)

Sapevi che la luna nel widget viene “disegnata” riga per riga? Lo script usa due minuscole immagini GIF colorate, già caricate da me, nel mio sito classico. Cerca queste variabili nel JavaScript:

var black = "https://dreamland.altervista.org/kaki.gif"; // Colore dell'ombra
var white = "https://dreamland.altervista.org/yellow.gif"; // Colore della luce

Cosa fare: Se vuoi una luna di un altro colore (magari azzurra o argentata), sostituisci questi link con quelli dei tuoi quadratini colorati.

Grandezza e Font del Testo

Per cambiare il colore e il tipo di carattere delle informazioni lunari, osserva queste righe:

Font Globale: In cima al codice, sotto .class1, puoi cambiare font-family:'Comic Sans MS'; con il tuo font preferito (es. 'Verdana' o 'Georgia').

Colore Testo Dinamico: Cerca la riga <font face="Tahoma" size="1,5" color="#DDB0A8">.

Cosa fare: Cambia il codice esadecimale #DDB0A8 con il colore che meglio si abbina alla tua cornice.

La Firma e il Link 

In fondo al widget c’è una firma posizionata con un “Layer” (un elemento con posizionamento assoluto). È fondamentale per i crediti! Cerca questo blocco:

<div id="layer1" class="style5" style="position: absolute; width: 153px; ...">
    <a target="_blank" href="https://iltaccuinodigrazia.altervista.org/">
        <span class="style6">Il Taccuino di Grazia</span>
    </a>
</div>

Cosa fare:

1. Sostituisci l’URL href="..." con l’indirizzo del tuo sito.

2. Cambia la scritta “Il Taccuino di Grazia” con il tuo nome o quello del tuo blog.

3. Se la scritta non è centrata bene, gioca con i valori left: 21px; e top: 243px; per spostarla millimetricamente.

Protezione: Il codice include già uno script per disabilitare il tasto destro, per sicurezza.

Offrire il widget come regalo ai visitatori 

Ora che hai creato il widget, non ti resta che caricare online la tua pagina html e inserirla in un “frame“, una finestrella che lo isolerà dai tuoi contenuti web. Ecco il codice della mia utilità pronta, che se vuoi puoi inserire direttamente in un gadget html/javascript di Blogger o nel tuo sito, oppure prenderlo come modello per realizzare il frame contenitore del tuo widget. Clicca sui due quadratini che si visualizzeranno quando passi il mouse sul box, per copiarlo.

Codice della mia utilità pronta

<p align="center">
<iframe src = "https://iltaccuinodigrazia.altervista.org/wp-content/uploads/2026/04/fasilunaritaccuino.htm" allowtransparency = "true" name="I2" border="0" frameborder="0" scrolling="no" target="_blank" style="width: 196px; height: 279px" id="I2"></iframe>

Se lo utilizzi come modello, cambia l’url con quello della pagina web in cui è contenuta la tua utilità.

♥ Dunque, cari amici, se questo tutorial vi è stato utile, chiedo solamente un piccolo favore: linkate il mio sito come fonte, tutto qui. 

E voi, amici blogger e lettori? Amate ancora i widgets per siti come abbiamo imparato a conoscerli anni fa? So che il web cambia alla velocità della luce, ma personalmente mi diverto molto a realizzare ancora queste piccole utilità artistiche :)

Un abbraccio di cuore e al prossimo post!

Ciao ciao da Grazia