How to add Digital Clock in Blogger Widget

Hello! Welcome to Tecky AaryaN.

You are looking for How to add Digital Clock in Blogger Widget then this post is just for you.

© Copyright 2024 Tecky AaryaN

So today we are going to discuss about Adding Digital Clock with Date and Time Widget in Blogger Blog. You can add this or use it on your demo blog because I think it will slow down the site to load a little bit slow.

 Clock with Date and Time Widget on Blogger

Step 1: Login to your Blogger dashboard.

Step 2: Go to Layout section.

Step 3: Click on Add a Gadget. A popup box will appear.

Step 4: Now Click on HTML/JavaScript.

Step 5: Copy the below Codes(Css, HTML, JavaScript) and paste it in the content section and leave the title blank.

Demo ↑↑↑↑

<style>.ta-time{text-align:center;}

#ta-hour{font-weight:400;display:block;font-size:30px;margin: 0 0 5px;letter-spacing:5px;}</style>

<div class="ta-time">

  <span id="ta-hour"></span>

  <span id="ta-date"></span>

</div>

<script>var myVar = setInterval(function() {

    myTimer()

}, 1000);

function myTimer() {

    var d = new Date();

    var t = d.toLocaleTimeString();

    document.getElementById("ta-hour").innerHTML = t;

}

n = new Date();

if (n.getTimezoneOffset() == 0) t = n.getTime() + (7 * 60 * 60 * 1000);

else t = n.getTime();

n.setTime(t);

var dn = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday");

d = n.getDay();

m = n.getMonth() + 1;

y = n.getFullYear()

var date = dn[d] + ", " + (n.getDate() < 10 ? "0" : "") + n.getDate() + "/" + (m < 10 ? "0" : "") + m + "/" + y;

document.getElementById("ta-date").innerHTML = date;</script>

Step 6: Now click on the Save button.

 

To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.

Copyright

TeckyAaryaN

Go to Link

Prev And Next