How to add timeago format in blogger

You might have seen time ago notification on different kinds of social media sites. If you want to implement this time ago format in blogger blogs then this article is for you. In this article, we will see how we can add time ago notification format in our blogger blog in just simple and easy steps.

I have recently got a comment from one of the visitors that he wants to add time ago notification format into their blogger site.

To add this time ago notification format in blogger blog you need to have some knowledge about blogger XML Tags and a little bit of information about web design, especially HTML and JavaScript languages.

You need to have a little bit of information about web design because here we have to find some certain things that we have to find and replace with some new things.
These are not the things these are lines of codes.

Ok now let's figure out the steps to add this time ago format in our blogger blog. You can also add this post published time format in WordPress website if you want the technique is not different.

First of all, If you want to see the demo of this time ago format just scroll up and see that when this post was published. You will see that post publish time will be converted into how much time this post was posted I mean that you will see 1 day ago, 2 days ago, 3 months ago, 5 months ago and so on.

Here we will be using our jQuery plugin to add this time ago format. I have transformed the code in such a way that this plugin will not affect the time and size of your webpage.

This plugin reads timestamps which are given as input in the format of the date, month and year or any other date format and converts that into time ago format.

Now just follow these steps to add this time ago notification format in blogger or WordPress site.

Steps to add posted time-ago in blogger:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Now Search for <data:post.date/> or <data:post.dateHeader/>.
   

   To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

4. Now replace the code which we have found in step 4 with the code provided below.
   

   <b:tag name='span' class='timeago'>
   <data:post.date/>
   </b:tag>

5. Now Search for </body> and paste the code code provided below just above </body> tag.
   

   <script>//<![CDATA[
   jQuery.cachedScript=function(e,c){return c=$.extend(c||{},{dataType:"script",cache:!0,url:e}),jQuery.ajax(c)};
   $.when($.cachedScript("https://timeago.yarp.com/jquery.timeago.js"), $.Deferred(function (e) {
       $(e.resolve)
   })).done(function () {
       $("span.timeago").timeago();
   }).fail(function (e, o, c) {
       alert("Error Occured Whils loading Files")
   })//]]></script>

6. 
   

   To run the above code you need to add jQuery Library or plugin if your blog does not already have it. To add it just copy the code provided below and add it just above </head> tag.
   

   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

7. Save Theme/Template.

So read the steps that are provided above carefully and do as it is said. The steps provided above are for blogger blog but the codes will be the same if you want to add this format in the WordPress website.

Conclusion:

That's all about how to add time ago format in the blogger blog. If you face any difficulty finding any code or something else let me know in the comment section I will help you as soon as possible.