For this post we are going to make a free date and time widget for your Blogger blog or website. There is need to register and no need to pay because this widget is free. This clock and calendar widget has the following features:

1. You can set the time to any local time that you wanted. So if you set it to +8, then the time will not change even though viewers from other countries with different time zones view your clock.

2. The time is not 24-hour format but 12-hour format. You do not need to convert a 13:00 hour on your mind because it is automatically viewed as 1:00 PM.

3. This is a universal clock, all you need to do is change the set UTC to make the time and date same as your local one.

As a blogger or website owner, you can use this widget when you are creating an event on your website. A sport live streaming website with different watchers from around the world will make this widget useful. All you need to do is set this widget to the local time and date of the game and your viewers will be able to know what time a particular game will be aired and seen on your stream.

Now, follow the steps below to add a simple time and date widget inside your Blogger blog or website.

STEPS:

1. You can choose whether you want to add the widget inside a Page, a Post or a HTML/Javascript widget. It is up to you to decide. For this tutorial, let us just add the widget inside HTML/Javascript.

2. Go to Blogger > Layout > click Add gadget > HTML/Javascript.

3. Inside the gadget copy and paste the given code below.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div#clock").simpleClock(8); }); (function ($) {
$.fn.simpleClock = function ( utc_offset ) {
var language = "en";
switch (language) {
default: var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "August", "September", "Oct", "Nov", "Dec"];
break; }
var clock = this; function getTime() {
var date = new Date(); var nowUTC = date.getTime() + date.getTimezoneOffset()*60*1000;
date.setTime( nowUTC + (utc_offset*60*60*1000) );
var hour = date.getHours();
if ( language == "en" ) {
suffix = (hour >= 12)? ' PM' : ' AM';
hour = (hour > 12)? hour -12 : hour;
hour = (hour == '00')? 12 : hour;
} return {
day: weekdays[date.getDay()], date: date.getDate(), month: months[date.getMonth()], year: date.getFullYear(), hour: appendZero(hour), minute: appendZero(date.getMinutes()), second: appendZero(date.getSeconds()) };
}
function appendZero(num) {
if (num < 10) {
return "0" + num;
}
return num;
}
function refreshTime(clock_id) {
var now = getTime();
clock = $.find('#'+clock_id);
$(clock).find('.date').html(now.day + ', ' + now.month + ' ' + now.date + ', ' + now.year);
$(clock).find('.time').html("<span class='hour'>" + now.hour + "</span>:<span class='minute'>" + now.minute + "</span>:<span class='second'>" + now.second + "</span>");
if ( typeof(suffix) != "undefined") {
$(clock).find('.time').append(suffix);
}
}
var clock_id = $(this).attr('id'); refreshTime(clock_id);
setInterval( function() {
refreshTime(clock_id)
}, 1000);
};
})(jQuery);
</script>

<style>
div.sharingthatxyz {background-color: #f1f1f1; text-align: center; padding-right: 10px; padding-left: 10px; font-size: 30px; font-weight: strong; align: center;}
</style>

<div id="clock" class="sharingthatxyz">
<div class="date"></div>
<div class="time"></div>
</div>

4. Now, save your widget. Done!

5. Test your clock and date widget if it is working. If not, then there's a conflict in the javascript of your template to the given code above.
To change the time and date in your local time zone, just change the number 8 in the simpleClock(8).

You can see live demo of this widget here. or below.