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.

Author : » Daniel Ikeda «

Share this

Related Posts