Tutorials, tips and tricks about Blogger

22 Oct

Friendlier Dates on Blogger

6 Comments | by in Tips and Tricks, Tutorials | 2010

Español Português

It’s friendlier to interpret relative dates or the time passed between two dates (i. e. Posted 2 days ago) rather than an actual date. This kind of dates is often used by services like Twitter or Facebook (see demo).

You can also easily create this kind of dates on Blogger by adding two javascripts to the template.

Friendlier Dates on Blogger

1. Go to the template code editor (Dashboard → Design → Edit HTML → Expand Widget Templates) and search for this code:


And then add the following script after it:

<script type='text/javascript'>
/* Friendlier Dates on Blogger: http://blog.btemplates.com/209 */
function timeAgo(date1,date2,granularity){var self=this;periods=[];periods[&#39;week&#39;]=604800;periods[&#39;day&#39;]=86400;periods[&#39;hour&#39;]=3600;if(!granularity){granularity=5;}
(typeof(date1)==&#39;string&#39;)?date1=new Date(date1).getTime()/1000:date1=new Date().getTime()/1000;(typeof(date2)==&#39;string&#39;)?date2=new Date(date2).getTime()/1000:date2=new Date().getTime()/1000;if(date1&gt;date2){difference=date1-date2;}else{difference=date2-date1;}
output=&#39;&#39;;for(var period in periods){var value=periods[period];if(difference&gt;=value){time=Math.floor(difference/value);difference%=value;output=output+time+&#39; &#39;;if(time&gt;1){output=output+period+&#39;s &#39;;}else{output=output+period+&#39; &#39;;}}
return output + &#39; ago.&#39;;}

2. Now search for this:


Notice: make sure that "Expand Widget Templates" is checked; otherwise you won’t find the code.

And replace it with:

<script type='text/javascript'>document.write(timeAgo(&#39;<data:post.dateHeader/>&#39;));</script>

3. The last step is to change the date format so it can be compatible with the scripts. Go to Dashboard → Settings → Formatting → Date Header Format and change the date format to the type 7/18/2010 (the sixth one from top to bottom). Save the settings.

Done! You can see the result on our demo.

Script to get the time passed between two dates

This useful javascript function can be used in any other development. It requires two dates or one as parameters. If two dates are given, it will calculate the time between them; if it’s one date, it will calculate the time passed to current date.

function timeAgo(date1, date2, granularity){

	var self = this;

	periods = [];
	periods['week'] = 604800;
	periods['day'] = 86400;
	periods['hour'] = 3600;
	periods['minute'] = 60;
	periods['second'] = 1;

		granularity = 5;

	(typeof(date1) == 'string') ? date1 = new Date(date1).getTime() / 1000 : date1 = new Date().getTime() / 1000;
	(typeof(date2) == 'string') ? date2 = new Date(date2).getTime() / 1000 : date2 = new Date().getTime() / 1000;

	if(date1 > date2){
		difference = date1 - date2;
		difference = date2 - date1;

	output = '';

	for(var period in periods){
		var value = periods[period];

		if(difference >= value){
			time = Math.floor(difference / value);
			difference %= value;

			output = output +  time + ' ';

			if(time > 1){
				output = output + period + 's ';
				output = output + period + ' ';

		if(granularity == 0){

	return output + ' ago.';

Notice: The above function for Blogger has been compressed to load faster.

You can also find the PHP version on the article "Friendlier Dates on WordPress" (spanish).


6 Comments, leave a reply · Feed
  1. interesting…by the way, script can be add with use…


    so we do not have for encode it…sorry my bad english ;))

  2. hehehe…heres… 😀

    <script type=’text/javascript’>

    your content javascript


  3. Francisco October 25, 2010

    :O I did’t know that. Thanks! 🙂

    Don’t worry for your english, mine is worse 😛

  4. I followed steps 1, 2 and 3 and did well but got no change though, do you know what the problem is? its frustating after looking for those codes for 30 mins and when you finally think you got it you got nothing 🙁

  5. Novriyandie January 24, 2011

    Hi, I wanted to ask. How do I set the time of Indonesia? Since the last post 2 hours to 14 hours ago

  6. ok. so i’ve done all the steps above and i got a pretty strange thing. instead of telling how much time passed since posting, it says how much time passed since the 00:00 PM of the day i posted ( 00 PM in my gmt zone). is complicated so i’ll exemplify.
    i posted something today at 22 pm. after an hour the date header will tell me ‘posted 23 hours ago’.
    please tell me how to fix this 🙂


You must be logged in to post a comment.

Tutorials, tips and tricks about Blogger