How to make a custom Christmas countdown for your site

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.

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, 2017")
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, "+hrsLeft+" hours and "+minsLeft+" minutes left until Christmas!");
</script></div>

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, 2017")
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, "+hrsLeft+" hours and "+minsLeft+" minutes 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, 2017")
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, "+hrsLeft+" hours and "+minsLeft+" minutes 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://christmaswebmaster.com/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 separate text file and upload it to your server.

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">
<div class="countdown-txt">
<script src="scripts/xmascount.js" language="javascript"></script>
</div>
</div>

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

5 Comments

  1. This is a fantastic little tutorial with great content and I for one will be putting it to the test. Thank you for saving me hours of work.

    A quick idea however. Could we create a script that could change the background image on a daily basis, perhaps making it a little more interactive and encouraging our regulars to drop by and check latest image, (without having to change it manually). Just an idea.

  2. Pingback: Santa Claus Countdown Script | Provided By by Jinglebelle - Christmas Webmaster | Modern Marketing World - Maximising Online Marketing Potential

  3. I know very little html and nothing about CSS.
    I put all these codes in my notepad but wasn’t sure how to save it???
    Anyway all I got was what I had copied and pasted. No picture.

    Not sure what I missed but I sure missed something. I even went back and over it again. How do you get the code onto the picture?…lol.

    Hugs, Loopy

  4. Hi Loopy, This code is assuming you have a site already, you would add it to existing HTML code.

    Try saving your file as countdown.html and opening it in your browser 🙂

    (BTW- when saving an HTML file in notepad, always choose “All Files” from the dropdown menu – saving it as “Text Documents .txt” won’t work.)

  5. The Santa countdown works fine on a PC, but when called up on an Android, the text portion of the count down is blank. Is there some adjustment I can make so that the countdown will work on an Android?

Leave a Reply

Your email address will not be published. Required fields are marked *