HOW TO CREATE A COUNTDOWN CHRISTMAS TIMER WIDGET ON BLOGGER

WIKITECH

               

            Hello, in this post today i will show you how to create a countdown Christmas timer to blogger. Add a Christmas countdown timer widget to your blog to welcome your visitors and wish them happy Christmas.

                              Add a Christmas countdown timer widget to your blogger blog to welcome your blog to welcome your visitors and wish them Happy Christmas. This countdown timer widget counts to 25 December 2019 and in military time format by counting days, hours, minutes and seconds left for the Christmas event.

                                                                  Features of the clock

• It alerts and wishes happy Christmas
• A pop once the countdown ends.

How to Add Countdown Timer

• Go to Blogger
• Click on Add Gadget
• Choose HTML/JavaScript widget

Copy this code

<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>

• Paste the code

Visit your blog to see it work perfectly

 Want to countdown till New year

          Simply change December 25 to December 31 and change Christmas is here   to Happy New year Folks !


DELIVERED BY ALFA MUBARAK MOHAMMAD

THANK YOU