How To Add Jquery Classic Clock For Blogger

This post also did with including  jquery. Time is
import thing for everyone.In this post im going to explain
how to add cool analog clock for your blogger.You can
add this on your sidebar top. it will helps you to give a
nice  looking for your blogger.Earlier i made post about
How to add a animated clock for blogger  that post also
have nice clock gadget.So you can choose best one for
your blog.Follow these steps to add it to your blog.

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Find this tag by using Ctrl+F    </head>

3. Paste below code Before </head> tag

<script src='http://bloggertrix.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>
<script type='text/javascript'>
    
        $(document).ready(function() {
         
              setInterval( function() {
              var seconds = new Date().getSeconds();
              var sdegree = seconds * 6;
              var srotate = &quot;rotate(&quot; + sdegree + &quot;deg)&quot;;
              
              $(&quot;#sec&quot;).css({&quot;-moz-transform&quot; : srotate, &quot;-webkit-transform&quot; : srotate});
                  
              }, 1000 );
              
         
              setInterval( function() {
              var hours = new Date().getHours();
              var mins = new Date().getMinutes();
              var hdegree = hours * 30 + (mins / 2);
              var hrotate = &quot;rotate(&quot; + hdegree + &quot;deg)&quot;;
              
              $(&quot;#hour&quot;).css({&quot;-moz-transform&quot; : hrotate, &quot;-webkit-transform&quot; : hrotate});
                  
              }, 1000 );
        
        
              setInterval( function() {
              var mins = new Date().getMinutes();
              var mdegree = mins * 6;
              var mrotate = &quot;rotate(&quot; + mdegree + &quot;deg)&quot;;
              
              $(&quot;#min&quot;).css({&quot;-moz-transform&quot; : mrotate, &quot;-webkit-transform&quot; : mrotate});
                  
              }, 1000 );
         
        }); 
    
    </script>

4. Now Go to Design >> Page Element

5. Click Add Gadget and select 'HTML/Javascript'

6. Paste  below code.

<style type="text/css">
* {
margin: 0;
padding: 0;}
        
#clock {
position: relative;
width: 120px;
height: 120px;
margin: 20px auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4sXKXP5Sp5vLhlF3A3zsz_ZEr8rKiLSJdZEn-BdQ43rko4SOlGxTAOxtgXRQpQR_b84nIcxQUV7KtI1vMQ22f334fNUeJMKgD0fwoawJ8OXEjSgy5O6U9pPLmZXPAdkibX4fvGP5wpY/s1600/clockface+copy.png);
list-style: none;
}
        
#sec, #min, #hour {
position: absolute;
width: 6px;
height: 120px;
top: 2px;
left: 57px;
}
        
#sec {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSY6T1z9u6wqQtpKNp5KxuQbQ84KHXZte41Q2Mu-GQD7fXxOcEjv77qRKSw5hA02t-Ax232lJv_ULCnBz8krLq0BP9pdKfDIhLHLGM-FeJ6I2X-iej-kMBkzyKmEvww-PK-aSnehQU1lU/s1600/sechand.png);
z-index: 3;
}
           
#min {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvZ2bIniNti668p3c9SJfregqYptwGAWrYcjNHhRJ_mufrqHK9bzEpRx0bG8GCWn0WCzYP396n0C79ZbgSBjBYOCZR2YGoJl2FaZJhC0Qu3V24vefZklcc75bNVQsuEau8glVYxLd5LA/s1600/minhand.png);
z-index: 2;
}
           
#hour {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuV09vfh5I4JZVCHmwtCFkQG4DFSRGrN6_5KOlzr8nQ-VgT3_-IF3IKKfMT9sqzctQrcolBpYh-Xao1tJxPAO1i4bp3pirKrVemxGD6VksQ3HcAyMbwVAGBgInA1XMEPrxzFOizGKpu0/s1600/hourhand.png);
z-index: 1;
}
            
p {
text-align: center; 
padding: 10px 0 0 0;
}
</style>


<ul id="clock"> 
     <li id="sec"></li>
     <li id="hour"></li>
  <li id="min"></li>
 </ul>

7. Now save your template
 you are done.