Come inserire un countdown JQuery su Blogger

La maggior parte delle persone che gestisce un blog preferisce puntare dritto sulla qualità dei contenuti e sulla grafica del blog dimenticandosi di vedere il blog non solo come amministratore ma anche come utente. I visitatori solitamente non leggono mai un articolo intero e si soffermano al massimo 2 minuti per pagina a meno che non ci siano video, gallerie di immagini e robe simili. Per una volta ogni tanto, in occasione di eventi importanti come il compleanno del blog, l'arrivo di una festività a cui si tiene molto o un evento importante potrebbe essere utile mostrare un countdown che faccia il conto alla rovescia per sapere quanto tempo manca prima che arrivi quella data. Il countdown viene usato anche da grossi siti online per annunciare l'arrivo del nuovo anno, l'uscita di un film, l'apertura di biglietti per un concerto ecc. E voi per che cosa lo userete?

Per inserire un countdown JQuery su Blogger dovete andare su Layout > Aggiungi un gadget > HTML/Javascript ed inserire questo codice:

<style>
#stilecountdown {
height: 100px;
width: 220px;
margin: auto;
margin-bottom: 20px;
}
ul.countdown_asp {
margin: 0px;
float: left;
padding: 0px;
}
ul.countdown_asp li {
display: block;
background: #fff url('http://2.bp.blogspot.com/-f_zDvD-gWNA/VFKvpf8eWDI/AAAAAAAAZpQ/9rS7SxG_rg0/s1600/sfondo.png') no-repeat left top!important;
width: 50px;
text-align: center;
position: relative;
float: left;
height: 70px;
margin-left: 5px;
padding: 0px;
}
.timeRefDays, .timeRefMinutes, .timeRefHours, .timeRefSeconds {
width: 52px;
}
ul.countdown_asp li span {
font-size: 22px;
font-weight: bold;
color: #fff;
line-height: 72px;
position: relative;
}
ul.countdown_asp li span::before {content: '';width: 100%;height: 1px;position: absolute;top: 28px}
ul.countdown_asp li p.timeRefDays,
ul.countdown_asp li p.timeRefHours,
ul.countdown_asp li p.timeRefMinutes,
ul.countdown_asp li p.timeRefSeconds {
margin-top: 1em;
color: #444;
text-transform: uppercase;
font-size: 10px;}
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script> <script type="text/javascript">
/*<![CDATA[*/
(function(b) {
    function n() {
        var b = document.createElement("canvas");
        return !(!b.getContext || !b.getContext("2d"))
    }
    b.fn.countdown = function(d, p) {
        function q() {
            currentDate = Math.floor(((new Date).getTime() - e.offset) / 1E3);
            f < currentDate ? (null != a.callback && a.callback.call(this), "undefined" != typeof r && clearInterval(r)) : (seconds = f - currentDate, days = Math.floor(seconds / 86400), seconds -= 86400 * days, hours = Math.floor(seconds / 3600), seconds -= 3600 * hours, minutes = Math.floor(seconds / 60), seconds -= 60 * minutes, "knob" != a.skin ? (0 != a.format && (days = 2 <= String(days).length ? days : "0" + days, hours = 2 <= String(hours).length ? hours : "0" + hours, minutes = 2 <= String(minutes).length ? minutes : "0" + minutes, seconds = 2 <= String(seconds).length ? seconds : "0" + seconds), g.text(days), h.text(hours), k.text(minutes), l.text(seconds), 1 == days ? g.parent().children(".timeRefDays").text("GIORNO") : g.parent().children(".timeRefDays").text("GIORNI"), 1 == hours ? h.parent().children(".timeRefHours").text("ORA") : h.parent().children(".timeRefHours").text("ORE"), 1 == minutes ? k.parent().children(".timeRefMinutes").text("MINUTO") : k.parent().children(".timeRefMinutes").text("MINUTI"), 1 == seconds ? l.parent().children(".timeRefSeconds").text("SECONDO") : l.parent().children(".timeRefSeconds").text("SECONDI")) : (g.val(days).trigger("change"), h.val(hours).trigger("change"), k.val(minutes).trigger("change"), l.val(seconds).trigger("change")))
        }
        var a = {
            skin: "countdown_asp",
            fallbackSkin: "countdown_asp",
            option: {
                day: {
                    max: null,
                    eClass: "days"
                },
                hour: {
                    max: 23,
                    eClass: "hours"
                },
                minute: {
                    max: 59,
                    eClass: "minutes"
                },
                second: {
                    max: 59,
                    eClass: "seconds"
                }
            },
            dateStart: null,
            dateEnd: null,
            format: !0,
            callback: null
        }, e = {
                timezone: !1,
                offset: 0
            };
        d && b.extend(!0, a, d);
        p && b.extend(!0, e, p);
        var f = (new Date(a.dateEnd)).getTime() / 1E3,
            m = (new Date(a.dateStart)).getTime() / 1E3,
            c = (new Date).getTime();
        if (isNaN(f)) alert("Data nulla o non valida mm/dd/yyyy. Esempio: 12/25/2014 19:30:00"), b(this).append("Data nulla o non valida mm/dd/yyyy. Esempio: 12/25/2014 19:30:00");
        else if ("knob" != a.skin || null != m && !isNaN(m))
            if (m > c) alert("Data precedente alla data corrente"), b(this).append("Data evento precedente alla data corrente");
            else {
                !0 == e.timezone && (e.offset = 36E5 * parseInt(e.offset) + 6E4 * (new Date).getTimezoneOffset());
                c = b(this);
                "undefined" != typeof d.option && "undefined" == typeof d.option.global && (d.option.global = {});
                a.option.day = b.extend(!0, {}, a.option.global, a.option.day);
                a.option.hour = b.extend(!0, {}, a.option.global, a.option.hour);
                a.option.minute = b.extend(!0, {}, a.option.global, a.option.minute);
                a.option.second = b.extend(!0, {}, a.option.global, a.option.second);
                "knob" == a.skin.toLowerCase() && n ? (a.skin = a.skin.toLowerCase(), c.append('<input class="' + a.option.day.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.hour.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.minute.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.second.eClass + '" type="text" value="0" data-readonly="true" />'), a.option.day.eClass = "." + a.option.day.eClass.split(" ").join("."), a.option.hour.eClass = "." + a.option.hour.eClass.split(" ").join("."), a.option.minute.eClass = "." + a.option.minute.eClass.split(" ").join("."), a.option.second.eClass = "." + a.option.second.eClass.split(" ").join("."), a.option.day.max = Math.floor((f - m) / 86400), c.find(a.option.day.eClass).knob(a.option.day), c.find(a.option.hour.eClass).knob(a.option.hour), c.find(a.option.minute.eClass).knob(a.option.minute), c.find(a.option.second.eClass).knob(a.option.second)) : ("knob" == a.skin.toLowerCase() || n ? c.append('<ul class="' + a.skin + '" ><li><span class="' + a.option.day.eClass + '">00</span><p class="timeRefDays">Days</p></li><li><span class="' + a.option.hour.eClass + '">00</span><p class="timeRefHours">Hours</p></li><li><span class="' + a.option.minute.eClass + '">00</span><p class="timeRefMinutes">Minutes</p></li><li><span class="' + a.option.second.eClass + '">00</span><p class="timeRefSeconds">Seconds</p></li></ul>') : (a.skin = a.fallbackSkin, c.html('<ul class="' + a.skin + '"><li><span class="' + a.option.day.eClass + '">00</span><p class="timeRefDays">Days</p></li><li><span class="' + a.option.hour.eClass + '">00</span><p class="timeRefHours">Hours</p></li><li><span class="' + a.option.minute.eClass + '">00</span><p class="timeRefMinutes">Minutes</p></li><li><span class="' + a.option.second.eClass + '">00</span><p class="timeRefSeconds">Seconds</p></li></ul>')), a.option.day.eClass = "." + a.option.day.eClass.split(" ").join("."), a.option.hour.eClass = "." + a.option.hour.eClass.split(" ").join("."), a.option.minute.eClass = "." + a.option.minute.eClass.split(" ").join("."), a.option.second.eClass = "." + a.option.second.eClass.split(" ").join("."));
                var g = c.find(a.option.day.eClass),
                    h = c.find(a.option.hour.eClass),
                    k = c.find(a.option.minute.eClass),
                    l = c.find(a.option.second.eClass);
                q();
                if (f > (new Date).getTime() / 1E3) var r = setInterval(function() {
                    q()
                }, 1E3)
            } else alert("Data nulla o non valida mm/dd/yyyy. Esempio: 12/31/2015 18:30:00"), b(this).append("Data nulla o non valida mm/dd/yyyy. Esempio: 12/31/2015 18:30:00")
    }
})(jQuery);
/*]]>*/
</script>
<div id='stilecountdown' class='timerArea' ></div>
<script>
$(document).ready(function() {
$("#stilecountdown").countdown( {
dateEnd:'12/31/2015 00:00:00',
format:true,
callback:function(){alert('Def Ready')}
},
{
timezone:false,
offset:0
}
);
});
</script>

Da questo codice dovete sostituire il mese, il giorno, l'anno, l'ora, i minuti ed i secondi. Li ho scritti in ordine proprio per far notare che prima va messo il MESE e poi il GIORNO. Inoltre l'orario va inserito nello stile europeo, per esempio se avete impostato il countdown alle 7 di sera dove mettere le 19:00.

Se non vi appare il countdown come nell'immagine di questo post significa che dovete aggiornare la libreria JQuery di Blogger all'ultima versione.

LEGGI ANCHE: Come creare un countdown online