Agora você pode criar seus próprios reloginhos, seguindo as instruções deste tutorial, vamos lá então!

* 1º. passo: Crie e ou tenha uma imagem, a qual será o fundo do reloginho. É aconselhável que a imagem seja .jpg ou .gif. Hospede a imagem em algum host. (Como Photo Bucket, Image Cave, etc...)
O relógio que criarei, terá esta imagem de fundo, as horas ficarão na barrinha em baixo da sininho:

* 2º. passo: Crie uma página (bloco de notas, salvando como NOME.html) com o seguinte código, substituindo [http://usera.imagecave.com/thasilvergirl/
Coisas/reloginho.gif] pelo endereço onde sua imagem de fundo está hosteada. Não se esqueca de hospedar a página.

<head>
<title>Relógio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
document.write("<FONT color='#000000' face='tahoma, Arial, Helvetica, sans-serif' style='font-size : 9px;'>");
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 (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 (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>
</head>

<body STYLE="background-color: transparent" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="Layer2" style="position:absolute; left:18; top:94; width:102; height:50; z-index:2"> 
<script>writeclock()</script>
</div>
<table width="4%" border="0" cellspacing="0" cellpadding="0">
<tr>

* 3º. passo: Vá alterando... <*div id="Layer2" style="position:absolute; left:18; top:94; width:102; height:50; z-index:2"*> (Não possui os "*")
Em left, top ou como quiser ou edite no FrontPage ou outro editor de HMTL. Até ficar posicionado no lugar onde as horas devem ficar na imagem.
* 4º. passo: Agora já temos o código do reloginho:

<*iframe src="http://thasilvergirl.vilabol.uol.com.br/
Reloginhosininho.html" width="80" height="80" marginwidth="0" marginheight="0" frameborder="no" scrolling=no allowtransparency="true"> (Não possui os "*")

Mude o [http://thasilvergirl.vilabol.uol.com.br/
Reloginhosininho.html] para o endereço da página como o script e aquele código e altere o width e o height de acordo com o tamanho da imagem de fundo do reloginho. Exemplo: Minha imagem do da sininho era de 72x81, ficou então 72 de width e 81 de height.

Já pode inserir o relógio no seu blog com este código!

Veja como ficou o meu relógio: Reloginho Sininho

Dica: Para mudar as cores, a fonte, entre outras coisas da numeração das horas, edite isto:
("<*FONT color='#000000' face='tahoma, Arial, Helvetica, sans-serif' style='font-size : 9px;'*>"); (Lembre que Não possui os "*")

Para saber o código da cor que você quer, consulte uma tabela de cores.

Qualquer dúvida pergunte na sessão de Dúvidas!

Tutorial de Relóginho por Thais Magalhães

« back || ^ top || * refresh || next »