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.

 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YVEC68Jt22tuAmPS84z7IctCUwVEchoDz-d3oDo_mhlZrTd0PeR75HpieTTVfx3pBon-oZktj1ulvCqqpM3IJuqBhHqnihbgIWvyoree7pZfAZc-3zF1eCZPERP3sFO7FbySUd0T1tI/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.