Step by step instructions to Add Time ago Format In Blogger Post Date

Step by step instructions to Add Time ago Format In Blogger Post Date

Step by step instructions to Add Time ago Format In Blogger Post Date

You may see "a second prior" or "2 moments ago..." in long-range informal communication sites particularly twitter and Facebook. This speaks to the time in timestamps which was posted previously (a specific time) rather than demonstrating full date like 17/08/2013 10:45 pm.

At the point when you post an article, it will show the minutes back, so the peruser can comprehend that your post was distributed minimally before. Precisely blogger doesn't have this element (time ago group), however, the blogger provides time with date, name of the month, and so on.

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.

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 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. Maybe you couldn't find exact below code in your template because different custom blogger template provider uses 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 a 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 showing time ago on the main page only. Not on post page. Post your feedback about this plugin in the comment.
ALL CREDIT: OnlinePcTrick
    Previous Post
    Next Post

    post written by:

    I am a web designer and developer. Sharing knowledge is my passion and web designing is my interest but it is not bigger than my interest in Islam.

    0 Comments: