Home Animation CSS Animation Javascript Membuat Jam Digital Di Blog

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.

Pages

Membuat Jam Digital Di Blog

Related Post

0 komentar:

Posting Komentar