Friday, 3 February 2017

How To Add Canvas Clock Widget To Blogger /Blogspot

How To Add Canvas Clock To  Blogger

How To Add Canvas Clock To  Blogger /Blogspot
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.

Follow these steps to add canvas clock to blogger.
Follow these steps to add canvas clock to blogger.

Follow these steps to add canvas clock to blogger.

Follow these steps to add canvas clock to blogger.

You can Add in your page also.
By Follow this Procedure
Go>>Page>New Page >paste the code in page Html Section.
How To Add Canvas Clock To  Blogger /Blogspot

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

<!DOCTYPE html>
<canvas id="canvas" width="300" height="300"
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.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  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.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.translate(0, -radius*0.85);
    ctx.fillText(num.toString(), 0, 0);
    ctx.translate(0, radius*0.85);
function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    drawHand(ctx, second, radius*0.9, radius*0.02);
function drawHand(ctx, pos, length, width) {
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.lineTo(0, -length);

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.
  • Is this is tutorial is helpful ? 
  • Need to know your opinion 
  • For Advertising Contact Us
  • Admin Moqaddar khan salgary

Previous Post
Next Post