Membuat jam dengan jquery dan css3

Membuat jam digital dengan jquery dan css3 pastinya akan lebih indah karena style nya kita bisa ganti - ganti sesuai selera kita, berselancar dan berselancar membuat saya menemukan situs alessioatzeni dimana disanalah saya nemu Jam digital dengan jquery ini beuh keren banget lah pokok nya jam ini. jam ini juga di lengkapi dengan tanggal jadi bisa di bilang kita akan Membuat jam dan tanggal dengan jquery dan css3 nah screenshotnya ada di bawah ini

Oh iya bagi browser yang mendukung @keyframe atau bisa di sebut animasi dengan css maka titik dua ( : ) itu akan kedip - kedip, seperti jam digital, tapi jika browser anda tidak mendukung animasi @keyframe maka titik dua nya itu tidak akan kedip - kedip, tapi tenang detik nya tetep jalan kok, ok silahkan lihat demonya di bawah ini

DEMO

Gimana Udah liat kan demonya sekarang mari kita lanjutkan ke tahap pembuatannya

1. Masuk di blog anda
2. Klik Rancangan
3. Klik Edit HTML.
4. Klik Template jika di editor baru blogger
5. Cari kode </head>
6. Setelah ketemu simpan kode di bawah ini di atas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Membuat 2 variable dengan nama dan tanggal
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

// Membuat Objek tanggal
var newDate = new Date();
// Membuat jam sama dengan jam kita
newDate.setDate(newDate.getDate());
// Pengaturan tanggal dan jam
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

setInterval( function() {
// Create a newDate() object and extract the seconds of the current time on the visitor's
var seconds = new Date().getSeconds();
// Add a leading zero to seconds value
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);

setInterval( function() {
// Create a newDate() object and extract the minutes of the current time on the visitor's
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes value
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);

setInterval( function() {
// Create a newDate() object and extract the hours of the current time on the visitor's
var hours = new Date().getHours();
// Add a leading zero to the hours value
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000); 
});
</script>

7. Setelah itu cari kode ]]></b:skin>
8. Setelah ketemu simpan kode di bawah ini di atas kode ]]></b:skin>

.clock {
width: 260px;
margin: 0 auto;
padding: 30px;
color: #FFF;background:#333;
}
.clock ul {
width: 250px;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center
}

.clock ul li {
display: inline;
font-size: 3em;
text-align: center;
font-family: "Arial", Helvetica, sans-serif;
text-shadow: 0 2px 5px #55c6ff, 0 3px 6px #55c6ff, 0 4px 7px #55c6ff
}
#Date { 
font-family: 'Arial', Helvetica, sans-serif;
font-size: 26px;
text-align: center;
text-shadow: 0 2px 5px #55c6ff, 0 3px 6px #55c6ff;
padding-bottom: 40px;
}

#point {
position: relative;
-moz-animation: mymove 1s ease infinite;
-webkit-animation: mymove 1s ease infinite;
padding-left: 10px;
padding-right: 10px
}

/* Animasi Detik Kedap - Kedip */
@-webkit-keyframes mymove 
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } 
}

@-moz-keyframes mymove 
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } 
}

9. Setelah itu silahkan kembali ke Tata letak
10. Klik Tambah Gadget
11. Klik HTML/Javascript
12. Tambahkan kode di bawah ini pada kolom bagian bawah

<div class="clock">
<div id="Date"></div>
<ul>
<li id="hours"></li>
<li id="point">:</li>
<li id="min"></li>
<li id="point">:</li>
<li id="sec"></li>
</ul>
</div>

13. Klik SIMPAN

Oh iya itu jam sudah saya kecilin jadi 260px dan juga tanggalnya sudah saya jadiin indonesia semua bahasanya, jika kurang kecil silahkan modifikasi lagi di CSS nya, sesuaikan dengan sidebar anda.