Membuat Jam Digital Di Blog

cara membuat digital clock(jam digital) tidak terlalu sulit,kita hanya memerlukan jquery dan css . untuk membuatnya saya sudah sediakan download secara gratis plus background Animation dan Menu Animation yang unik disana sudah di sediakan intruksi cara memasangnya.
atau contoh langsungnya bisa anda lihat di bawah. tampilannya bisa anda ganti sesuai selera.
Veiw Demo Download
jika ingin memasang pada blogger anda tanpa harus download dulu silahkan lihat tutorialnya berikut.
1. Masuk ke edit-template - edit HTML - Lanjutkan .
2. cari code </head> lalu masukan code link css dan javascript berikut di atasnya .
<link rel="stylesheet" href="https://css3-tutsplus.googlecode.com/svn/trunk/digital-clock/digital-clock/css/style-jam-digital.css" media="screen" type="text/css"/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
var led = document.getElementById('led'),
      els = led.childNodes,
    uid=0, size=10, w=0, h=0, row=0, col=0,
    arr_lights=[];

var hh = document.getElementById('time-hh'),
      hx = document.getElementById('time-h'),
      mm = document.getElementById('time-mm'),
      mx = document.getElementById('time-m'),
      ss = document.getElementById('time-ss'),
      sx = document.getElementById('time-s');

for(var k=0, len=els.length; k<len; k++){
  if(els[k].nodeType!=1)
    continue;
    w = parseInt(els[k].clientWidth);
  h    = parseInt(els[k].clientHeight);
  row    = parseInt(h/size);
    col    = parseInt(w/size);
  
  var t, l, sum=0;
  for(var i=0; i<row; i++){
       for(var j=0; j<col; j++){
      uid++;
      t = size*i;
      l = size*j;
      arr_lights.push( '<div uid="'+uid+'" id="l-'+uid+'" class="light row-'+i+' col-'+j+'" style="top:'+t+'px;left:'+l+'px"></div>');
    }
  }
  els[k].innerHTML = arr_lights.join("");
  arr_lights=[];
}

setInterval(function(){
    var now = new Date(),
        time_hh = parseInt(now.getHours()),
           time_mm = parseInt(now.getMinutes()),
            time_ss = parseInt(now.getSeconds());
    hh.className = "block-digital num-"+parseInt(time_hh/10);
    hx.className = "block-digital num-"+parseInt(time_hh%10);
    mm.className = "block-digital num-"+parseInt(time_mm/10);
    mx.className = "block-digital num-"+parseInt(time_mm%10);
    ss.className = "block-digital num-"+parseInt(time_ss/10);
    sx.className = "block-digital num-"+parseInt(time_ss%10);
  
}, 1000);
</script>
3. Pasang code HTML di atas id='content-wrapper' atau id='main-wrapper' atau id='post' atau di bawah id='header-wrapper' yang penting taruh di manapun ingin anda tampilkan..
HTML
<div class="led">
    <div class="board">
        <div id="led">
    <div class="block-digital num-0" id="time-hh">
        </div>
    <div class="block-digital num-0" id="time-h">
        </div>
    <div class="block-digital colon" id="time-h-colon">
        </div>
    <div class="block-digital num-0" id="time-mm">
        </div>
    <div class="block-digital num-0" id="time-m">
        </div>
    <div class="block-digital colon" id="time-m-colon">
        </div>
    <div class="block-digital num-0" id="time-ss">
        </div>
    <div class="block-digital num-0" id="time-s">
        </div>
    <div class="block-padding" id="time-padding">
        </div>
        </div>
    </div>
</div>
kemudian klik simpan template. dan lihat hasilnya..
mudah bukan, semoga ini bisa menjadi ilmu tambahan untuk memodifikasi template anda.
tunggu artikel selanjutnya yang mungkin akan lebih menarik.

5 comments:

  1. ajari / share tentang canvas html5 donk broo (T_T)

    ReplyDelete
    Replies
    1. ajarin share HTML5 gimana sob.. ?? o"o?
      ya saya cuman liat code HTML5 di w3School.com kalo kegunaanya saya cari referensi dari web design yang sudah terkenal..
      mudah kok sob asal mau jalan-jalan.. (o_o)

      Delete
  2. kren nih gan jamnya tapi sepertinya bakalan bikin berat bog ya?

    oh iya link agan sudah saya pasang silahkan di cek

    plus satu lagi gan nama saya bukan Rizky Ramadhan wkwkwkw

    tapi Rizky Wardiansyah

    ReplyDelete
    Replies
    1. ini gak akan berat gan.. script yang di pakai hanya buat nentuin jam,menit dan detik plus id dan class, cssnya juga gak akan bikin berat blog...

      satu lagi,, link ane di simpan dimana ya...???

      Delete
  3. Error parsing XML, line 1158, column 35: Element type "len" must be followed by either attribute specifications, ">" or "/>"

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top