To add a Countdown Timer to Google Sites, you can follow these.
#Option 1. Use custom code
To add a Countdown Timer to Google Sites, you can use Embed Feature
with this custom code
<!-- CONFIGURATION - Change the date and time below -->
<!-- Format: year, month(1-12), day, hour(0-23), minute, second -->
<script>
const TARGET_DATE = new Date(2024, 11, 31, 23, 59, 59);
</script>
<div id="container" style="font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; background-color: #f0f0f0; padding: 20px;">
<div id="message" style="font-size: 24px; color: #333; margin-bottom: 20px;">Sắp đến giờ!</div>
<div id="timer" style="font-size: 48px; font-weight: bold; margin: 20px; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"></div>
</div>
<script>
function updateTimer() {
const now = new Date().getTime();
const distance = TARGET_DATE.getTime() - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (distance < 0) {
document.getElementById("timer").innerHTML = "00:00:00:00";
return;
}
document.getElementById("timer").innerHTML =
String(days).padStart(2, '0') + ":" +
String(hours).padStart(2, '0') + ":" +
String(minutes).padStart(2, '0') + ":" +
String(seconds).padStart(2, '0');
}
setInterval(updateTimer, 1000);
updateTimer();
</script>
Result
You can change text here.
You can change text style here
To change Countdown Timer Date/Time, edit this line.
In my example, it is:
-
Year: 2014
-
Month: 11
-
Date: 31
-
Hour: 23
-
Minute: 59
-
Second: 59
#Option 2. Use tool to create Countdown Timer
If you aren’t familiar with code, you can use this free tool to create Countdown Timer.
#1. First, access this free tool and click Create widget for free
#2. Choose a desired layout and click Continue with this template.
#3. You can set all options, styles here then click Add to website for free.
#4. Click Publish on top right
#5. Choose Free Plan and click Copy embed code.
#6. You can add it to Google Sites via Embed Feature.
#7. Paste your embed code
#8. Result
