Membuat jam digital sendiri dengan css3

Membuat jam digital sendiri dengan css3. ok trik kali ini tentang cara membuat jam digital sendiri dengan css3 dan jquery.
caranya cukup gampang dan anda bisa mengembangkannya sesuai keinginan anda baik itu ukuran maupun tampilannya.

untuk contoh nya berikut gambarnya:
nah, cukup kerenkan, anda tertarik untuk membuat jam seperti contoh gambar di atas, berikut ini cara-caranya:
1. pada Dasbor 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; }
}

Selanjutnya, silahkan kembali ke Rancangan pada blog anda, silahkan tambahkan widget html/javasscript, lalu pastekan kode berikut ini ke dalamnya untuk menampilkan jam digital buatan anda sendiri.
<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>
jika anda mau lebih kreatif anda bisa mengubah tampilan sesuai selera anda.