Tutorials, tips and tricks about Blogger

The page load time is one of the most important things for a better user experience. Additionally Google has said this is one of the elements to consider for its positioning.

load-time

An even funny way to know the page load time is Which Loads Faster? where you can put your own site to compete against others or compare as many repeats as you want.

Pretty recommended is using its Speed Page or Speed Tracer extension to evaluate and decrease the page load time.

I dare you beat BTemplates or our spanish site Blog and Web. πŸ˜›

I think it’s always interesting give our buttons an animation effect. As in this tutorial, the RSS subscription button.

This time we will make an exercise to create a small character from the paper, through Adobe Illustrator, to its implementation on HTML and CSS. At the bottom of the page we leave a file with the images and the code for you, so you can implement it on your web if you want. (See demo)

Vectors and picture

Vectors have great advantages and latest versions of Illustrator are amazing, our designs will be more than colored spots.

I won’t deny the fact that knowing some drawing basics is helpful, but definitely the web is a summary with images to take ideas from, to see different techniques. To begin on making our projects, drawing helps, but good ideas are always better.

From sketch to Illustrator

Let’s begin sketching our character. This will help us to have an clearer idea on how to start. As I said before, you can take ideas from images you have seen before and you think they are interesting.

sketch-to-Illustrator-1

Read more →

There isn’t too much to explain when I thought on make this icon pack. Many of us were marked by the Converse in our generation, icons of youth, rebelliousness, and in some cases, objects that passed through three generations. I really like these sneakers, so I wanted pay homage. Why not a social pack? It consists of icons for RSS, Share This, Twitter, Digg and Delicious, in three different sizes and in PNG24 format.

converse-social-icons

Download

Download Converse Social Icons.

License

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.

design-disease-blogger-template

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 →

Tutorials, tips and tricks about Blogger