Buy Plus UI v2.5! Demo Buy Now!

Adding Clock with Date and Time Widget in Blogger Blog

So hello viewers how are you. I hope you are doing good. Welcome to Tech Aadi. This is an extra widget that will display some big digital clock widget on your blog.

So today we are going to discuss about Adding 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.

Adding Clock with Date and Time Widget in Blogger Blog

So follow the below steps to install this on your blog.

Before following below steps kindly do backup your blog template for any kind of errror and easy restoration.

Adding 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.

Now you have successfully installed the date and time widget on your blog.

Conclusion

I hope you have successfully installed the widget Script. So this is about adding clock with date and time in blogger blog. Hope you have liked the article.

Read also :

Rate this article

Getting Info...

About Post Author

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Plus UI, you agreed to use cookies in agreement with the Plus UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.