Tutorials, tips and tricks about 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: 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;;}}
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).

Elena, a great romanian designer and creator of Design Disease and Premium Themes, has updated the design of her website and was kind enough to release her previous and awesome design. The name of the theme for WordPress could not be other than Design Disease and now converted to Blogger template by Blog and Web.

Features

• 3 Columns.
• Menu with static pages.
• Color Settings from the panel.
• Comments in the footer completely adapted.
• Form on the same page and great support for avatars.

Download

Read more →

Blogging Cloud is a Blog and Web and BTemplates design, available as Blogger template and WordPress theme.

Features

• Two main columns, but sidebar with one or two columns.
• Three areas for gadgets / widgets.
• Twitter status box.
• Menu with static pages.
• Social Bookmarks on individual pages.
• Typography Lacuna Regular in titles (with javascript).
• Color Settings from the panel.
• Not compatible with the new Template designer.
• Borders rounded with images (compatible with IE).

Download

Read more →

BTemplatr is a blogger template designed by Blog and Web and BTemplates exclusively for Blogger users.

Features:

• Two main columns, but sidebar with one or two columns
• Footer with three columns.
• 6 areas for gadgets / widgets.
• Menu with static pages.
• Menu with social services.
• Social Bookmarks on individual pages.
• Short URL’s (bit.ly) on individual pages.
• Typography Aller in titles (with javascript).
• Section Banner 125×125.
• Color Settings from the panel.

Download

Read more →

Social LEGO is an free icon package very stylish geek. Are 14 LEGO style icons with the most used social services, created by the designer Ulises Arbizu and Blog and Web.

Services included: Twitter, Facebook, RSS, Tumblr, Friendfeed, LastFM, Sharethis, LinkedIn, Technorati, Digg, Vimeo, Qik, Behance y Reddit.

Download

Download: Social LEGO Icons.

Formats

All the icons are PNG24 format in three sizes: 32×26, 64×51 and 100×80. As a curiosity, with an image editor, the icons can be assembled vertically like real LEGO’s.

Lisence

• Released under Creative Commons 2.5 license.
• For commercial and personal use (Not for sale).