Cara membuat Analog Clock dengan Background Animasi

Gambar di bawah adalah bentuk Analog Clock dengan Background Animasi



Silahkan langsung copy paste KODE dan simpan sebagai widget baru.

Langkah untuk Membuat Analog Clock dengan Background Animasi

1. Login to Blogger (Login ke Blogger)
2. KLIK link Design (Rancangan)
3. KLIK Page Element (Elemen Laman)
4. KLIK Add Gadget (Tambah Gadget). Gunakan bagian sidebar (samping kanan atau kiri)
5. KLIK HTML/Javascript : Letakkan KODE dan script di dalamnya.
6. KLIK SAVE (SIMPAN)
7. Open Your Blog (buka Blog) : Lihat hasilnya dengan membuka blog.

Javascript dan KODE HTML Analog Clock dengan Background Animasi :

<script type="text/javascript">
var clocksize = 100;
var colnumbers = 'ff0000';
var colseconds = '12fe00';
var colminutes = 'ffcccc';
var colhours = 'ffcccc';
var numstyle = 0;
var font_family = 'helvetica,arial,sans-serif';
var localZone = 1;
var mytimezone = 0;
var dst = 0;
var city = '';
var country = '';
var fix = 1;
var xpos = 0;
var ypos = 0;
var dayname = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday');
var am="AM";var pm="PM";var pi=Math.PI;var d=document;var pi2=pi/2;var rad=(+clocksize)/2;var ctrX=(+xpos)+rad;var ctrY=(+ypos)+rad;var hourln=1;var minln=secln=2;for(var i=0;i<(rad/2)+(rad/16);i++){hourln+=1}for(var i=0;i<(rad/2)-(rad/8);i++){minln+=2;secln+=2}var font_size=rad/4;var offset=16;var clocknum=[[,1,2,3,4,5,6,7,8,9,10,11,12],[,"I","II","III","IIII","V","VI","VII","VIII","IX","X","XI","XII"],[,"·","·","-","·","·","|","·","·","-","·","·","||"]];if(numstyle<0||numstyle>2){numstyle=0}function timeZone(e,g,c,j){if(g){var h=e.getDay();var b=e.getSeconds();var f=e.getMinutes();var a=e.getHours()}else{e.setUTCMinutes(e.getUTCMinutes()+(c+j)*60);var h=e.getUTCDay();var b=e.getUTCSeconds();var f=e.getUTCMinutes();var a=e.getUTCHours()}if(a>11){moa=pm;a-=12}else{moa=am}return[h,moa,a,f,b]}function commonClock(a){a.style.position="absolute";a.style.top="0";a.style.left="0";a.style.visibility="hidden"}function displayClock(){if(!d.getElementById){return}var b=document.createElement("div");if(fix){b.style.position="relative";b.style.margin="auto";b.style.width=(clocksize+offset*2)+"px";b.style.height=(clocksize+offset*2)+"px";b.style.overflow="visible"}var j=[];for(var c=12;c>0;c--){j[c]=document.createElement("div");j[c].id="cnum"+c;commonClock(j[c]);j[c].style.width=(offset*2)+"px";j[c].style.height=(offset*2)+"px";j[c].style.fontFamily=font_family;j[c].style.fontSize=font_size+"px";j[c].style.color="#"+colnumbers;j[c].style.textAlign="center";j[c].style.paddingTop="10px";j[c].style.zIndex=1000;j[c].innerHTML=clocknum[numstyle][c];b.appendChild(j[c])}var g=[];for(c=minln;c>0;c--){g[c]=document.createElement("div");g[c].id="cmin"+c;commonClock(g[c]);g[c].style.width="1px";g[c].style.height="1px";g[c].style.fontSize="1px";g[c].style.backgroundColor="#"+colminutes;g[c].style.zIndex=997;b.appendChild(g[c])}var e=[];for(c=hourln;c>0;c--){e[c]=document.createElement("div");e[c].id="chour"+c;commonClock(e[c]);e[c].style.width="2px";e[c].style.height="2px";e[c].style.fontSize="2px";e[c].style.backgroundColor="#"+colhours;e[c].style.zIndex=998;b.appendChild(e[c])}var h=[];for(c=secln;c>0;c--){h[c]=document.createElement("div");h[c].id="csec"+c;commonClock(h[c]);h[c].style.width="1px";h[c].style.height="1px";h[c].style.fontSize="1px";h[c].style.backgroundColor="#"+colseconds;h[c].style.zIndex=999;b.appendChild(h[c])}var f=document.createElement("div");f.id="ampm";commonClock(f);f.style.width=((xpos+rad)*2)+"px";f.style.fontFamily=font_family;f.style.fontSize=(font_size*2/3)+"px";f.style.color="#"+colnumbers;f.style.textAlign="center";f.style.paddingTop="10px";f.style.zIndex=990;b.appendChild(f);var a=document.createElement("div");a.id="zone";commonClock(a);a.style.width=((xpos+rad)*2)+"px";a.style.fontFamily=font_family;a.style.fontSize=(font_size*2/3)+"px";a.style.color="#"+colnumbers;a.style.textAlign="center";a.style.paddingTop="10px";a.style.zIndex=990;b.appendChild(a);d.getElementById("clock_a").appendChild(b);for(var c=12;c>0;c--){d.getElementById("cnum"+c).style.top=(ctrY-offset+rad*Math.sin(c*pi/6-pi2))+"px";d.getElementById("cnum"+c).style.left=(ctrX-offset+rad*Math.cos(c*pi/6-pi2))+"px";d.getElementById("cnum"+c).style.visibility="visible"}updateClock()}function moveClock(a,g,c){for(var b=a;b>0;b--){d.getElementById(g+b).style.top=(ctrY+b*Math.sin(c))+"px";d.getElementById(g+b).style.left=(ctrX+b*Math.cos(c))+"px";d.getElementById(g+b).style.visibility="visible"}}function updateClock(){var b=new Date();var a=timeZone(b,localZone,mytimezone,dst);d.getElementById("ampm").style.top=(ypos+rad/3)+"px";d.getElementById("ampm").innerHTML=a[1]+" "+dayname[a[0]];d.getElementById("ampm").style.visibility="visible";if(!localZone){d.getElementById("zone").style.top=(ctrY+(rad/10))+"px";d.getElementById("zone").innerHTML=city+""+country;d.getElementById("zone").style.visibility="visible"}moveClock(secln,"csec",pi*a[4]/30-pi2);moveClock(minln,"cmin",pi*a[3]/30-pi2);moveClock(hourln,"chour",pi*a[2]/6+pi*(+b.getMinutes())/360-pi2);setTimeout("updateClock()",100)}window.onload=displayClock;
</script>

<div align="center" style="background:#333;margin:0px;padding:0;border:1px solid red;width:132px;"> <div id="clock_a" style="padding:10px;border:1px solid lime;margin:4px;background:black url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/bg_RedBlackAnimaV5H5-gubhugreyot.gif);width:100px; height:105px;"></div>
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - gubhugreyot «