How to Display Article Read Time in Blogger

You may have seen on many websites that article read time is shown before or after a post so that users will know how much time it will take to read that article.

This thing is going very much popular most of the popular websites use this thing to make their visitors read that article. Today in this article I will tell you how you can display articles or post read time in blogger you can also follow the same steps to add this functionality in WordPress.

I will not provide you the steps for adding this functionality because I don't know where you want to add this functionality you can make a new widget in the blogger layout section and add the code provided below in that widget.

This function will show up how much time is required to read your article.

So this is the code that you have to copy and use to show real-time. I haven't customized if you will have to do it yourself or if you can't you can comment below I will help you to do that.

We can add this functionality using javascript. The code provided below is not pure javascript it is jquery code so to run this code you will need the jquery library included on your website.

Code:

<script>
    ;(function(a){a.fn.readingTime=function(r){if(!this.length){return this}var h={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:true,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null};var i=this;var c=a(this);i.settings=a.extend({},h,r);var e=i.settings.readingTimeTarget;var d=i.settings.wordCountTarget;var k=i.settings.wordsPerMinute;var p=i.settings.round;var b=i.settings.lang;var l=i.settings.lessThanAMinuteString;var o=i.settings.prependTimeString;var f=i.settings.prependWordString;var g=i.settings.remotePath;var n=i.settings.remoteTarget;if(b=="it"){var m=l||"Meno di un minuto";var q="min"}else{if(b=="fr"){var m=l||"Moins d'une minute";var q="min"}else{if(b=="de"){var m=l||"Weniger als eine Minute";var q="min"}else{if(b=="es"){var m=l||"Menos de un minuto";var q="min"}else{if(b=="nl"){var m=l||"Minder dan een minuut";var q="min"}else{var m=l||"Less than a minute";var q="min"}}}}}var j=function(y){var v=y.trim().split(/\s+/g).length;var u=k/60;var s=v/u;if(p===true){var x=Math.round(s/60)}else{var x=Math.floor(s/60)}var w=Math.round(s-x*60);if(p===true){if(x>0){a(e).text(o+x+" "+q)}else{a(e).text(o+m)}}else{var t=x+":"+w;a(e).text(o+t)}if(d!==""&&d!==undefined){a(d).text(f+v)}};c.each(function(){if(g!=null&&n!=null){a.get(g,function(s){j(a("<div>
    ").html(s).find(n).text())})}else{j(c.text())}})}})(jQuery);
    $(function() {
      var element = $('.post-body');
    element.before("<span class='rt'><span class='eta'></span> read</span>");
    element.readingTime();
    });
</script>

Here in the above code, you can modify the highlighted text according to your requirements the replacement and description are provided below.

Replacement	Description
wordsPerMinute:270	Here you can replace 270 with the number of words that can be read by a normal person.
.post-body	This is a selector of that element of which you want to display read time by default in almost all blogger templates this is same but you can replace it with yours if your website has any other class.
read	You can replace this with the word that will be shown after the read time.

There are still many other things that can be modified you can do that if you have depth knowledge of javascript programming language.

This is a simple CSS style that I have created for this you can use it if you want.

<style>
    .rt {
        font-size: 20px;
        font-family: roboto;
        text-transform: capitalize;
        border: 1px solid #ccc;
        padding: 1px 10px;
        border-radius: 5px;
    }
</style>

That's it now if you want to see the real-time demo of this Article read time to shower you can see that.

View Demo

Conclusion:

Now after following this article you have added Article Read Time Shower Functionality in Blogger and now Article Read Time will be displayed in your blogger blog.

I think this article helped you a lot and if you want more articles about web design and other stuff you should follow up on this blog to get notifications.