Membuat Widget Jam Analog Dengan CSS - Cara menampilkan widget pengukur waktu seperti ini, mungkin sudah sering Anda lihat pada beberapa blog yang menggunakannya. Sekarang coba lihat halaman depan di HP (Hand Phone) Anda, saya yakin pasti menggunakan widget seperti ini juga, hanya versi yang berbeda seperti (stopwatch second dan analog style). Sehingga Inspirasi pada tutorial kali ini, saya mengambil tema tentang "Bagaimana cara Memindahkan Jam Dinding Di rumah Anda, untuk kita tempatkan pada halaman widget di blog" seperti tampilan gambar berikut:

Clock pictures


Baca juga - 10 Pilihan Efek Loading Blog



Hal yang tersulit dalam Membuat Widget Jam Analog seperti ini adalah membuat gerakan detik layaknya sebuah jam, yang bergerak berputar melintasi angka-angka pada jam tersebut, dan saya coba membuat gerakan tersebut dengan css-animasi, dan berhasil, akan tetapi waktu yang ditunjukkan pada widget tidak sesuai dengan jam pada laptop saya. Akhirnya saya hapus kembali, dan mendesain ulang dengan penggunaan perintah script untuk mendapatkan GMT-waktu setempat sesuai lokasi Negara dengan kode seperti ini:

<script type="text/javascript">
var oClockAnalog = {
    aSecond:         [],
    dtDate:          new Date(),
    iCurrSecond:     -1,
    iHourRotation:   -1,
    iMinuteRotation: -1,
    iStepSize:       10,
    iTimerAnimate:   setInterval("oClockAnalog.fAnimate()", 20),
    iTimerUpdate:    setInterval("oClockAnalog.fUpdate()", 1000),

    fAnimate:       function() {
        if (this.aSecond.length > 0) {
            this.fRotate("analogsecond", this.aSecond[0]);
            this.aSecond = this.aSecond.slice(1);
        }
    },
</script>

Dan hasilnya sesuai harapan seperti ini:




DEMO SHOW




Bagaimana? terlihat keren dan menarik bukan tampilan jam ini.!, buat sahabat semua pecinta SAHABAT BLOGGER 77 yang ingin Membuat Widget Jam Analog seperti ini, versi kode jam analog dengan lengkap sudah saya siapkan untuk Anda copy dan letakkan pada formulir halaman HTML/javascript di widget blog Anda.
Kode lengkapnya seperti ini:



<style type="text/css">
.watch {
  background: #34495e;
  border-radius: 50%;
  height: 20em;
  left: 50%;
  margin-left: -10em;
  margin-top: -10em;
  position: absolute;
  top: 150%;
  width: 20em;}

.watch:after, .watch:before {
  content: '';
  background-color: #bfbfbf;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFBFBFBF', endColorstr='#FFECF0F1');
  background-image: -moz-linear-gradient(top, #bfbfbf 0%, #ecf0f1 100%);
  background-image: -webkit-linear-gradient(top, red 0%, red 100%);
  background-image: linear-gradient(to bottom, #C0C0C0 0%, #FFF8DC 100%);
  border-radius: 50%;
  position: absolute;
  height: 22em;left: -1em;
  top: -1em;width: 22em;z-index: -1;}

.watch:before {
  box-shadow: -0.2em -0.4em 0.5em rgba(0, 0, 0, 0.2);
  height: 24em;left: -2em;
  transform: rotate(180deg);
  top: -2em;width: 24em;}

.watch-face {border-radius: 50%;height: 100%;width: 100%;}
.watch-face ul {list-style: none;}
.watch-face ul li {
  background: #34495e;
  border-radius: 50%;
  color: #ecf0f1;
  font-size: 2.8em;
  height: 1.5em;
  line-height: 1.5;
  position: absolute;
  text-align: center;
  text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.3);
  width: 1.5em;}

.watch-face ul li:first-child {top:0;left:50%;margin-left:-0.75em;}
.watch-face ul li:nth-child(2) {margin-top:-0.75em;right:0;top:50%;}
.watch-face ul li:nth-child(3) {bottom:0;left:50%;margin-left:-0.75em;}
.watch-face ul li:nth-child(4) {margin-top:-0.75em;left:0;top:50%;}

.watch-face:after {
  content: '';
  background-image: -moz-linear-gradient(left bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 60%);
  background-image: -webkit-linear-gradient(left bottom, rgba(55, 45, 155, 0) 0%, rgba(55, 45, 155, 0) 60%, rgba(55, 45, 155, 0.1) 60%);
  background-image: linear-gradient(to right top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 60%);
  box-shadow: inset 0.5em 1em 2em rgba(0, 50, 136, 0.3), inset -0.5em -1em 2em rgba(0, 50, 136, 0.1);
  border-radius: 50%;
  position: absolute;
  height: 20em;left: 0;top: 0;
  width: 20em;z-index: 5;}

.watch-face:before {
  border-radius: 50%;
  border: 0.25em solid #ecf0f1;
  box-shadow: 0.05em 0.05em 0.1em rgba(0, 50, 136, 0.9), inset 0.05em 0.05em 0.1em rgba(0, 50, 136, 0.3), inset -0.05em -0.05em 0.1em rgba(0, 50, 136, 0.9), -0.05em -0.05em 0.1em rgba(0, 50, 136, 0.3);
  content: '';
  height: 80%;left: 9.5%;
  position: absolute;top: 9.5%;width: 80%;}

[class*="watch-hand"] {
  background: #bfbfbf;
  border-radius: 0.4em 0.4em 0 0;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
  left: 9.8em;
  position: absolute;top: 2em;
  z-index: 4;transform-origin: 50% 100%;}

.watch-hand-second {width:0.2em;top:0.9em;height:9em;left:50%;}
.watch-hand-minute {width: 0.4em;top: 2.1em;height: 8em;}
.watch-hand-hour {width: 0.6em;top: 4em;height: 6em;}

.watch-center-circle {
  background: #FAEBD7;
  box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  height: 1.5em;
  left: 50%;
  margin-left: -0.75em;
  margin-top: -0.75em;
  position: absolute;top: 50%;
  width: 1.5em;z-index: 5;}

.watch-center-circle:after {
  background: #7f8c8d;
  border-radius: 50%;
  content: '';
  height: 0.9em;left: 0.3em;
  position: absolute;
  top: 0.3em;width: 0.9em;}

.stop-watch {
  position:relative !important;
  background:#fff;
  color:#222;
  text-align:center;
  margin:24.6em auto;
  border:2px inset red;
  width:65px;
  font:bold 9px/normal arial;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var oClockAnalog = {
    aSecond:         [],
    dtDate:          new Date(),
    iCurrSecond:     -1,
    iHourRotation:   -1,
    iMinuteRotation: -1,
    iStepSize:       10,
    iTimerAnimate:   setInterval("oClockAnalog.fAnimate()", 20),
    iTimerUpdate:    setInterval("oClockAnalog.fUpdate()", 1000),

    fAnimate:       function() {
        if (this.aSecond.length > 0) {
            this.fRotate("analogsecond", this.aSecond[0]);
            this.aSecond = this.aSecond.slice(1);
        }
    },
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/analog-clock.js"></script>
<div class="watch">
  <div id="cssclock">
    <div id="clockanalog">
      <div class="watch-center-circle"></div>
<div class="watch-hand-second" id="analogsecond"></div>
<div class="watch-hand-minute" id="analogminute"></div>
<div class="watch-hand-hour" id="analoghour"></div>
    </div>
       <div class="watch-face">
         <ul>
           <li>12</li>
           <li>3</li>
           <li>6</li>
           <li>9</li>
         </ul>
       </div>
  </div>
</div>
<div class="stop-watch">
<h2>
<time id="clock"></time>
<script type="text/javascript">
(function() {
    var clock = document.getElementById('clock');
    setInterval(function() {
        var time = new Date().toString().split(' ')[4];
        clock.innerHTML = time;
    }, 13);
})();
</script></h2>
</div>


Jam ini saya jual Rp. 50.000,- saja, gak terlalu mahal kok, karena otomatis tanpa penggunaan battray, hehhe...!! Selamat berInspirasi, good night..**

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Widget Jam Analog Dengan CSS
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

12 komentar

  1. Wahhhh puyeng dah kalau sudah urusan CSS Soalnya ya template saya yang bkin saya bingung buat JUMP WIDGET nya. Diimaba letak CSS nya binngung juga saya heihiehiee Maklum biasa pake SCRIPT jam analog HTML Tinggal copy paste udah sih heihiehiehiee. Menyimak aja deh

    BalasHapus
    Balasan
    1. belum terbiasa saja kali kang asep, jadinya lihat kode seperti ini langsung bingung dah..hehe

      Hapus
  2. beneran dijual nih mbak jam nya :-d

    BalasHapus
    Balasan
    1. serius kang, tapi harganya sudah pas ya, tidak ditawar lagi

      Hapus
  3. Cantik yah tampilan Jam analognya Mbak Devy, (f) pernah dulu
    Masang widget jam Mbak sekarang belum nyoba lagi..
    Makasih atas tutorialnya salam sukses

    BalasHapus
  4. wah keren juga nih widget jam bisa juga bikin sendiri ya dengan kode, dulu sih saya pasang widget jam dari situs lain ;)

    BalasHapus
    Balasan
    1. biasanya dengan menyisipkan js pada gambar jam yang sudah jadi, tetapi kalau ini, dari dasar bentuknya saya rangkai dengan kode CSS.

      Hapus
  5. sy bilang juga apa..!, jamnya bergerak walau ini dirangkai dgn css...jadi buat avatrlah sekalian mba..sy pesan avatar onthel ya Mba..berani bayar 2.000. :>)

    BalasHapus
  6. makin cantik pasti nya kalau blog dihiasi dengan jam cantik, sehingga pengunjung tidak lupa waktu saat sedang keasyikan baca artikel di blog kita :)

    ikutan lomba yuk di situs dicuekin.com :)

    BalasHapus
  7. kayaknya menarik nih memasang jam analog dengan css diblog kesayanganku deh

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK