Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

1 komentar:

 
GR | Edited by | gubhug reyot