Uma das inspirações para o artigo republicado hoje foi porque entre as novidades que Blogger lançou em 2012, estava um novo estilo para os comentários: Os comentários aninhados.
Entretanto muita coisa mudou, nem sempre para melhor, e até o meu antigo blogue desapareceu junto com a personae que tinha na altura.
Ao retornar ao Blogger mais tarde, também eu alterei muita coisa na maneira como usava este espaço, como o mantinha e como interagia com o eventual leitor através do blogue, retirando até o script das datas relativas que é o tema central deste artigo embora ainda mantenha uma versão nas datas dos artigos na página inicial do blogue.
Resumindo e voltando ao assunto em republicação neste artigo, muita coisa do que escrevi na altura está hoje obsoleta, razão porque embora mantenha o texto original abaixo, resolvi rasurar algum conteúdo que já não faz sentido e nem interessa muito para o mais importante do artigo: Como colocar Datas Relativas no Blogue com jQuery.
Como a maior parte dos utilizadores da plataforma já notou, o Blogger implementou um novo sistema de comentários aninhados tipo fórum que tem dado muita dor de cabeça a quem gosta de personalizar tudo no blogue e não só. ~X
Desde o inicio, o novo sistema de comentários tem sido fértil em bugs e com várias falhas, o que fez com que muitos voltassem ao sistema antigo ou mudassem para o sistema em pop-up.
Para esses utilizadores, caso queiram voltar a ter um sistema de comentários tipo fórum mas sem os bugs do novo sistema, recomendo o artigo Comentarios anidados sin el nuevo código no excelente blogue do JMuir onde ele mostra uma maneira de obter o mesmo efeito com o sistema antigo, mas numa versão mais estável.
Eu ainda não testei mas pelo que vi no Vagabundia, parece-me uma boa alternativa. :D
No meu caso, ainda não desisti do novo sistema e tenho-me divertido a tentar domar a besta.
Que querem?
Gosto de desafios! =D
O que me traz ao assunto deste artigo, como corrigir a maneira como se apresenta a data em que os comentários são publicados.
Como sabem, um dos bugs do novo sistema é que a data e hora a que os comentários são publicados são apresentados na versão inglesa e isso nunca me agradou.
Ora quando criei este template, quis fazer com que nas páginas de arquivo e etc, a data aparecesse tipo "publicado há x dias", algo que consegui com um script criado por Dan Drinkard. :D
Basicamente, o que o script faz é transformar em texto quanto tempo passou desde a data existente.
NOTA: Este script necessita do jQuery para funcionar, por isso este deverá estar instalado no blogue!
Caso ainda não o tenhas no blogue, podes ler aqui Como colocar jQuery num blogue como o colocar.
Abaixo, está o script que traduzi para português e que utilizo aqui utilizei no Mocheco⊗Marafado:
<script type='text/javascript'>
//<![CDATA[
// DATAS RELATIVAS
/**
* jQ plugin adapted from 37s' relative date tool
* Takes the format of "Jan 15, 2007 15:45:00 GMT" and converts it to a relative time
* @see http://37signals.com/svn/posts/1557-javascript-makes-relative-times-compatible-with-caching
*/
(function($, window, undefined) {
$.fn.relativeDate = function(opts) {
var defaults = {
dateGetter: function(el) {
return $(el).text();
}
},
options = $.extend({}, defaults, opts),
time_ago_in_words_with_parsing = function(from) {
var date = new Date;
date.setTime(Date.parse(from));
return time_ago_in_words(date);
},
time_ago_in_words = function(from) {
return distance_of_time_in_words(new Date, from);
},
distance_of_time_in_words = function(to, from) {
var distance_in_seconds = ((to - from) / 1000);
var distance_in_minutes = Math.floor(distance_in_seconds / 60);
if (distance_in_minutes == 0) {
return 'há menos de um minuto';
}
if (distance_in_minutes == 1) {
return 'há um minuto';
}
if (distance_in_minutes < 45) {
return 'há ' + distance_in_minutes + ' minutos';
}
if (distance_in_minutes < 90) {
return 'há cerca de uma hora';
}
if (distance_in_minutes < 1440) {
return 'há cerca de ' + Math.round(distance_in_minutes / 60) + ' horas';
}
if (distance_in_minutes < 2880) {
return 'há um dia';
}
if (distance_in_minutes < 43200) {
return 'há ' + Math.floor(distance_in_minutes / 1440) + ' dias';
}
if (distance_in_minutes < 86400) {
return 'há cerca de um mês';
}
if (distance_in_minutes < 525960) {
return 'há ' + Math.floor(distance_in_minutes / 43200) + ' meses';
}
if (distance_in_minutes < 1051199) {
return 'há cerca de um ano';
}
return 'há mais de ' + Math.floor(distance_in_minutes / 525960) + ' anos';
}
return $(this).each(function() {
date_str = options.dateGetter(this);
$(this).html(time_ago_in_words_with_parsing(date_str));
});
};
})(jQuery, window);
//]]>
</script>
Não esquecer que para funcionar, devem ter a biblioteca jQuery instalada no blogue.
Podem ver neste artigo como colocar.
Depois basta copiar o código acima e colocar abaixo de onde está a chamada ao jQuery, mas recomendo que caso tenham outros scripts ou mesmo que não seja o caso, testem primeiro num blogue de testes pois a localização (abaixo ou acima) de outros scripts pode causar conflitos e fazer com que alguma coisa deixe de funcionar correctamente.
Agora vem a parte que me deu trabalho a descobrir, o script do Blogger que faz os comentários funcionarem e que faz com que a data apareça em versão inglesa também faz com que essa data apareça com oito horas de diferença da nossa aqui em Portugal.
Devido a esse bug, ao colocar a chamada que faz o script funcionar, devemos também colocar mais uma linha de código para acrescentar que a data está com oito horas a mais.
ACTUALIZAÇÃO Abril, 2012: O Blogger já corrigiu este bug na data dos comentários, assim este hack é desnecessário.
Embora ainda seja útil caso se deseje colocar Datas relativas,seja nos comentários seja em qualquer data presente no blogue.
Por exemplo, eu deixei de utilizar este truque nos comentários, mas continuo a usar na pagina inicial no resumo dos artigos. ;)
Aqui está o código para fazer a chamada da data relativa, completo com a linha extra ( $(".datetime a").append(" -0800") ), que faz com a data se apresente conforme a região. Ao implementarem este script, caso não tenham o vosso blogue em hora de Portugal, recomendo que testem primeiro sem a essa linha e depois de testarem como fica nos comentários, a acrescentem editada para o vosso fuso horário.
<script type='text/javascript'>
//<![CDATA[
$(".datetime a").append(" -0800")
$(".datetime a").relativeDate();
//]]>
</script>
Este código deve ser colocado ABAIXO de
<div id='comment-holder'> <data:post.commentHtml/> </div>
que encontram em Editar HTML, com Expandir modelos do widget marcado.
Aqui está o código para fazer a chamada da data relativa nos comentários do blogue:
<script type='text/javascript'>
//<![CDATA[
$(".datetime a").relativeDate();
//]]>
</script>
Este código deve ser colocado ACIMA de </body>.
.datetime a é a class referente à data nos comentários do Blogger, no caso de o desejarem colocar nas datas da página inicial devem alterar essa parte e colocar a class .timestamp-link time.
Podem substituir a class em questão no código caso desejem utilizar o script somente numa das opções OU colocar da seguinte maneira se quiserem utilizar o script em ambos os locais:
<script type='text/javascript'>
//<![CDATA[
$(".datetime a, .timestamp-link time").relativeDate();
//]]>
</script>
E é isso, salvem o modelo e vejam como ficou. ;)
Numa outra nota, o script para os emoticons que utilizo aqui também foi alterado e agora além de nos comentários, também mostra emoticons no elemento dos comentários recentes e nos artigos que escrevo.
Finalmente acabou de cada vez que quero colocar um emoticon num artigo, ter que que colocar uma imagem. =D
Ao colocar este novo script, tive que alterar alguns dos códigos dos emoticons porque os códigos antigos não funcionavam bem mas não acho que isso seja um grande problema. ;D
E por hoje é tudo. ;)
Até Breve. :-F
Comentários
Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.
Mas antes de comentarem, leiam as minhas Regras dos Comentários.
Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.
Enviar um comentário