Hello! Welcome to daily technology
Does your website sell products? If yes, then you can make a countdown timer for your discounts, deals and sales for a limited period of time. You can show what is the remaining time of the discounts or offers. Also, when the event ends, you will see a notification that says "Offer Ended!".
In this article, I will share how to make a countdown timer using HTML, CSS, and JS for your Blogger website.
It doesn't need to be done just for the deals or discounts, you can use it for other purposes or events.
How to make a countdown timer?
Creating a countdown timer for your Blogger website won't require much knowledge of HTML, CSS, or JS because I've already designed it for you. What you need to do is paste the following codes into a post, page, or anywhere else through the HTML view.
Step 1: First of all, login to your Blogger dashboard.
Step 2 – In the Blogger Dashboard, click Pages or Post.
Step 3 – Create a new page or post by clicking the icon or click on the existing page or post to add codes there.
Step 4 – Switch to HTML view.
Step 5 – Paste the following codes where you want to add the countdown timer.
If your template has a dark mode feature and you want a different color when in dark mode, you can customize the codes to suit your needs. Each template can have a different dark mode class, so adjust it, you can replace the checked class with your template dark mode class.
<style>
/* Countdown Discount by Fineshop Design */
.cdCont{position:relative;background:#f7f3f6;padding:55px 20px 30px;border-radius:10px;text-align:center;color:#08102b;font-family:inherit}
.cdCont[data-disc]:not([data-disc=''])::before{content:attr(data-disc);display:block;font-weight:700;font-size:13px;width:50px;height:50px;padding:10px 0 10px;background:#f5e2f1;border-radius:5px 5px 50px 50px;position:absolute;top:-5px;right:50px}
.cdCont .cdH{margin:0 0 20px;font-size:1.3rem;font-weight:700}
.cdCont .cdD{font-size:15px}
.cdCont .cdHeadA .cdD{margin-bottom:25px}
.cdCont .cDown{width:100%;font-size:20px;text-align:center;font-weight:400;margin:20px 0}
.cdCont .cdBox{display:inline-block;width:55px;height:55px;margin:3px;padding-top:4px;background:#fff;border-radius:10px}
.cdCont .unit{display:block;font-size:10px;margin-top:-4px;opacity:.8}
.cdCont .btn{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:30px;line-height:20px;color:#fffdfc;background:#204ecf;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100px}
.cdCont.ended[data-disc]::before, .cdCont.ended .cdHeadB, .cdCont:not(.ended) .cdHeadA, .cdCont.ended .cdTmr{display:none}
.darkMode .cdCont{background:#252526;color:#fffdfc}
.darkMode .cdCont[data-disc]::before{background:#2d2d30}
.darkMode .cdCont .cdBox{background-color:#1e1e1e}
</style>
<!--[ Countdown Discount by Fineshop Design ]-->
<div data-disc='-30%' class='cdCont'>
<div class='cdHeadB'>
<div class='cdH'>Are you fast enough?</div>
<div class='cdD'>Grab a massive discount of 30%, be fast, because the discount is available only for limited time.</div>
</div>
<div class='cdHeadA'>
<div class='cdH'>Oops! Offer Ended.</div>
<div class='cdD'>You are so late reaching here.</div>
</div>
<div class='cdTmr'>
<div class='cDown'>
<div class='cdBox'>
<span class='days'>00</span>
<span class='unit'>Days</span>
</div>
<div class='cdBox'>
<span class='hours'>00</span>
<span class='unit'>Hours</span>
</div>
<div class='cdBox'>
<span class='minutes'>00</span>
<span class='unit'>Minutes</span>
</div>
<div class='cdBox'>
<span class='seconds'>00</span>
<span class='unit'>Seconds</span>
</div>
</div>
<a class='btn' href='#'>Buy Now!</a>
</div>
</div>
<script>
/*<![CDATA[*/
/* Countdown Discount Script by Fineshop Design */
const dayElm = document.querySelector('.cdBox .days'),
hourElm = document.querySelector('.cdBox .hours'),
minuteElm = document.querySelector('.cdBox .minutes'),
secondElm = document.querySelector('.cdBox .seconds'),
cdCont = document.querySelector('.cdCont'),
endDate = new Date('January 1 2000 00:00:00 GMT+05:30');
let eventEnded = !1;
const updateTimer = () => {
let e = new Date;
var t = endDate.getTime() - e.getTime();
t <= 1e3 && (eventEnded = !0);
var n = 36e5,
o = Math.floor(t / 864e5),
a = Math.floor(t % 864e5 / n),
n = Math.floor(t % n / 6e4),
t = Math.floor(t % 6e4 / 1e3);
dayElm.innerText = o < 10 ? '0' + o :o, hourElm.innerText = a < 10 ? '0' + a :a, minuteElm.innerText = n < 10 ? '0' + n :n, secondElm.innerText = t < 10 ? '0' + t :t
};
setInterval(() => {
eventEnded ? (cdCont.classList.add('ended')) : updateTimer()
}, 1e3);
/*]]>*/
</script>Step 6 – Change the marked parts as per your wish and publish your page or post.
Replace Jan 1, 2000 00:00:00 GMT+05:30 with your custom date and time.
That's done!
Tags:
Blogger Widgets
