Create a Christmas Countdown Timer Widget In BlogSpot

christmas countdown widget Add a Christmas count down timer widget to your blogger blog to welcome your blog visitors and wish them happy Christmas. This countdown timer widget counts down to 25 December 2017 and in military time format by counting days, hours, minutes and seconds left for the coming Christmas event. 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 customized and enhanced by MBT. 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!


Live Demo

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>

 

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. Peace pals! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

8 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. hey thats very cute!
    btw i wanted to ask how can i change my blog's feed mail's subject to the latest post? i know about $(latestitemTitle) but it just appears like that only in the subject which is why a lot of my subscribers are unsubscribing :\

    ReplyDelete
  2. good stuff for chirtians
    we will expecting more at every event!

    ReplyDelete
  3. Hi Mohammad I have 1 question. I used to get 6000 visitors daily and to make my website faster and good looking i changed my whole template but i put the same meta tags back. Now my traffic has decreased to 3000 visitors. Can you please tell me what might be the reason thanks

    my website is www.symbianfan.com

    ReplyDelete
  4. Assalamualikum ,i have a problem ahmed bhai. will you please check my blog http://qayyumhackingarticles.blogspot.com and tell me whether my bookmarking icons are working correct or not. because my facebook icon is not showing the post but it is showing something else. please check it out.

    ReplyDelete
  5. @vanity

    By default feedburner always displays the title of feed and its content. It wont show the same title for every post. If you are facing this issuse then go to your feedburner account and navigate to Optimize > Title/Description Burner, and see that this service is set to inactive.
    I hope this helps.

    @Faiz
    You surely will pal always. :)

    @SymbianFan
    Most of your posts are short in length approximately less than 200 words. The Recent Google Panda penalty is applied on all sites with short content (fewer than 350 words)

    I wish that your site may not have been effected by it but if this change happened this november then check your analytics and see if the traffic dropped between (OCT 11 till NOV)

    Kindly write more of text and less of graphics buddy.


    @syed
    You are using church theme and this problem is occurring even with my theme. Kindly adopt this approach Post to facebook and twitter automatically

    YOur a tag for post title is missing. Search for this:
    <data:post.title/> and make sure it looks like this:

    <a expr:href='data:post.link'><data:post.title/></a>

    ReplyDelete
  6. mohammad could you a do a post on it in detail plz, I didnt get it. all i can see is optimize> email branding..and this technique doesnt work

    ReplyDelete
  7. Hi mohammad thanks for the a reply i will try to write more content from now on but my traffic was dropped from December 2 or 3 the day after i changed my template.

    ReplyDelete
  8. assalamualikum ahmed bhai, i have tried what you say but there many in my church theme. which one should i edit for my bookmarking icons. please help me, the facebook icon is not showing my post but it is showing some other thing.

    ReplyDelete