How To Add Canvas Clock Widget To Blogger /Blogspot

How To Add Canvas Clock To Blogger

Add Canvas Clock To Blogger /Blogspot and stay uptime on your blog.i have tested this canvas on internet explorer, mozilla firefox ,Opera-mini and many other web browsers. Friends as you know that time is very important in life .Today i am going to share with you the most helpful widget for your blogger .If the time is important for you then keep the watch in front of you in your blog by just following some simple steps .This canvas clock will also help your visitor to keep their self up-time.This widget can see anyone by visiting your blog/website.This widget will automatically up-time from internet .No need to set your country time.You can add this widget Also in your blogger page .

Follow these steps to add canvas clock to blogger.

Login your blogger dashboard
Go>>Layout> " + Add a Gadget "
Select Html Java script
A new page will open
Copy the code from here which is given below and
Past the code in the content section .
And Click on Save
Now open your blog and watch it.

You can Add in your page also.

By Follow this Procedure

Go>>Page>New Page >paste the code in page Html Section.

Copy the code from here to Add the Canvas Clock To blogger

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="300"
style="background-color:#FBFAFA">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
</body>
</html>

Customization in Canvas Clock widget for blogger

You can change these setting in Canvas clock widget

Width = 300

Height = 300

Background Color = #FBFAFA

You Might Also Add These Widgets To Make Your Blogger Responsive.

Final Words !

Thank you for following us if you face any problem in this post How To Add Canvas Clock Widget To Blogger /Blogspot or another problem related with blogger .Then Contact us or comment us .We will solve your problem as soon as soon is possible. this is satisfied Website .From here you can get all hints tips and tricks for your blogger.