Add Analog Clock to your Blog

Add Analog Clock to your Blog

Hi Friends in this tutorial i will show you how to add a nice analog clock to your blogger Sidebar ...

Add Analog Clock to your Blog

Let's go..

Step 1: Login to Your blogger Blog..

step 2: In this step click on 'layout' from your blogger dashboard..

Step 3: After clicking on layout you will get you blogger site layout..in This step Click on 'Add a Gadget' to Create a New Sidebar Gadget..

Step 4: After Clicking on 'Add a Gadget' A popup window will appear ..You will get a lot's of option..now find out "HTML/JavaScript" from this option and click on it..

Step 5: After Clicking on "HTML/JavaScript" You will get Box to add your Codes like below..

Now copy the below codes and paste in 'content' box then click save ..ok

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="clock">
    <div id="hour" style="transform: rotate(334.5deg);"><img src="http://demo.web3designs.com/images/hourhand.png" /></div>
    <div id="minute" style="transform: rotate(54deg);"><img src="http://demo.web3designs.com/images/minhand.png" /></div>
    <div id="second" style="transform: rotate(108deg);"><img src="http://demo.web3designs.com/images/sechand.png" /></div>
</div>
<style>
#clock {
 background-image: url("http://demo.web3designs.com/images/clockBg.png");
 height: 200px;
 position: relative;
 width: 200px
}
#clock div {
 position: absolute;
 left:50%
}
#clock img[src*="second"] {
 transition: transform 600000s linear 0s;
}
#clock:target img[src*="second"] {
 transform: rotate(3600000deg);
}
#clock img[src*="minute"] {
 transition: transform 360000s linear 0s;
}
#clock:target img[src*="minute"] {
 transform: rotate(36000deg);
}
#clock img[src*="hour"] {
 transition: transform 216000s linear 0s;
}
#clock:target img[src*="hour"] {
 transform: rotate(360deg);
}
</style>
<script>
function Clock_dg(prop) {
    var angle = 360/60,
        date = new Date();
        var h = date.getHours();
        if(h > 12) {
            h = h - 12;
        }

        hour = h;
        minute = date.getMinutes(),
        second = date.getSeconds(),
        hourAngle = (360/12) * hour + (360/(12*60)) * minute;

        $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
        $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
        $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
}
$(function(){        
    var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
        prop,
        el = document.createElement('div');

    for(var i = 0, l = props.length; i < l; i++) {
        if(typeof el.style[props[i]] !== "undefined") {
            prop = props[i];
            break;
        }
    }
    setInterval(function(){
        Clock_dg(prop)
    },100);
});
</script>

That's it Friends how to Add Analog Clock to your Blog ..Thank you for Visiting..
Please Share and don't forget to leave your opinion..
also learn.. 
1. add syntax highlighter to blogger
2. Add Digital Clock to Your Blog