How to make a custom Christmas countdown for your site – Updated

This tutorial was originally published on June 26, 2012 – Updated Jan 19, 2024

You can find lots of free Christmas countdowns on the internet that you can add to your site, but many of them have added sponsor text and/or links to other sites hidden in them. Those are fine for most, but if you’re anything like me, you don’t want to settle for a run-of-the-mill countdown. You want a Christmas countdown to match your site, and for that you’ll need to make your own. This tutorial is great for static websites, and WordPress users, as well!

But don’t worry, it’s a lot easier than you may think. All you need is your favorite text editor, a background image, our countdown script, and this tutorial!

The first thing you want to do is figure out where you’d like your countdown to appear on your site and have a general idea of how you would like it to look. (Sometimes, I sketch things on scrap paper before I start.) To create this countdown I’m simply going make a div with a background, and use inline styles to slap the countdown script right where I want it and to make the text pretty.

Step 1. Create a Background div

For this tutorial I’m using a 275W X 197H background. Open your text editor and create a div with your background. Here’s the code:

<div style="background-image: url(https://christmaswebmaster.com/images/santa-countdown.png); 
height:197px; 
width:275px; 
background-repeat: no-repeat;
background-size: 275px 197px;">
</div>

And, here’s the div it created.

Step 2. Create a div with your countdown script

Next, we want to add a div with the countdown script in it to the background div we just made, here’s the countdown code:

<div>
<script language="javascript" type="text/javascript">
today = new Date();
BigDay = new Date("December 25, 2024 15:30:30")
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
e_hrsLeft = (e_daysLeft - daysLeft)*24;
hrsLeft = Math.floor(e_hrsLeft);
minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);
document.write( "There's only "+daysLeft+" days left until Christmas!");
</script></div>

Please note: If you notice in the countdown code on line 5 the date will need the year to be changed out each season. “BigDay = new Date(“December 25, 2024“)”

Step 3. Add your countdown div to the background div

Now that you’ve added the countdown script to your div, take a peek. The countdown appears in the upper left of the background and doesn’t look very good, so in the next step we will format the text.

Here’s our code so far:

<div style="background-image: url(https://christmaswebmaster.com/images/santa-countdown.png); height:197px; width:275px; background-repeat: no-repeat;
  background-size: 275px 197px;"><div>
<script language="javascript" type="text/javascript">
today = new Date();
BigDay = new Date("December 25, 2024 15:30:30")
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
e_hrsLeft = (e_daysLeft - daysLeft)*24;
hrsLeft = Math.floor(e_hrsLeft);
minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);
document.write( "There's only "+daysLeft+" left until Christmas!");
</script></div>
</div>

Step 4. Use CSS to position your countdown on the background

Now let’s position the countdown div on the background. I want the countdown to appear on the right half of my background, centered in the middle of Santa’s sign. So, I’ll add a little CSS styling to the countdown div, here’s the code:

padding-left:130px; 
font-size:18px; 
padding-right: 10px; 
padding-top:65px; 
text-align:center;

Step 5. Put it all together and enjoy!

Once you put it all together, voila! You have a custom Christmas countdown that you can use anywhere on your site.

Here’s the final code:

<div style="background-image: url(https://christmaswebmaster.com/images/santa-countdown.png); height:197px; width:275px; background-repeat: no-repeat;
  background-size: 275px 197px;"><div style="padding-left:130px; font-size:18px; padding-right: 10px; padding-top:65px; text-align:center;">
<script language="javascript" type="text/javascript">
today = new Date();
BigDay = new Date("December 25, 2024 15:30:30")
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
e_hrsLeft = (e_daysLeft - daysLeft)*24;
hrsLeft = Math.floor(e_hrsLeft);
minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);
document.write( "There's only "+daysLeft+" days left until Christmas!");
</script>
</div></div>

Recap:

• Create a Background div
• Create a div with your countdown script
• Add your countdown div to the background div
• Use CSS to position your countdown on the background
• Put it all together and enjoy!

And that’s all folks. Have fun creating your own custom Christmas countdowns! If you make your own, feel free to show it off! Leave your link in the comments.

Of course if you like the one I made for this tutorial, you can feel free to steal the code and use it at will! Consider it your gift for reading this tutorial =D

And now for the daring adventurer…

If you want to go a couple of steps more with it you can. You could use a fancy google webfont or make the countdown text any custom Christmassy color to match. Remember, the sky is the limit with the power of CSS! Get creative and have fun with it.

Or for the more advanced webmaster…

You could also call the countdown using a shortcode of sorts, by striping out the inline styles and instead adding it to your style sheet. Give the main div an id, and set the countdown div as a class. Like so:

#countdown-bkg{
background-image: url(https://yourURL/images/santa-countdown.png); 
height:197px; 
width:275px; 
background-repeat: no-repeat;
background-size: 275px 197px;
}
.countdown-txt{
padding-left:130px; 
font-size:18px; 
padding-right: 10px; 
padding-top:65px; 
text-align:center;
}

Then, place the countdown script in a folder on your server. You will need to use FTP or upload the file to your file manager in your Hosting control panel. You can download the file here: xmascount.js

Now anytime you want the countdown to appear on your site, you would use the following shortened code, or shortcode, to call the countdown.

<div id="countdown-bkg"> /*The Background CSS*/ 
<div class="countdown-txt">  /*The TEXT and ALIGNMENT CSS*/ 
<script src="YourURL/xmascount.js" language="javascript"></script> /*JS FILE URL*/ 
</div>
</div>

Like this tutorial? I would love to hear from you in the comments…

This tutorial was originally published on June 26, 2012 – Updated Jan 19, 2024