Friendlier Dates on Blogger

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:

]]></b:skin>

And then add the following script after it:

<script type='text/javascript'>
/* Friendlier Dates on Blogger: https://btemplates.com/blog/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;;}}
granularity--;if(granularity==0){break;}}
return output + &#39; ago.&#39;;}
$(document).ready(function(){});
</script>

2. Now search for this:

<data:post.dateHeader/>

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;

	if(!granularity){
		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;
	}else{
		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 ';
			}else{
				output = output + period + ' ';
			}
		}

		granularity--;
		if(granularity == 0){
			break;
		}
	}

	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).