How to Add an Analog Clock Widget in Blogger

Everyone says, “Time is Money” but still people fail to realize the importance of it. Having a nice classic Analog Clock widget on your blog can be the nicest way to help your users to be punctual even if they are busy reading your content. Recently, one of our readers asked us that how to add an analog clock widget in blogger which could be a great addition to a blog. Today in this article, we will show you how to add an analog clock widget in blogger. 

What is an Analog Clock?

A clock or watch is labeled as "Analog" when it has hours marked from 1 to 12 and has three moving hands to show minute, hour and seconds. Its basic purpose is to display the time. The difference between an analog clock and a digital clock is that, digital clock shows the time using numbers not hands.

How to add an Analog Clock in Blogger?

Before we jump to our tutorial, you would like to see analog clock widget in live action, so go to the live preview.

To Add a beautiful analog clock in Blogger carefully apply the following instructions on your blog.

Firstly, you need to install the analog clock scripts to your blog for that go to Blogger >> Template >> Edit HTML >> search for the </head> tag and just above the it paste the following

 <script type='text/javascript'>
/*<![CDATA[*/

// MBL Analog Clock
initLocalClocks();
setUpMinuteHands();
function initLocalClocks() {
  // Get the local time using JS
  var date = new Date;
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();


  // Create an object with each hand and it's angle in degrees
  var hands = [
    {
      hand: 'hours',
      angle: (hours * 30) + (minutes / 2)
    },
    {
      hand: 'minutes',
      angle: (minutes * 6)
    },
    {
      hand: 'seconds',
      angle: (seconds * 6)
    }
  ];
  // Loop through each of these hands to set their angle
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
        elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
        // If this is a minute hand, note the seconds position (to calculate minute position later)
        if (hands[j].hand === 'minutes') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

function YourTime() {
  // Get the local time using JS
  //var date = new Date;
  var hours = document.getElementById("hours_in").value;
  var minutes = document.getElementById("minutes_in").value;
  var seconds = document.getElementById("seconds_in").value;
document.getElementById('scy').style.animation='rotate 60s infinite steps(60)';
  // Create an object with each hand and it's angle in degrees
  var hands = [
    {
      hand: 'hours_y',
      angle: (hours * 30) + (minutes / 2)
    },
    {
      hand: 'minutes_y',
      angle: (minutes * 6)
    },
    {
      hand: 'seconds_y',
      angle: (seconds * 6)
    }
  ];
  // Loop through each of these hands to set their angle
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.your_time .' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
        elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
      1
        if (hands[j].hand === 'minutes_y') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

/*
 * Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that
 */
function setUpMinuteHands() {
  // Find out how far into the minute we are
  var containers = document.querySelectorAll('.minutes-container');
  var secondAngle = containers[0].getAttribute("data-second-angle");
  if (secondAngle > 0) {
    // Set a timeout until the end of the current minute, to move the hand
    var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
    setTimeout(function() {
      moveMinuteHands(containers);
    }, delay);
  }
}
/*
 * Do the first minute's rotation
 */
function moveMinuteHands(containers) {
  for (var i = 0; i < containers.length; i++) {
    containers[i].style.webkitTransform = 'rotateZ(6deg)';
    containers[i].style.transform = 'rotateZ(6deg)';
  }
  // Then continue with a 60 second interval
  setInterval(function() {
    for (var i = 0; i < containers.length; i++) {
      if (containers[i].angle === undefined) {
        containers[i].angle = 12;
      } else {
        containers[i].angle += 6;
      }
      containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
      containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
    }
  }, 60000);
}
//----------------------------------------------------------

/*]]>*/
</script>

After adding the script, the next thing you need to add is the CSS codes so now again in Template >> search for ]]></b:skin> tag and just above it paste the following code:

.label {
    background: #fff;
    border-radius: 0.3em;
    color: #646464;
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1em 1em 0.6em;
    position: absolute;
    top: -4em;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.label_y {
    background: #fff;
    border-radius: 0.3em;
    color: #646464;
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1em 1em 0.6em;
    position: absolute;
    top: -4em;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.clock_local {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock.svg) no-repeat center;
    background-size: 88%;
    height: 300px;
    width: 300px;
    float: left;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local2 {
    border-radius: 50%;
    background: #bae2f6 url(http://mybloggerlab.com/Images/clock2.svg) no-repeat center;
    background-size: 88%;
    height: 300px;
    width: 300px;
    float: left;
    margin-left: 50px;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.clock_local2::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.minutes-container,
.hours-container,
.seconds-container,
.seconds-container_y {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.hours {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
}
.minutes {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
}
.seconds {
    background: #dc0000;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
}
.hours_y {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
}
.minutes_y {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
}
.seconds_y {
    background: #dc0000;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
}
@keyframes rotate {
    100% {
        transform: rotateZ(360deg);
    }
}
.hours-container {
    animation: rotate 43200s infinite linear;
}
.minutes-container {
    animation: rotate 3600s infinite steps(60);
}
.seconds-container {
    animation: rotate 60s infinite steps(60);
}
.skin2 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock4.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin3 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock5.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin4 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock6.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin2::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.skin3::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.skin4::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.label {
    background: #fff;
    border-radius: 0.3em;
    color: #646464;
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1em 1em 0.6em;
    position: absolute;
    top: -4em;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.label_y {
    background: #fff;
    border-radius: 0.3em;
    color: #646464;
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1em 1em 0.6em;
    position: absolute;
    top: -4em;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.clock_local {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock.svg) no-repeat center;
    background-size: 88%;
    height: 300px;
    width: 300px;
    float: left;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local2 {
    border-radius: 50%;
    background: #bae2f6 url(http://mybloggerlab.com/Images/clock2.svg) no-repeat center;
    background-size: 88%;
    height: 300px;
    width: 300px;
    float: left;
    margin-left: 50px;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.clock_local2::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.minutes-container,
.hours-container,
.seconds-container,
.seconds-container_y {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.hours {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
}
.minutes {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
}
.seconds {
    background: #dc0000;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
}
.hours_y {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
}
.minutes_y {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
}
.seconds_y {
    background: #dc0000;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
}
@keyframes rotate {
    100% {
        transform: rotateZ(360deg);
    }
}
.hours-container {
    animation: rotate 43200s infinite linear;
}
.minutes-container {
    animation: rotate 3600s infinite steps(60);
}
.seconds-container {
    animation: rotate 60s infinite steps(60);
}
.skin2 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock4.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin3 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock5.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin4 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock6.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin2::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.skin3::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.skin4::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}

After adding the JavaScript and CSS codes its time to insert HTML codes that will play key role in displaying your analog clock, we have developed different themes for clocks to match everyone's need and taste.

Now following are the clocks along with there HTML code which can be used to display clocks on any part of your blog. Go to Blogger >> Layout >> Add a gadget >> Add HTML/JavaScript and paste any one of the following code:

Style 1:

  <div class="clock_local2">
<section class="label">Local time</section>
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</div>

Style 2:

  <div class="clock_local">
<section class="label">Local time</section>
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</div> 

Style 3: 

<div class="skin2">
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</div>

Style 4:

<div class="skin3">
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</div> 

Style 5:

<div class="skin4">
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</div>

Now once everything is done press "Save" and you have successfully added a analog clock to your blog. If you are good with CSS, you can customize the appearance of the widget otherwise you can enjoy the 5 different styles that we have pre-made for non technical users.

We hope this analog clock widget would be an amazing addition to your blog or website. Let us know what are your thoughts about this widget in the comments below. 

Share this post