Hello! Welcome to It Is Unique Official Website.
While I don't have a website or sell products, I can certainly help you create a countdown timer for your discounts, offers, and sales with a limited-time duration. This timer will display the remaining time for the ongoing discounts or offers. Once the event concludes, a notification will appear, indicating 'Offer Ended!'
In this post, I'll guide you through the process of creating a Countdown Timer for your Blogger website using HTML, CSS, and JS. This versatile timer isn't limited to just offers or discounts; you can adapt it for various purposes or events.
How to make a Countdown Timer?
Crafting a Countdown Timer for your Blogger Website doesn't demand extensive knowledge of HTML, CSS, or JS. I've already tailored the design for you. All you have to do is simply paste the provided codes into a post, page, or any other location using the HTML view.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Pages or Post.
Step 3: Either create a new page or post by clicking on 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.
Information!
If your template incorporates a dark mode functionality and you desire a distinct color scheme for dark mode, you can easily customize the codes according to your preferences. Keep in mind that each template may utilize a unique dark mode class, so be sure to make the necessary adjustments by replacing the indicated class with the dark mode class specific to your template.
<style>
/* Countdown Discount by It Is Unique Official */
.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 It Is Unique Official ]-->
<div class="cdCont" data-disc="-30%">
<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>
<!--[ JavasCript ]-->
<script>
/*<![CDATA[*/
/* Countdown Discount Script by It Is Unique Official */
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, 2029 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>Information!
I suggest incorporating the CSS codes into the head section of your template for optimal integration.
Step 6: Change the marked parts as per your wish and Publish your Page or Post.
Information!
Substitute "January 1, 2029, 00:00:00 GMT+05:30" with your preferred custom Date and Time.
Disclaimer:
Warning - All content and posts on this platform are the intellectual property of It Is Unique Official. Unauthorized copying, reproduction, or distribution of our content is strictly prohibited. Any attempt to replicate or use our material without explicit permission may result in legal action. Please respect our intellectual property rights and contact us for inquiries regarding the use of our content. Thank you for your understanding and cooperation.
That's done!
Conclusion
This article guides you through creating an Offer Widget with a Countdown Timer using HTML, CSS, and JavaScript for your Blogger Website. I trust you find this tutorial enjoyable. Feel free to share this article, and if you encounter any challenges or have questions about any section, please drop them in the comment box. Thank you for reading!