Nas minhas andanças pelo Google, a procura de alguns scripts ou códigos, me deparo com o blog Dicas para Blogs, e vejo um script para colocar o dia do mês e a semana. No Codigos Blog, há um script para se ter um relógio simples. Aí pensei, será que não dá para combinar os dois num único widget?Usando comandos divs para fazer colunas e bordas, isso foi possível e o resultado vocês podem ver em cima do meu banner. Abaixo o widget que fiz unindo os dois scripts:
<div style="background: #eee ;border: 2px solid ; padding: 2px;"><div style="width: 80%; float: left;"><script language="JavaScript">
<!--
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
myyear= mydate.getYear();
weekday= myweekday;
if(myday == 0)
day = " Domingo"
else if(myday == 1)
day = " Segunda - Feira"
else if(myday == 2)
day = " Terça - Feira"
else if(myday == 3)
day = " Quarta - Feira"
else if(myday == 4)
day = " Quinta - Feira"
else if(myday == 5)
day = " Sexta - Feira"
else if(myday == 6)
day = " Sábado"
if(mymonth == 0)
month = "Janeiro "
else if(mymonth ==1)
month = "Fevereiro "
else if(mymonth ==2)
month = "Março "
else if(mymonth ==3)
month = "Abril "
else if(mymonth ==4)
month = "Maio "
else if(mymonth ==5)
month = "Junho "
else if(mymonth ==6)
month = "Julho "
else if(mymonth ==7)
month = "Agosto "
else if(mymonth ==8)
month = "Setembro "
else if(mymonth ==9)
month = "Outubro "
else if(mymonth ==10)
month = "Novembro "
else if(mymonth ==11)
month = "Dezembro "
document.write(day+", "+myweekday+" de "+month+" de 2008");
// -->
</script></div>
<div style="width: 10%; float: right;"><script>
function hora_atual(){
if(eval('typeof(document.FORM)') != 'undefined') {
var date = new Date();
document.FORM.horario.value = date.getHours()+':'+ ((date.getMinutes() < name="FORM" style="font-family:verdana,arial,helvetica;font-size:12px;color:#CC0000;background:transparent; width:40;border:0;cursor:default" name="horario" size="4" type="text" style="clear: both;">
Vamos agora decifrar cada linha:
<div style="background: #eee ;border: 2px solid ; padding: 2px;">- background: #eee = define a cor de fundo do widget, se quiser outra cor, troque o #eee por alguma outra cor de sua preferência.Veja aqui.
- border: 2px solid = aqui é a borda do widget. Troque o 2px pela largura de sua preferência e o solid(linha sólida) por outro tipo. Veja aqui, no blog Codando.
<div style="width: 80%; float: left;"><
- Aqui defino a largura(width) da 1ª coluna à esquerda(left)
<div style="width: 10%; float: right;">- Aqui defino a largura(width) da 2ª coluna à direita(right)
Dificuldades:
No Dicas, há uma forma de customizar a fonte e cor do dia e data da semana, mas não deu certo, pois as letras ficaram muito grandes e mexeu com todo o template. Preferi deixar o script do jeito que estava, pois tanto a fonte quanto a cor dela já estão definidas para o meu blog(editar layout > fontes e cores).
No script do relógio, você pode mudar isso porque já está nele mesmo:
name="FORM" style="font-family:verdana,arial,helvetica;font-size:12px;color:#CC0000;background:transparent; width:40;border:0;cursor:default" name="horario" size="4" type="text" style="clear: both;Em font-family, você define o tipo da fonte que quer, em font-size o tamanho da fonte em px, em color a cor da fonte que coloquei em vermelho(#CC0000). O resto, deixe do jeito que está. Se eu souber como mudar no primeiro script, voltarei aqui e atualizarei o post.
Esse post mostra o auto didatismo do Cidão em busca da compreensão de códigos para a internet, css e afins.
Eu que pensava que px e pt eram a mesma coisa... ledo engano! Tenho "muuuito" ainda a aprender!!!
