How to Display Article Read Time in Blogger
close
How to Display Article Read Time in Blogger

How to Display Article Read Time in Blogger

How to Display Article Read Time in Blogger

You may have seen on many websites that article read time is shown before or after post so that user 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 to read that article. Today in this article i will tell you how you can display article 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 of adding this functionality because i don't know where you want to add this functionality you can make a new widget in 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 which you have to copy and use to show read 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 jquery library included on you 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 is provided below.
ReplacementDescription
wordsPerMinute:270Here 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>

Thats it now if you want to see the real-time demo of this Article read time 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 you blogger blog.

I think this article helped you alot and if you want more articles about web design and other stuff you should follow up this blog to get notofications.
Disqus Codes

No comments

Notifications

Disqus Logo