You may have noticed notifications in the past on various social media platforms. This post is for you if you wish to use the time ago format in Blogger blogs. This post demonstrates how, in just a few easy steps, we can add a time ago notification format to our Blogger site.

I just received a comment from a visitor requesting the addition of a time ago notification format to their blogger site.

You need to be familiar with blogger XML Tags and a little bit of knowledge about web design, particularly HTML and JavaScript languages, in order to add this time ago notification format to a blogger blog.

You should be familiar with the basics of web design because we must locate certain items and replace them with new ones in this situation. These are lines of code rather than actual objects.

Let's now determine how to apply this time ago format to our blogger blog. If you desire, you can also add this post's published time format to your WordPress website; the method is the same.

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


    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>
  6. Save Theme/Template
Therefore, carefully read the instructions provided above and follow them. If you want to add this format to a WordPress website, the codes will be the same as those listed above since they are for a blogger blog.

Conclusion 

All of that pertains to adding the time ago format to a blogger blog. If you have trouble locating any codes or anything else, please let me know in the comment box and I will assist you as soon as I can.

Post a Comment

Previous Post Next Post