Cursed Angels

Ok, vou ensinar como fazer um reloginho com data personalizado para seu blog, como esse abaixo:

Primeiro passo:

Copie essa imagem, ela será o fundo de seu relógio. Lembrando que vocę pode (e deve) modificá-la conforme seu gosto utilizando programas de ediçăo de imagem que preferir. Salve com o mesmo nome (fundo-relogio). Năo modifique o tamanho da imagem, principalmente se vocę năo souber mexer no código.

Segundo passo:

Agora, copie a próxima imagem. Ela será o centro do relógio. Vocę deve modificá-la ao seu gosto, lembrando mais uma vez de năo alterar seu tamanho. Salve com o mesmo nome (foto-relogio)

Terceiro passo:

Abra seu editor de html, crie uma nova página e copie o código abaixo:

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
<BODY>
<TABLE height=108 width=86
background=http://endereço-da-imagem/fundo-relogio.gif border=0>
  <TBODY>
  <TR>
    <TD style="PADDING-LEFT: 3px; PADDING-TOP: 3px" height=19>
      <SCRIPT language=JavaScript>document.write("<p align='top'><FONT color='#798191' face='Verdana' style='font-size : 9px;'>");</SCRIPT>
    </TD></TR>
  <TR>
    <TD width=60 height=60><IMG src="http://endereço-da-imagem/foto-relogio.gif" border=0></A></TD></TR>
  <TR>
    <TD style="PADDING-LEFT: 3px; PADDING-TOP: 3px" height=19>
      <SCRIPT>
document.write("<FONT color='#798191' face='Verdana' style='font-size : 9;'>");
var clockid=new Array()
var clockidoutside=new Array()
var i_clock=-1
var thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()

if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (eval(seconds) <10) {seconds="0"+seconds}

var thistime = hours+":"+minutes+":"+seconds

function writeclock() {
	i_clock++
	if (document.all || document.getElementById || document.layers) {
		clockid[i_clock]="clock"+i_clock
		document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")
	}
}

function clockon() {
	thistime= new Date()
	hours=thistime.getHours()
	minutes=thistime.getMinutes()
        seconds=thistime.getSeconds()
	if (eval(hours) <10) {hours="0"+hours}
	if (eval(minutes) < 10) {minutes="0"+minutes}
        if (eval(seconds) < 10) {seconds="0"+seconds}
	thistime = hours+":"+minutes+":"+seconds

if (document.all) {
		for (i=0;i<=clockid.length-1;i++) {
			var thisclock=eval(clockid[i])
			thisclock.innerHTML=thistime
		}
	}

if (document.getElementById) {
		for (i=0;i<=clockid.length-1;i++) {
			document.getElementById(clockid[i]).innerHTML=thistime
		}
	}
	var timer=setTimeout("clockon()",1000)
}
window.onload=clockon
  </SCRIPT>

<CENTER>
      <SCRIPT>writeclock()</SCRIPT>
      </CENTER></TD></TR></TBODY></TABLE></BODY></HTML>

Cole o código acima na página que vocę criou.

Quarto passo:

Vamos ajustar o código. Na linha 5 ou 6 vocę verá o seguinte:

TABLE height=108 width=86 background=http://endereço-da-imagem/ fundo-relogio.gif border=0

Substitua a parte em vermelho pelo endereço do servidor onde está hospedadda a imagem fundo-relogio.gif.

Na linha 10 e na linha 18, temos o seguinte:

SCRIPT language=JavaScript>document.write("p align='top' FONT color='#798191' face='Verdana' style='font-size : 9px;'>");!--

document.write("FONT color='#798191' face='Verdana' style='font-size : 9;'>");

Esse é o código hexadecimal da cor da fonte, vocę deve mudá-lo de acordo com as cores utilizadas nas suas figuras fundo-relogio e foto-relogio para dar um efeito bonito no relógio.
Obs. vocę deve usar o ccódigo hexadecimal ou o nome da cor em inglęs, por exemplo #ff0000 - é vermelho, #000000 - preto, #ffffff - branco, ou ainda, font color="black" ; font color="red" . Quando vocę escreve o nomeda cor năo é necessário utilizar o # (jogo da velha) antes, já com o hexadecimal é obrigatório.

Quinto passo:

Salve o documento com o nome relogio_data.htm e envie para seu servidor.

Sexto passo:

Agora vamos inserir o relógio no seu site/blog. Abra a página onde vocę quer que o relógio apareça no seu editor de html. Copie o código a seguir

E cole-o na página no local onde vocę quer que o relógio apareça.

Último passo:

Substitua o endereço-do-servidor/ do código acima, pelo endereço para o qual vocę enviou a página relogio_data.htm . Salve o documento e reenvie para seu servidor.

Dúvidas? Pergunte!!

Ť Anterior Topo