Come creare un countdown

Ci sono diversi siti specializzati che offrono widget personalizzati che mostrano il numero di giorni, ore, minuti e secondi che mancano allo scoccare di un evento. Si possono creare countdown per Capodanno, per Natale o anche per un compleanno o per un avvenimento sportivo.

Se siete assidui lettori di questo sito avrete capito che a me non piacciono molto le risorse esterne per creare delle personalizzazioni in un sito. Creano un link a un sito che spesso non ha niente a che vedere con il nostro disperdendo page rank, che potrebbe essere impiegato in altro modo.

Abbiamo già visto che si può per esempio creare in proprio un countdown per Natale e Capodanno personalizzando l'immagine dello stesso. Quello stesso codice può essere modificato nella immagine, nel testo e nella data, per creare un countdown adatto a tutte le circostanze.






Se avete un sito e se siete utenti di Blogger, potete andare su Layout -> Aggiungi un gadget -> HTML/Javascript e, in Sezioni del sito, per poi incollare questo codice:


003366; font-size: 100%; font-weight:bold; left: 0px; padding: 7px; z-index: 9999;">
="https://lh6.googleusercontent.com/-8tZTBPfD-rU/UqrSq--0PaI/AAAAAAAAlLo/-NxUG6PscwU/s250/buon-anno-250.gif" style="display: block;clear: both;"/>


Si salva e si posiziona per poi visualizzare un risultato come questo.



Il testo colorato di blu può essere modificato e si può scegliere data e ora dell'evento, indicandola in stile anglosassone. Per esempio per Capodanno si indica new Date("January 01, 2020 00:00:00"); .






Lo stesso codice può essere usato anche per Natale o per Pasqua modificando la data e il testo. Quando termina il countdown, viene mostrata la scritta messaggio_completo = "Auguro a tutti un Buon Anno"; che ovviamente può essere cambiato se si modifica la tipologia di conto alla rovescia. 

Il tag color: #003366; font-size: 100%; serve per settare colore e dimensione in percentuale dei font della scritta. L'immagine visualizzata sopra al conto alla rovescia è quella indicata nell'URL colorato di rosso.

Si tratta di una immagine animata in formato GIF che può essere sostituita da un'altra, dopo che sia stata caricata online, per esempio creando una Bozza di un post nel nostro account Blogger.





COUNTDOWN DIGITALE


Se si preferisce un Countdown digitale con questo stile

countdown-digitale-personalizzato


si può usare questo codice






da incollare come il precedente in un widget HTML/Javascript. Si clicca su Salva e si posiziona il widget con il drag&drop. Si possono personalizzare i parametri colorati di rosso e si può sostituire l'immagine di background incollando un altro URL al posto di quello colorato di viola. Se nel vostro modello avete già JQuery, potete evitare di incollare la riga evidenziata di verde. Ho pubblicato una Demo del countdown.


Il parametro essenziale da settare è quello della data e ora del termine del countdown evidenziata di giallo. Concludo ricordando che questi stessi codici funzionano anche su Wordpress e altre piattaforme.

Posta un commento

Comments (0)

Nuova Vecchia