How to add digital clock to Blogger website?

Adding digital clock to Blogger website is an easy and fun process. It will give a professional and attractive look to your website. Below are step-by-step instructions on how you can add a digital clock:

Add HTML/JavaScript Gadgets

1. Log in to Blogger Dashboard: Log in to your blogger account and select the blog you want to add the digital clock to.
2. Go to Layout: Select 'Layout' option from left side menu in blogger dashboard.
3. Add Gadgets: Click the "Add a Gadget" button on the page where you want to display the digital clock.
4. Select HTML/JavaScript: Select the "HTML/JavaScript" gadget from the 'Add a Gadget' window.

View Demo

Add code to display digital clock

<div class="widget Label" >
<!--[ Digital Clock Wedget by BlogSeba ]-->
<h2 class="title dt" id="Features">Digital Clock by BlogSeba</h2><div class="clock">
        <span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span>
    </div></div>

<style>@import url('https://fonts.cdnfonts.com/css/ds-digital');</style>
<style>
.clock {
  /* Digital Clock Wedget by BlogSeba */
  font-family: DS-Digital, sans-serif;
  margin-bottom: 20px;
  font-size: 80px;
  text-align: center;
}
</style>

<script>function updateClock() {
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    
    // Digital Clock Wedget by BlogSeba
    hour = (hour < 10) ? "0" + hour : hour;
    minute = (minute < 10) ? "0" + minute : minute;
    second = (second < 10) ? "0" + second : second;

    // Update the clock's display
    document.getElementById("hour").innerText = hour;
    document.getElementById("minute").innerText = minute;
    document.getElementById("second").innerText = second;
}

// Update the clock every second
setInterval(updateClock, 1000);

// Initial call to display the clock when the page loads
updateClock();
</script>

Then save by clicking on 'Save' button. Now you go to your website and see if the digital clock you added looks right. Hopefully you can add the digital clock very easily if you follow the instructions above correctly.

A few words from us

This is how you can easily add an attractive digital clock to your blogger website. This will be a great feature for your website visitors. And if you benefit from our article. Then definitely tell your opinion in the comments.

Copyright Warning
All content on this website, including text, graphics, logos, images, videos, audio, and software, is protected by copyright law. These contents are our exclusive property, and any form of reproduction, distribution, or modification without our permission is strictly prohibited.

Go to Link