Pubblicato il 13/12/13e aggiornato il

Countdown personalizzato per Capodanno.

Come inserire un contatore personalizzato di giorni, ore, minuti e secondi per il Capodanno.
Nel post dedicato agli effetti da inserire nel blog per le Feste di Natale era presente anche un countdown che mostra i giorni, le ore, i minuti e i secondi che mancano alla mezzanotte del 31 Dicembre 2013 ovvero all'inizio del 2014.  Si tratta di un contatore completamente testuale che potrebbe essere abbellito con l'inserimento di una immagine magari in GIF. La difficoltà di creare immagini animate in formato GIF può essere superata leggendo questo tutorial mentre se si è trovata una immagine in GIF su internet che ci piace ma che è di dimensioni non adatte si può ridimensionarla usando il tool gratuito GIFResizer.

Si tratta di un programma freeware che non ha neppure bisogno di installazione e che può essere allocato in una cartella di Dropbox per poterlo usare in tutte le nostre postazioni. Dopo aver caricato l'immagine animata su Picasa e averne ottenuto il link diretto possiamo creare il widget.

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

<div align="center">
<div style="color: #fa6558; font-size: 120%; font-weight:bold; left: 0px; padding: 7px; z-index: 888;">
<img src="https://lh6.googleusercontent.com/-8tZTBPfD-rU/UqrSq--0PaI/AAAAAAAAlLo/-NxUG6PscwU/s250/buon-anno-250.gif" style="display: block;clear: both;"/>
<div id="contatore_capodanno"></div>
<script language="JavaScript">
var bp_date_target = new Date("January 01, 2015 00:00:00");
var bp_date_now = new Date();
var messaggio_completo = "Auguro a tutti un Buon Anno";
if (bp_date_now >= bp_date_target) {
document.getElementById("contatore_capodanno").innerHTML =  messaggio_completo;
} else {
bp_time_difference = Math.floor(((bp_date_target - bp_date_now).valueOf()) / 1000);
display_time_difference(bp_time_difference);
}
function display_time_difference(bp_time_difference) {
if (bp_time_difference <= 0) {
document.getElementById("contatore_capodanno").innerHTML =  messaggio_completo;
return;
}
bp_count_down_message = "Mancano " + bp_format_seconds(bp_time_difference, 86400, 100000) + " Giorni " + bp_format_seconds(bp_time_difference, 3600, 24) + " Ore " + bp_format_seconds(bp_time_difference, 60, 60) + " Minuti e " + bp_format_seconds(bp_time_difference, 1, 60) + " Secondi" + " a Capodanno!";
document.getElementById("contatore_capodanno").innerHTML = bp_count_down_message;
setTimeout("display_time_difference(" + (bp_time_difference - 1) + ")", 1000);
}
function bp_format_seconds(secs, num1, num2) {
num = ((Math.floor(secs / num1)) % num2).toString();
if (num.length < 2) s = "0" + num;
return "" + num + "";
}
</script></div></div>

dove oltre che personalizzare l'immagine animata si può anche modificare il testo del messaggio. Concludo ricordando che per Capodanno è anche possibile abbellire il blog con i fuochi artificiali.


Ovviamente modificando la data e l'immagine animata si può modificare questo javascript per usarlo per eventi anche i più diversi quali compleanni o matrimoni.




3 commenti :

  1. Ciao Ernesto!
    Help!! Una volta nella bacheca di Blogger cliccando in alto a destra su Impostazioni --> Prodotti, compariva una schermata da cui si poteva accedere ai vari Picasa, Google Analytics, Google Webmaster, ecc. Ora hanno cambiato tutto e non riesco a capire come accedere a questi programmi... Tu ne sai qualcosa?
    Grazie, ne approfitto per augurarti Buone Feste :)

    RispondiElimina
    Risposte
    1. Buone Feste anche a te. Ora si può accedere dalla homepage di Google cliccando sulla icona delle App a forma di griglia 3x3. Poi si può andare su Altro per visualizzare tutti i servizi Google collegati all'account
      @#

      Elimina
    2. Però cliccando lì non mi mostra né Picasa, né Analytics, né Webmaster, né Adsense, ecc.
      Mi mostra solo cose come YouTube, Maps, Traduttore, Shopping e via avanti, anche dopo aver cliccato su "Altri servizi".
      Invece alla fine sono riuscita ad accedere cliccando su Impostazioni --> Strumenti dati --> (Dashboard) Visualizza i dati dell'account.
      Certo che più complicata di così non potevano farla, prima bastava un semplice clic per vizualizzare tutto! :(

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.