O Problema
Aqueles que têm um blog no blogger e quiseram personalizar o template utilizado no blog provavelmente tiveram uma frustação com relação às datas. Acontece que, apesar de toda a flexibilidade de personalização do sistema de template do blogger, não é possível escolher um formato de data, nem através de código nem através da interface gráfica de configuração, que não esteja na lista padrão da interface gráfica do blogger. Os formatos oferecidos podem servir para muita gente mas acredito que, para nós brasileiros, não sejam os ideais.
Eu também me deparei com esse problema e desenvolvi uma solução relativamente simples que permite utilizar qualquer formato de data no seu template. A solução, infelizmente, requer um pouco de conhecimento de HTML, javascript e dos tags do widget Blog do blogger.
A solução
A solução consiste, basicamente, em se pegar a data fornecida pelo blogger e transforma-la num objeto javascript do tipo Date. Depois o objeto será inserido no código HTML da página utilizando o jQuery e formatado por um script desenvolvido por Matt Kruse.
OK, parece bastante complicado mas não se assuste, eu vou ensinar passo-a-passo como implementar essa solução no seu blog.
Implementando a solução
No guia de implementação eu alterei a data exibida em cada postagem do blog. No meu blog essa data é exibida logo abaixo do titulo da postagem. Para implementar a solução você deverá executar os seguintes passos:
- Escolher o melhor formato de data do blogger através da interface gráfica
- Disponibilizar os scripts de tercerios no seu blog
- Editar o seu template para inserir o código que vai alterar o formato da data
1. Escolhendo o melhor formato de data do blogger
Para nós, o melhor formato de data será aquele que tem a data completa (dia, mês, ano e hora) em formato númerico. Assim conseguiremos facilmente transforma-la em um objeto javascript do tipo Date.
Para mudar o formato da data da postagem no blogger selecione o painel do seu blog. Se você estiver logado na sua conta do blogger e na página principal do seu blog clique no link Personalizar que se encontra na barra superior do blogger no topo do seu blog. No painel do seu blog selecione a aba Layout e depois clique no link Elementos da Página. A página que será exibida mostra o layout do seu blog e todos os widgets instalados. Clique no link Editar do widget Postagens no Blog. Uma janela popup será exibida com as configurações do widget. Marque a terceira opção e selecione o formato de data como mostra a figura abaixo. O formato escolhido exibe a data no seguinte formato: mês(1 ou 2 digitos)/dia(1 ou 2 digitos)/ano(4 digitos) hora(2 digitos de 0 a 12):minutos(dois digitos):segundo(dois digitos) AM ou PM.
2. Disponibilizando os scripts necessários no seu blog
A solução utiliza a biblioteca javascript jQuery e as funções desenvolvidas por Matt Kruse para manipulação de datas. Para disponibilizar estes scripts no seu blog vá novamente na aba Layout no painel do blog e clique no link Editar HTML.
Para importar o jquery no seu blog, localize o tag <head> do seu template e dentro dele insira o código a abaixo.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Para inserir as funções de Matt Kruser acesse a versão compacta do código que está disponível na página dele e copie o código. Agora, novamente, dentro do tag <head> no seu template cole o código dentro de um tag <script> como no código abaixo. Desta vez, não será possível colar o código dentro do tag <head> porque o template do Blogger é um arquivo XML e o código javascript certamente terá caracteres que farão com que o processador XML interprete o documento como um documento inválido. A solução é adicionar um widget HTML/Javascript e colar o código. Para adicionar o widget vá na guia Layout e clique em Elementos da Página. Se o sey template permite a adição de novos widgets haverá um link Adicionar um elemento de página. Clique neste link, uma janela popup será exibida com um conjunto de widgets que podem ser adicionados ao seu blog, localize o widget HTML/Javascript e clique no botão Adicionar ao Blog, na tela de configuração do widget cole o código de Matt Kruser que você copiou na página dele no campo conteúdo e salve.
As funções desenvolvidas por Matt permitem que você valide e formate datas e converta datas no formato string em objetos do tipo Date. Porém, para que possamos utilizar as funções plenamente, precisamos traduzir os nomes dos meses e dias que estão, naturalmente, em inglês. Para isso substitua a primeira linha do código compacto que você acabou de copiar pelas duas linhas abaixo.
var MONTH_NAMES=new Array('Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro','Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez');
var DAY_NAMES=new Array('Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabádo','Dom','Seg','Ter','Qua','Qui','Sex','Sab');
3. Inserir scripts para exibir as datas formatadas no seu template
O passo final para exibir a data das postagens em qualquer formato no seu blog é inserir um script que vai formatar as datas e injetar na página exibida. Esse código poderá ser utilizado com outras datas do seu blog. Este último passo será mais fácil se você tiver conhecimentos básicos sobre os tags de widget do template do blogger.
Acesse novamente a página Editar HTML dentro da aba Layou do painel do seu blog. Se seu blog utiliza um dos templates basicos do blogger deve ter duas sessões sendo que a primeira sessão é a main(Principal). Dentro desta sessão está o widget do tipo Blog cujo nome é Blog1. Dentro desse widget existe uma série de tags do tipo includable, que são partes de código HTML que poderão ser utilizados na montagem do widget Blog. Localize o includable com o id post, ele é o responsável pela formatação das postagens exibidas na sua página. Dentro desse includable localize o trecho de código que exibe o timestamp da postagem. Tente localizar o tag <data:post.timestamp/>.
Após localizar o trecho de código que exibe o timestamp da postagem, o próximo passo é inserir o código que irá transformar o timestamp em um objeto data e injetar a data formatada. Para que seja possível injetar facilmente a data formatada no código do seu blog, será preciso definir o atributo id do tag onde o timestamp está inserido. No caso do meu template, o timestamp é exibido dentro de um tag abbr, que é o tag utilizado para abreviações, então, eu atribui um id único a este tag. Abaixo, veja o código antes da alteração.
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'>
<abbr expr:id='"dataPostagemDisplay_" + data:post.id' class='date' title=''><data:post.timestamp/></abbr>
</a>
</b:if>
</b:if>
Agora o código depois da alteração e em seguida a explicação
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<script type="text/javascript">
$().ready(function() {
var dataPostagem = new Date(
getDateFromFormat("<data:post.timestamp/>", "M/d/yyyy hh:mm:ss a"));
var formatoExibicao = formatDate(dataPostagem, "yyyy, dd")
+ " de " + formatDate(dataPostagem, "MMM")
+ " às " + formatDate(dataPostagem, "HH:mm");
var formatoUTC = formatDate(dataPostagem, "yyyy-MM-dd")
+ "T" + formatDate(dataPostagem, "HH:mm:ss")
+ "-0300";
$("#dataPostagemDisplay_<data:post.id/>").html(formatoExibicao);
$("#dataPostagemDisplay_<data:post.id/>").attr("title", formatoUTC);
});
</script>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'>
<abbr expr:id='"dataPostagemDisplay_" + data:post.id' class='date' title=''></abbr>
</a>
</b:if>
</b:if>
Primeiro eu removi o tag <data:post.timestamp> do tag abbr. Em seguida eu atribui ao tag um id gerado utilizando o identificador da postagem que é único. Por fim inseri o tag <script> logo acima do tag <a> com o código que faz o processo de formatação e injeção da data.
Vamos analisar o código acima.
- Na linha 04 eu criei uma função que será executada pelo jQuery assim que a página estiver carregada completamente. Por isso, enquanto sua página estiver carregando você não verá a data da postagem.
- Na linha 05 eu transformo a data fornecida pelo widget em um objeto javascript do tipo Date usando a função getDateFromFormat que recebe como primeiro parâmetro uma string com a data e como segundo parâmetro uma string com o formato da data. Note que o tag
<data:post.timestamp> foi transferido para cá. Se você escolheu o mesmo formato de data que eu, conforme mostrado na figura da página de configuração do widget Blog, pode utilizar a mesma string de formatação.
- Na linha 08 eu criei a variável formatoExibicao que é uma string formada pela concatenação de outras strings estaticas e strings geradas pela função formatDate que recebe como primeiro parâmetro um objeto do tipo data e como segundo parâmetro uma string com o formato desejado. Para aqueles que têm conhecimento de Java, os formatos aceitos por estas funções são bem parecidos com os da classe SimpleDateFormat, entretanto, não existe um caracter de escape que permita fazer com que a função ignore um determinado caracter que representa um formato. Por isso foram usadas funções separadas para cada parte da data, caso contrário, a função interpretaria o "d" do trecho "de" e o "s" do trecho "às" como formatação da data. Esta variável será utilizada para injetar a data no formato que queremos exibir.
- Na linha 12 eu criei a variável formatoUTC que será utilizada para definir o atributo title do tag abbr utilizado para exibir a data.
- Nas linhas 16 e 17 eu injeto a data formatada no tag abbr e defino o titulo do tag com a data no formato UTC respectivamente utilizando o jQuery. Nessas linhas eu utilizo o id gerado para o tag abbr. O id é a combinação da palavra dataPostagemDisplay_ e o identificador da postagem. Note que eu utilizei o tag
<data:post.id/> para obter esse id.
- Na linha 21 eu defino o id do tag abbr utilizando a expressão
expr:id='"dataPostagemDisplay_" + data:post.id'
Entendendo o código de formatação das funções de manipulação de data
O formato da data deve ser definido através de uma string que contém os códigos que representam seu formato. Cada código (letra) representa uma parte da data (dia, mês, ano, etc). A capitalização é importante, ou seja, M(mês) é diferente m(minuto). As representações, geralmente, possuem uma forma completa, que produz a representação integral da parte da data e uma forma abreviada que produz variações. Lembrando que o formato da data é utilizado tanto para formatar a data como para converter uma string em data, então, a descrição do código indica tanto o que ele gera quanto o que ele converte. Os formatos de partes númericas como hora, por exemplo, quando fixados em 2 digitos adicionam o zero (ou requerem no caso da conversão) antes dos valores menores que 10.
Tabela de formatos disponíveis (Baseada na documentação do código de Matt Kruse)
| Parte da data |
Forma completa |
Forma abreviada |
| Ano |
yyyy (4 digitos) |
yy (2 digitos), y (2 ou 4 digitos) |
| Mês |
MMM (nome ou abreviação) |
MM (2 digitos), M (1 ou 2 digitos) |
| NNN (abreviação) |
|
| Dia do Mês |
dd (2 digitos) |
d (1 ou 2 digitos) |
| Dia da Semana |
EE (nome) |
E (abreviação) |
| Hora em AM/PM (1 à 12) |
hh (2 digitos) |
h (1 ou 2 digitos) |
| Hora do dia (0 à 23) |
HH (2 digitos) |
H (1 ou 2 digitos) |
| Hora em AM/PM (0 à 11) |
KK (2 digitos) |
K (1 ou 2 digitos) |
| Hora do dia (1 à 24) |
kk (2 digitos) |
k (1 ou 2 digitos) |
| Minuto |
mm (2 digitos) |
m (1 ou 2 digitos) |
| Segundo |
ss (2 digitos) |
s (1 ou 2 digitos) |
| Simbolo AM/PM |
a |
|
Exemplos
O código d MMM, y aceita qualquer uma das seguintes datas:
- 01 Abril, 2008
- 1 Abril, 2008
- 01 Abr, 2008
- 01 Abr, 08
- 1 Abr, 08
Já o código dd MMM, yyyy só aceitaria as seguintes datas:
- 01 Abril, 2008
- 01 Abr, 2008
Na hora da formatação, a data utilizada no exemplo, usando o código d MMM y resultaria em 1 Abril, 2008. Note a diferença entra a formatação e a conversão. Na conversão um mesmo formato pode aceitar variações enquanto na formatação o resultado será sempre o mesmo.
O que você achou dessa postagem?
