 |
| Adding Clock with Date and Time Widget in Blogger By Webing Tarun |
Demo
9:40:09 PMThrusday, 11/08/2022
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.
Step 6: Now click on the Save button.
Now you have successfully installed the date and time widget on your blog.
SELECT AND COYP ALL CODE
<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>
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.
