Script para mostrar a data como calendário

Script para mostrar a data como calendário
Script para exibir a data como um calendário(imagem acima^, existem várias. A principal razão de se usá-lo é para usar apenas na primeira postagem, éretirado da segunda, em diante, entrada publicada no dia. Este script utiliza a hora secundária (clique aqui para saber mais).

Antes de executar os procedimentos a seguir salve seu modelo.

1. Modifique o Configurações > Formatação > Formato de data para Domingo, 7 de Junho de 2009

2. Vá em Layout > Editar HTML e expanda a caixa Expandir Modelos de Widgets.
3. Insira ou modifique o seguinte código CSS antes de ]] >< /b:skin >
.date {
width: 60px;
height: 68px;
padding: 0 10px 0 0;
float: left;
margin:0;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaOWikHQfbspDKXZHB9jtyzSRqkr0BoYinM_m-Mj2Mwug5eZm_aLYtbPgfsHOTDKi3iVKWxivSEz8oL3YMTt6vgdKIGJLz_vu-CHYpvnxaaQeEbgcsu_wHWjw3xnvRgYWY6oEpC4j86Us/s1600/date_button_template.gif') no-repeat;
}

.date_d {
    display:block;
    margin-top:5px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    }

.date_m {
   display:block;
   margin:0;
   color: #fff;
   text-align:center;
   font-weight: bold;
   font-size: 16px;
   }
*”date” é o calendario, “date_d” é o día e “date_m” é o mes. Pode modificar os valores de acordo com as suas preferências e de sua imagem de fundo claro se souber CSS =).

4. Busca o seguinte código no seu modelo:
<div class='post hentry uncustomized-post-template'>
5. Insira o código
<div class='date'>
<script type='text/javascript'>
var timestamp = "<data:post.timestamp/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>

<div class='date_m'><script type='text/javascript'>document.write(date_mmm);</script></div>
<div class='date_d'><script type='text/javascript'>document.write(date_dd);</script></div>

</div>
* onde estiver com aspas duplas altere para: & quot; tudo junto
6. Salve.

Variantes

Se quiser colocar a data antes do mes na imagem apenas troque as div de lugar: date_d e depois date_m

Se quiser colocar o ano insira o código como mostrado a seguir com as modificações de data antes do mês:
<div class='date_d'><script type='text/javascript'>document.write(date_dd);</script></div>
<div class='date_m'><script type='text/javascript'>document.write(date_mmm);</script><script type='text/javascript'>document.write(date_yyyy);</script></div>
É isso ai aproveite!
Encontrou dúvidas? deixe sua questão.

Share this

Related Posts

Previous
Next Post »

3 comentários

comentários
Anônimo
01/12/2009, 22:04 delete

Daniel eu fiz exatamente o que você postou aqui mas apenas aparece a imagem e a data não aparece nada o que posso ter feito de errado?

Reply
avatar
03/12/2009, 12:29 delete

Se você alterou também as aspas então, talvez seja seu template que esteja com problemas, envie pelo formulário de contato seu template completo (XML) para que eu possa dar uma olhada ok?

Reply
avatar
28/04/2010, 17:51 delete

Aqui so aparece Undefined...

Reply
avatar

Todos os comentários serão moderados, aguarde a publicação.

Outros assuntos ou solicitações pessoais devem ser feitas por meio do formulário de contato.