How to add digital clock to blogger website?

Adding a blogger digital clock is a simple and fun process. It will provide an alternative and attractive look to your website. Step-by-step instructions on how you can add clocks:

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.

Demo

Add code to display digital clock

<div class="widget Label" >
<!--[ Digital Clock Wedget by BlogSeba ]-->
<h2 class="title dt" id="Features">Digital Clock</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. Hope you can add the digital clock very easily if you follow above instructions 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!
Reproduction, duplication, or distribution of any part of this blog is strictly prohibited without permission. Legal action may be taken for any unauthorized use or reproduction.

Go to Link