How to install TimeAgo jQuery plugin on Blogger?

I have recently stumbled upon a great jQuery plugin which allows you to display date-stamps in an appealing style. Guess what? It's the same fuzzy date format that we often see on comments section like 'Commented 2 minutes ago' or 'Updated 3 days ago' etc. While this was available for free, I kept wondering how to install TimeAgo jQuery plugin on Blogger?


Being one of a jQuery plugin, it was not that difficult to integrate it with blogger. Infact, this particular plugin was even easier to setup than any other similar script. We just need to add the jQuery library (if not already available), add TimeAgo script and use appropriate class to get the desired result.

Let me guide you in a step-by-step approach. First go to Edit HTML section of your Blogger Blog and search for </head>. Now paste the following line of code just before the closing head tag.

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

Now, remember that if you are already using jQuery plugins, you most probably also have the jQuery library installed. In that case, you do not need to add Line 1 of the code snippet above.

Now, find the code that renders the date/time stamp on your blogger blog. Here, you will actually be looking for the following line on your blogger template.

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

You have to replace the above line with the following code snippet.

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

Now, save the template and Voila! Your date-stamp is now converted into TimeAgo format.

Do try this TimeAgo Blogger Plugin on your blog and don't forget to share your feedback about this awesome Blogger Widget by commenting below.