quinta-feira, 16 de outubro de 2008

Como colocar a data o dia da semana e a hora no seu blog

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;">
Ficou algo bem simples, não é mesmo? Nada de imagens ou códigos em flash que acabam travando a abertura da página. É só entrar em elementos de páginas, e criar o widget, copiando e colando o código acima no lugar de sua preferência.

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!!! Photobucket

10 comentários:

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Artigos recentes

Related Posts with Thumbnails
Google