Jam Analog yang di Blogger

Seperti halnya sebuah Jam Analog yang diciptakan dengan CSS3, dimana jam tersebut dapat ditampilkan pada sebuah blog atau halaman website yang dapat menampilkan waktu real Time.

Jam Analog kali ini diciptakan dengan menggunakan jQuery. Dalam hal penampilan, Jam Analog ini tidak jauh berbeda dengan Jam Analog yang diciptakan dengan CSS3. Mungkin hanya mekanismenya saja yang membedakannya, dimana jQuery diperlukan untuk memanggil dan menjalankan animasi.

Berikut ini adalah satu paket gambar yang digunakan untuk membuat Jam Analog:

hour.png

minute.png

second.png

Clock.png

Untuk background gambar, anda dapat menggunakan beberapa contoh background berikut ini:

Untuk Paket Gambar, anda dapat Download paketgambar.zip disini, dengan cara klik kanan kemudian "Save Link As..."

Implementasi :

Berikut ini adalah Kode lengkap untuk membuat Jam Analog, Silahkan letakan kode tersebut kedalam tag <body> atau dimanapun anda ingin menampilkannya pada halaman website anda, dengan cara "Add Gadget", "Add HTML/JavaScript" kemudian letakan "Kode Lengkap Jam Analog" kedalamnya dan simpan.

Kode Lengkap Jam Analog :

<style type="text/css">
/***********************************************
* Jam Analog dengan jQuery (c) Buku Catatan si Ugi code library (http://caprt3a.blogspot.com)
* Visit http://caprt3a.blogspot.com for more of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
#clock {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 50px auto 0 auto;
    background: url(Clock.png)no-repeat;
    list-style: none
    }

#sec, #min, #hour {
    position: absolute;
    width: 12px;
    height: 250px;
    top: 2px;
    left: 119px
    }

#sec {
    background: url(jQuery_second.png);
    z-index: 3
    }

#min {
    background: url(jQuery_minute.png);
    z-index: 2
    }

#hour {
    background: url(jQuery_hour.png);
    z-index: 1
    }
</style>


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


<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>

Keterangan :

Sebelum memasang "Kode Lengkap Jam Analog" ini, terlebih dahulu upload atau (hosting) paket gambar yang sudah anda Download sebelumnya kedalam server anda, kemudian letakan URL-URL gambar tersebut seperti contoh pada (text warna merah)sesuai dengan nama gambar.

Selesai.

Selasa, 24 Juli 2012

Jam Analog yang di Blogger

Implementasi :

Kode Lengkap Jam Analog :

Keterangan :

Tidak ada komentar:

Posting Komentar