The First affair you lot need to login into your blogger concern human relationship as well as become to Template >> Edit HTML. Now inwards the template coding search for </head> an simply inwards a higher house it glue the next slice of Javascript as well as CSS coding. (We are non adding the CSS code separately because it volition salve your fourth dimension as well as 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/AVvXsEg2hCCSHN5I5IAb7X1EQ30yOmBpSM8sdh7oe0-P6Pxj03dFEFUb9mT4K6fVEK8Fo6hAKw5iWDG-B6-ueB2jZoMo_vCv-eUru8KGpuExpE0DlLXBrbCxf3VVx8qdCvK2dr7HXfwpuV5fvFSI/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");
provide !(!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,
thousand = (new Date(a.dateStart)).getTime() / 1E3,
c = (new Date).getTime();
if (isNaN(f)) alert("Invalid or cypher dateEnd mm/dd/yyyy. Example: 12/25/2013 17:30:00"), b(this).append("Invalid or cypher appointment mm/dd/yyyy. Example: 12/25/2013 17:30:00");
else if ("knob" != a.skin || cypher != thousand && !isNaN(m))
if (m > c) alert("Starting appointment is greater than the electrical flow date"), b(this).append("Starting appointment 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 cypher dateStart mm/dd/yyyy. Example: 12/25/2013 17:30:00"), b(this).append("Invalid or cypher dateStart mm/dd/yyyy. Example: 12/25/2013 17:30:00")
}
})(jQuery);
/*]]>*/
</script>
After installing the JavaScript as well as CSS Paste this code anywhere you lot would similar to display the Countdown widget. For illustration 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 amongst Posts as well as 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 appointment as well as fourth dimension of your counter widget because this would live on the principal affair which volition operate it. From the inwards a higher house code, search for 11/12/2014 18:01:30 as well as supersede it amongst your personalized appointment as well as fourth dimension for the timer widget.
Congratulations: You choose successfully learned how to add together a countdown timer widget inwards blogger. Now become as well as banking corporation lucifer out your site to run into if it plant according to the innovation or not.
NOTICE: This widget required 1.7+ jQuery.js file. In instance you lot are using sometime 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 as well as domicile page. Do allow us know what are you lot thoughts as well as opinions close this unique plugin which nosotros choose showcased today.
No comments:
Post a Comment