331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

Please enter at least 3 characters.

How to Display Estimated Post Reading Time in Blogger Posts?

You might know about Medium? Do you love estimated reading time widget shown there? If yes, here is a complete guide on how to add and display estimated post reading time in blogger posts?
How to Display Estimated Post Reading Time in Blogger Posts?
Display estimated post reading time in blogger posts

 
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.

Please note: An updated version available that enables you to show reading time on Homepage of blogger too. And it is made of pure Javascript: Add Estimated Reading time in blogger homepage and posts - pure javascript


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:

Share this post

Explore more articles by Aman Bhattarai

18 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. Thank You So Much
  2. nice guide, thanks
  3. Thanks a ton for the Swift reply,. You mean the 4th step right,. I rechecked and it's there css code right,. Pls advise
    1. I was referring to Step 3.
  4. sir i tried with all the steps properly updated successbut still the time not showing in my blogger, kindly assist myblog www.muyarchisei.in many thanks
    1. @Shivam, You have not added the HTML code - the last part of article.
    2. Sir how to add email subscription box like yours in each blog post
    3. Sure, I can share the code, do contact me :)
  5. Hi Invictus! This is something I've been looking for! Thank you for sharing this. But, I've a question though.

    In my case, the reading time in the post page are working very well. But in the homepage, the reading time are not the same, it says 1 mins while in the post page it says 3 mins. Maybe because there is a snippet so it only read what's displayed?

    How do I fix this?

    Again, thank you for sharing this! I very much looking forward for your help.
    1. Sorry there's no solution to show accurate reading time on homepage.
  6. It's displaying correctly on the post page, but in the home page, it's taking the snippet text to calculate the required time, so all the posts on the home page are showing '1 mins.'
    Is there a tweak to get through this?
    1. @VKBoy, currently the plugin only works for post pages. I will update the article if there's some solution to that.
  7. Nice article. Was able to add this to my new blog. 😊
    1. Glad it worked :)
  8. Does it works for blogger new template?
    1. Yes, it does :)
  9. I have done everithing but reading time does not display. Please help.
    1. Make sure you have JQuery installed
Post a Comment