Simple javascript analog clock widget

Step 1. Go to Blogger Dashboard > Template > click on the Edit HTML button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box, type or paste the following tag inside the search box and hit Enter to find it: /head>. Now copy the code below. Just above  /head>.

<script language="javascript" type="text/javascript">
function timerTick() {
with (new Date()) {
var h, m, s;
h = 30 * ((getHours() % 12) + getMinutes() / 60);
m = 6 * getMinutes();
s = 6 * getSeconds();
document.getElementById('h_pointer').setAttribute('transform', 'rotate(' + h + ', 50, 50)');
document.getElementById('m_pointer').setAttribute('transform', 'rotate(' + m + ', 50, 50)');
document.getElementById('s_pointer').setAttribute('transform', 'rotate(' + s + ', 50, 50)');
setTimeout(timerTick, 1000);
}
}
</script>

Step 3. And just after tag </head> you will see tag <body, add after this code: onload='timerTick()'.

Step 4:  Go to Blogger Dashboard > Layout. Choose position where you want to add widget, select Add a Gadget and add HTML/ Javascript.

Step 5: Copy and paste javascript code below. Save the changes by clicking on Save

 <style type="text/css">
#box {background-color: #cc0000; color: #fff; font-weight: bold; text-align: center; padding: 3px 0 3px 0;}
#container {height: 100%; vertical-align: middle; width: 100%;}
#clock {fill: #fff; stroke: #000; stroke-linecap: round;}
#surface, #h_pointer {stroke-width: 2px;}
#delimiters, #s_pointer {stroke-width: 1px;}
#m_pointer {stroke-width: 3px;}
#numbers {font-family: verdana; font-size: 10px;}
</style>

<noscript><div id='box'>Please, enable JavaScript and refresh page.</div></noscript>
<table id='container'>
<tr>
<td>
<svg id='clock' viewBox='0 0 100 100' width='150' height='150'>
<circle id='surface' cx='50' cy='50' r='45'/>
<g id='pointers'>
<line id='h_pointer' x1='50' y1='50' x2='50' y2='27' />
<line id='m_pointer' x1='50' y1='50' x2='50' y2='17' />
<line id='s_pointer' x1='50' y1='50' x2='50' y2='13' />
</g>
<g id='numbers'>
<text x='43' y='17'>XII</text>
<text x='80' y='54'>III</text>
<text x='46' y='90'>VI</text>
<text x='9' y='54'>IX</text>
</g>
</svg>
</td>
</tr>
</table>

You can see demo here.