How To Add Timeago Format In Blogger Post Date

You might seen "a second ago" or "2 minute ago..." in social networking site especially twitter and Facebook. This represent the time in timestamps which was posted before (a certain time) instead of showing full date like 17/08/2013 10:45 pm.

When you post an article, it will display the minutes ago, so reader can understand that your post was published little earlier. Exactly blogger doesn't have this feature (timeago format), but blogger does provide time with date, name of month etc.

Today I'm going to show you how to add timeago time format in blogger. This timeago script will display the second, minutes, hours, days and years (ago) instead of full date. It automatically update the timestamps. This plugin was developed by Ryan McGeary of Yarp. Here I have converted that code for blogger platform to easily implement in blog.

Live Demo: please go to main page of this blog and check below each post box.

For example: few other timeago plugin show "1 minute ago" even though the page was opened 10 minutes ago. Unlike this plugin update the timestamps automatically without refreshing the webpage. Just do the the following steps to add timeago in blogger.

1. Go to blogger > Template > Edit HTML.
2. Find  </head> tag and add the following code before it.

<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src='http://timeago.yarp.com/jquery.timeago.js'></script>
<script>
    jQuery(document).ready(function($){
     $("abbr.timeago").timeago()

    });
    </script>

[optional: Remove the code in line #1 if you have already implemented jQuery in your blog
3. Now find code similar to below code. May be you couldn't find exact below code in your template because different custom blogger template provider use their own mark up for the timestamps. So you have to post your blog URL in comment below, then I can give you the exact code that you want to find in your blog.

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

4. Replace above code with following code

<abbr class="timeago" expr:title="data:post.timestampISO8601"><data:post.dateHeader/></abbr>

5. Now Save your template. That's all

Please provide your blog url in comment if you can't find the code in 3rd step. Now your blog can display minutes ago as well. Instead of showing the date. But I recommend to show timeago in main page only. Not in post page. Post your feedback about this plugin in comment.

SHARE

Tweet