How to Display Estimated Post Reading Time in Blogger Posts?

Last Updated on: 2019-10-13T12:35:53Z   /   Read
You might know about Medium.com? Have you noticed one of its cool feature? - Estimated Post Reading Time! An estimated reading time encourages users to read a blog post instead of carrying away. This time shows user engagement -- how long will it take to finish reading, builds loyalty, and reduces your bounce rate. In this article, we will show you how to easily add and display estimated post reading time in your blogger posts.
display estimated post reading time in blogger post

Should you add estimated post reading time to blogger?

This is a first question that hits the mind when we think of adding post reading time to blogger posts. A simple answer is - Yes. When we start a new blog, our target is to increase audiences who read our posts. However, it is also important to gain trust and increase user interactions in our blog. For that estimated Reading time for blogger posts can play an important role. In a nutshell, reading time feature helps
  • To gain trust.
  • To reduce bounce rate.
  • To increase users engagement.



How to Add Estimated Post Reading Time To Blogger?

The concept of estimated post reading time is very simple. Let’s assume that an average person reads 200 words per minute. So, the reading time of a 1400-words article will be the number of words divided by 200 (1400/200), which is 7 minutes. Of course, you don’t have to manually calculate the read time of all your articles. There is a simple jquery plugin that will do this job efficiently.

Step 1: Add JQuery file to Blogger

Most of you might have this file installed in your blogger template. If not, go to Theme > Edit HTML > Search for </head> and add this following piece of code just above it. Do not forget to backup your template.

<script type='text/javascript'>//<![CDATA[     if (typeof(jQuery) == 'undefined') {  //output the script (load it from google api)  document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}        //]]>        </script>
Note: This is a jquery plugin. It is a must to have this file.

Step 2: Adding JQuery Plugin to Blogger

Once you're done adding file, next step is very simple. We will add a script that displays estimated post reading time. Search for </body> and paste the following code above it.

<script type='text/javascript'> /*! Name: Reading Time Dependencies: jQuery Author: Michael Lynch Author URL: http://michaelynch.com Date Created: August 14, 2013 Date Updated: June 10, 2014 Licensed under the MIT license */ //<![CDATA[ ;(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="mins"}else{if(b=="fr"){var m=l||"Moins d'une minute";var q="mins"}else{if(b=="de"){var m=l||"Weniger als eine Minute";var q="mins"}else{if(b=="es"){var m=l||"Menos de un minuto";var q="mins"}else{if(b=="nl"){var m=l||"Minder dan een minuut";var q="mins"}else{var m=l||"< 1 Min";var q="mins"}}}}}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); //]]> </script> <script type='text/javascript'> $(function() { $(&#39;.post-body&#39;).readingTime(); }); </script>
Source code taken from Github.

Step 3: Finding proper position to call the function that displays post reading time

Now we need to locate where to show the reading time. In most cases, adding reading time feature just below the post title fits perfectly. Again, the location depends on your template. In my case, I added it just below <div class='post-header-line-1'> .
<span id="etawrap" class='eta'/>

Step 4:  Customizing the reading time display

The function call displays a plain text with reading time. You can customize it to increase users' attention. Search for ]]></b:skin> and paste following css code just above it.
#etawrap{font-weight:bold;color:#FF0000;}

Done! That was just copy and paste, right? And I hope you can display estimated post reading time in your blogger posts now. Before saying good bye, I have a quick question : Do you think it will increase users engagement and help in reducing bounce rate? Please let me know your thoughts in the comment section. Happy Blogging !

Here are a few hand-picked tutorials for you to read next:
Comment Policy: We love comments and appreciate the time that our readers spend to share ideas and give feedback. Thank you to everyone who comments at the TwistBlogg.com.

However, we also want our comments to be as useful as possible to all of our readers. While we keep 99% of comments, we will remove spam and irrelevant comments.

Note: We reserve the right to remove any comments from the site; please leave comments that are respectful and useful.