How to add a beautiful chrismas countdown in blogspot.

 

Happy Holidays! This is an Examble of countdown Heading

It is easy to add a Christmas count down timer widget to blogger blog a christmass coundown is used to welcome your blog visitors or promote products sales on your blog.

This countdown timer widget counts down to 25 December 2022 and in military time format by counting days, hours, minutes and seconds left for the coming Christmas event.

The chrismass countdown widget also alerts and wishes Christmas by generating a pop-up once the count down ends. 

Read also: How to add download button in blogspot.

The JavaScript is provided by dynamic drive and it is customized and enhanced by MBT. This widget will be shared on each event here may it be EID, Holi or New Year. 

It is always a good idea to backup your theme or files when dealing with codes and scripts because any minor mistake might break your theme. You can hire us anyway for blog customization.

Add Christmas CountDown Timer Gadget To Blogspot

1. Go To Blogger > Design
2. Choose HTML/JavaScript widget
3. Paste the following code inside it,

<style style="text/css">
.lcdstyle{ /*Example CSS to create LCD countdown look*/      

background-color:fff;       

color:#FF3333;       

font: bold 20px arial;       

padding: 15px;
border:5px solid #0080ff;
border-radius:15px;      

-moz-border-radius:15px;       

-webkit-border-radius:15px;       

box-shadow: 5px 5px 5px #CCCCCC;


}
.lcdstyle sup{ /*Example CSS to create LCD countdown look*/      

font-size: 120%       

}
</style>
<script type="text/javascript">
/***********************************************      

* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)       

* This notice MUST stay intact for legal use       

* Visit http://www.dynamicdrive.com/ for this script and 100s more.       

***********************************************/
function cdtime(container, targetdate){      

if (!document.getElementById || !document.getElementById(container)) return       

this.container=document.getElementById(container)       

this.currentTime=new Date()       

this.targetdate=new Date(targetdate)       

this.timesup=false       

this.updateTime()       

}
cdtime.prototype.updateTime=function(){      

var thisobj=this       

this.currentTime.setSeconds(this.currentTime.getSeconds()+1)       

setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second       

}
cdtime.prototype.displaycountdown=function(baseunit, functionref){      

this.baseunit=baseunit       

this.formatresults=functionref       

this.showresults()       

}
cdtime.prototype.showresults=function(){      

var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds       

if (timediff<0){ //if time is up       

this.timesup=true       

this.container.innerHTML=this.formatresults()       

return       

}       

var oneMinute=60 //minute unit in seconds       

var oneHour=60*60 //hour unit in seconds       

var oneDay=60*60*24 //day unit in seconds       

var dayfield=Math.floor(timediff/oneDay)       

var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)       

var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)       

var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))       

if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level       

hourfield=dayfield*24+hourfield       

dayfield="n/a"       

}       

else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level       

minutefield=dayfield*24*60+hourfield*60+minutefield       

dayfield=hourfield="n/a"       

}       

else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level       

var secondfield=timediff       

dayfield=hourfield=minutefield="n/a"       

}       

this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)       

setTimeout(function(){thisobj.showresults()}, 1000) //update results every second       

}
/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////
//Create your own custom format function to pass into cdtime.displaycountdown()      

//Use arguments[0] to access "Days" left       

//Use arguments[1] to access "Hours" left       

//Use arguments[2] to access "Minutes" left       

//Use arguments[3] to access "Seconds" left
//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()      

//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"       

//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults(){       

if (this.timesup==false){//if target date/time not yet met       

var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until December 25, 2017 18:25:00"       

}       

else{ //else if target date/time met       

var displaystring=""       

}       

return displaystring       

}
function formatresults2(){      

if (this.timesup==false){ //if target date/time not yet met       

var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> "       

}       

else{ //else if target date/time met       

var displaystring="" //Don't display any text       

alert("Christmas is here!") //Instead, perform a custom alert       

}       

return displaystring       

}
</script>


<h1 style="color:#0080ff; margin:0;">Happy Holidays!</h1>       

<div id="countdowncontainer"></div>       

<br />       

<div id="countdowncontainer2"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")      

futuredate.displaycountdown("days", formatresults)
var currentyear=new Date().getFullYear()      

//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1       

var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear       

var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00")       

christmas.displaycountdown("days", formatresults2)
</script>
 

Read Also: How to add table of contents in blogspot.

Make these changes to its colors and font if you wish:

• To change the color of happy holidays edit color:#0080ff
• To change the rounded blue border colour and size edit border:5px solid #0080ff
• To change the Count Down text colour edit color:#FF3333

    4.   Save your widget and say bingo!

Visit your blogs to see it working just perfectly.

Want to CountDown till New Year?

Simply change December 25 to  December 31    and change Christmas is here! to HAPPY NEW YEAR FOLKS! 

If you know basic CSS then you add more flavour and color variation to it. I hope you may find this cool new widget worth using. If you wish to share it with your readers then kindly attach attributes to MBT and dynamic drive. Do let me know if you needed any further help.

Important: Hope you enjoyed our article on How to add a beautiful chrismas countdown in blogspot. Please if you found this post helpful you can rate us below or bookmark thus site for future posts. If you have problems adding chrismas countdown widget in your blogger please comment below and will freely help. Enjoy our other free blogger tricks you will surely LOVE!