ClockAura

How to Add a Countdown Timer to Blogger

For a post, switch the Blogger editor to HTML view, paste the code from the ClockAura Embed Builder and publish. For every page, go to Layout → Add a Gadget → HTML/JavaScript, paste the code and save.

Steps

  1. In the Embed Builder, choose Countdown to a date (or any other widget), set the date and colours, and copy the Script code.
  2. In Blogger, open the post and click the pencil icon at the top left of the editor, then choose HTML view.
  3. Paste the code where the countdown should appear.
  4. Switch back to Compose view and click Publish or Update.

Example embed code for Blogger

<a class="clockaura-widget" href="https://clockaura.com/countdown-to-date" data-options="type=countdown&amp;to=2027-01-01T00%3A00&amp;done=Happy+New+Year%21&amp;label=New+Year+2027" data-width="420" data-height="240">Countdown by ClockAura</a><script async src="https://clockaura.com/widget.js"></script>

Make your own version (type, time, colours, size) in the Embed Builder.

Show it in the sidebar on every page

  • In the Blogger dashboard, open Layout.
  • In the sidebar (or footer) section, click Add a Gadget.
  • Choose HTML/JavaScript, give it a title such as "Countdown" and paste the code into Content.
  • Click Save, then view your blog. Use the Small size in the builder for a narrow sidebar.

Countdown ideas for blogs

  • A launch or giveaway end date on a promo post.
  • Days until a holiday, festival or wedding on a family blog.
  • An exam countdown on a study blog, with a Pomodoro widget in the sidebar.
  • A live clock in your home time zone on a travel blog.

Same moment for everyone

A countdown counts to the date in each reader’s own time zone, which suits New Year or birthdays. For a fixed moment, such as a live stream, tick Same moment worldwide in the builder so every reader counts to the same instant.

Questions about Blogger

Does Blogger allow JavaScript in posts?

Yes. Blogger keeps scripts in HTML view and in the HTML/JavaScript gadget, so the Script code works. The Iframe code works too.

What does the countdown show when the date arrives?

It stops at zero and shows your message, for example "Happy New Year!". You set that text in the builder.

Will the countdown work on the Blogger mobile theme?

Yes. The widget resizes to the width of your post or sidebar, so it fits phones and desktops.

Other platforms