How To Add Together Jquery Countdown Timer Widget Inwards Blogger

Have you lot ever idea of adding a Milestone Countdown timer widget to your Blogger Blog? From fourth dimension to fourth dimension nosotros convey alter to our blogs or website, mayhap it's your blog’s anniversary, novel production launch or something else. Influenza A virus subtype H5N1 countdown timer tin hand the sack ever proceed your readers updated almost something that’s going to happen. This could plough out to hold upwardly therefore helpful inwards creating magnificent involvement alongside your readers because non every twenty-four hours you lot unloose a novel product. Well inwards this article, nosotros volition present you lot how to add together a countdown timer widget inwards your Blogger posts, pages, sidebar too domicile page.

If you lot are using Blogger.com, too therefore you lot know in that place are no such default countdown gadgets. Therefore, nosotros accept to integrate it yesteryear using closed to third-party plugins too coding. For that reason, nosotros accept developed a unproblematic silent essential count downward plugin for Blogger that functions merely similar other WordPress plugins available on the web. This plugin is called the MBL Countdown timer.

The First affair you lot postulate  to login into your blogger concern human relationship too become to Template >> Edit HTML. Now inwards the template coding search for </head> an merely higher upwardly it glue the next slice of Javascript too CSS coding. (We are non adding the CSS code separately because it volition salve your fourth dimension too would hand fair plenty same, productive results).

<style>
#countdown_def {
height: 100px;
width: 230px;
margin: auto;
margin-bottom: 30px;
}

ul.countdown_default {
margin: 0px;
float: left;
padding: 0px;
}

ul.countdown_default li {
display: block;
background: #fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJWPK2ZipIOv_0moslL5v7y8renGpKa6KNyUVpbUudnsT5QIUIbf1ZFiSir-pWNIZKLm_yP4lU-KkVGnk3aA_ytn0C8K5hUujHpCSq2LVQdwl3jyaNlHWcHKIsyH8zuV9r-a9YB3VCRsiJ/s1600/js_bac.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: 50px;
}
ul.countdown_default li bridge {
font-size: 22px;
font-weight: bold;
color: #fff;
line-height: 72px;
position: relative;
}

ul.countdown_default li span::before {content: '';width: 100%;height: 1px;position: absolute;top: 31px}
ul.countdown_default li p.timeRefDays,
ul.countdown_default li p.timeRefHours,
ul.countdown_default li p.timeRefMinutes,
ul.countdown_default li p.timeRefSeconds {
margin-top: 1em;
color: #909091;
text-transform: uppercase;
font-size: 10px;}
</style>

<script type="text/javascript">
/*<![CDATA[*/
/*MBL jQuery Countdown Widget*/
(function(b) {
    business office n() {
        var b = document.createElement("canvas");
        furnish !(!b.getContext || !b.getContext("2d"))
    }
    b.fn.countdown = function(d, p) {
        business office 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 -= sixty * minutes, "knob" != a.skin ? (0 != a.format && (days = two <= String(days).length ? days : "0" + days, hours = two <= String(hours).length ? hours : "0" + hours, minutes = two <= String(minutes).length ? minutes : "0" + minutes, seconds = two <= 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("Day") : g.parent().children(".timeRefDays").text("Days"), 1 == hours ? h.parent().children(".timeRefHours").text("Hour") : h.parent().children(".timeRefHours").text("Hours"), 1 == minutes ? k.parent().children(".timeRefMinutes").text("Minute") : k.parent().children(".timeRefMinutes").text("Minutes"), 1 == seconds ? l.parent().children(".timeRefSeconds").text("Second") : l.parent().children(".timeRefSeconds").text("Seconds")) : (g.val(days).trigger("change"), h.val(hours).trigger("change"), k.val(minutes).trigger("change"), l.val(seconds).trigger("change")))
        }
        var a = {
            skin: "countdown_default",
            fallbackSkin: "countdown_default",
            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,
            1000 = (new Date(a.dateStart)).getTime() / 1E3,
            c = (new Date).getTime();
        if (isNaN(f)) alert("Invalid or nada dateEnd mm/dd/yyyy. Example: 12/25/2013 17:30:00"), b(this).append("Invalid or nada engagement mm/dd/yyyy. Example: 12/25/2013 17:30:00");
        else if ("knob" != a.skin || nada != 1000 && !isNaN(m))
            if (m > c) alert("Starting engagement is greater than the electrical flow date"), b(this).append("Starting engagement is greater than the electrical flow date");
            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("Invalid or nada dateStart mm/dd/yyyy. Example: 12/25/2013 17:30:00"), b(this).append("Invalid or nada dateStart mm/dd/yyyy. Example: 12/25/2013 17:30:00")
    }
})(jQuery);
/*]]>*/
</script>

After installing the JavaScript too CSS Paste this code anywhere you lot would similar to display the Countdown widget. For representative if you lot desire to display it somewhere inwards the sidebar then, become to Blogger >> Layout >> Add a Gadget > Add HTML/JavaScript >> And glue the next code inwards the text area. Same goes with Posts too pages.

<div id='countdown_def' class='timerArea' ></div>

<script>
$(document).ready(function() {
$("#countdown_def").countdown( {
dateEnd:'11/12/2014 18:01:30',
format:true,
callback:function(){alert('Def Ready')}
},
{
timezone:false,
offset:0
}
);
});
</script>

Remember: Do non forget to customize the engagement too fourth dimension of your counter widget because this would hold upwardly the master copy affair which volition operate it. From the higher upwardly code, search for 11/12/2014 18:01:30 too supercede it with your personalized engagement too fourth dimension for the timer widget.

Congratulations: You accept successfully learned how to add together a countdown timer widget inwards blogger.  Now become too depository fiscal establishment gibe out your site to run into if it plant according to the excogitation or not.

NOTICE: This widget required 1.7+ jQuery.js file. In representative you lot are using onetime jQuery file, brand certain you lot upgrade it to 1.7 or plus. For Example:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>

We promise this tutorial helps you lot inwards learning how to add together a countdown timer widget inwards blogger sidebar, posts, pages too domicile page. Do permit us know what are you lot thoughts too opinions almost this unique plugin which nosotros accept showcased today.