Dec 8, 2015

Christmas - Happy New Year 2017 Countdown Widget for Blogger

Christmas is pretty near and we have already started our count down. This widget does what the name suggests. It will display the number of days, hours minutes and second left till Christmas. It also alerts and wishes Christmas by generating a pop-up once the count down ends. The JavaScript is provided by dynamic drive and it is styled and enhanced by MBG. This widget will be shared on each event here may it be EID, Holi or New Year. I hope you find it useful. It is extremely easy to install and customize it. The best thing about it is that it contains no ads because we are utilizing a free script provided by dynamic drive and storing it on blogger. Lets get to work then!

Countdown Widget, Happy New Year, Merry Christmas

How To Add Countdown Widget To Blogger Blogspot?

  • Go to Blogger >> Layout >> Add A Gadget.
  • Now Choose HTML/JavaScript.
  • Now Paste below code inside popup window.
.lcdstyle{ /*Example CSS to create LCD countdown look*/
font: bold 20px arial;
padding: 15px;
border:5px solid #FF3333;
box-shadow: 5px 5px 5px #CCCCCC;
.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 120%
<script type="text/javascript">
* Dynamic Countdown script- © Dynamic Drive (
* This notice MUST stay intact for legal use
* Visit for this script and 100s more.
function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
var thisobj=this
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
cdtime.prototype.displaycountdown=function(baseunit, functionref){
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
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
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
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, 2015 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
<h1 style="color:#FF3333; margin:0;">Merry Christmas!</h1>
<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer", "December 07, 2015 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)
If you wish to change its colors and fonts then make these changes.
  1. To change the color of Merry Christmas edit color:#FF3333
  2. To change the rounded blue border colour and size edit border:5px solid #FF3333
  3. To change the Count Down text colour edit color:#FF3333
  • That's it Save your widget and Visit your blogs to see it working just perfectly.

Want to Use Countdown Widget for New Year?

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


So above guide is about How To Add Christmas/Happy New Year Countdown Widget to Blogger and we hope you will like this widget and want to use it on your blogger blog. If you know some basic knowledge of CSS then you add more flavor and color variation to it. I hope you may find this cool new widget worth using. Hope by this guide you can easily add this countdown widget in your blogger blog. If anyhow problem persist then drop a comment below. We will help you out of sure. If you wish to share it with your readers then kindly attach attributes to MBG and dynamic drive. Now it's your turn to share it on social networking sites and give feedback. Do Share and Subscribe Us.
Thank You! Stay Blessed! 

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.