Membuat Jam Klasik Di Blog

Cara Membuat Jam Klasik Di Blog

Tutorial Blog Kali Ini, Saya Akan Memberikan Tutorial Cara Membuat Jam Klasik Di Blog

Demo

Baiklah Ini Tutorialnya :

Login Blogger
Tata Letak
Tambah Gadget
HTML/JavaScript
Copy Kode Di Bawah Lalu Paste Di Form HTML/JavaScript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function () {
setInterval(function () {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = 'rotate(' + sdegree + 'deg)';
$('#sec').css({
'-moz-transform': srotate,
'-webkit-transform': srotate
});
}, 1000);
setInterval(function () {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = 'rotate(' + hdegree + 'deg)';
$('#hour').css({
'-moz-transform': hrotate,
'-webkit-transform': hrotate
});
}, 1000);
setInterval(function () {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = 'rotate(' + mdegree + 'deg)';
$('#min').css({
'-moz-transform': mrotate,
'-webkit-transform': mrotate
});
}, 1000);
});
</script>
<style type="text/css">
#clock {
position: relative;
width: 80px;
height: 120px;
margin: 20px auto 0 auto;
background: url(//2.bp.blogspot.com/-UdqmlpkAA0g/UEHKQio0fZI/AAAAAAAAALA/riSFcock2zg/s1600/clockface.png)no-repeat;
list-style: none
}
#sec, #min, #hour {
position: absolute;
width: 6px;
height: 120px;
top: 2px;
left: 57px
}
#sec {
background: url(//1.bp.blogspot.com/-Vws3DL1OEWU/UEHKRhSAnSI/AAAAAAAAALI/MUoRRytTslI/s1600/sechand.png);
z-index: 3
}
#min {
background: url(//1.bp.blogspot.com/-89cd22Bga2c/UEHKSfPf8SI/AAAAAAAAALQ/UAX6CRIHpzY/s1600/minhand.png);
z-index: 2
}
#hour {
background: url(//3.bp.blogspot.com/-YL00l0N2sbo/UEHKQiiWUyI/AAAAAAAAAK8/pIUrc-01U0g/s1600/hourhand.png);
z-index: 1
}
</style>
<ul id="clock">
<li id="sec"></li>
<li id="hour"></li>
<li id="min"></li>
</ul>