How to Add Estimated Post Reading Time Automatically on Every Blogger Post?

 An estimated reading time encourages users to read through to the end of a post, since they know how much time it'll take. It can help to keep readers on your blog and boost engagement overall.

In this article, we'll show you how to easily add estimated post reading time automatically on every blogger post of our blogger blog?

Why Add Estimated Post Reading Time on your Posts?

Estimated post reading time encourages users by telling them that it will only take a few minutes of their time to read this article.

If you are an avid reader, I’m sure you’ve seen blog posts that show an estimated reading time. Knowing how long it takes to read an article encourages your website visitor to stick around. This helps to build your user engagement and increase your website conversions.

I find having a reading time helps me decide if I should read the article right away or bookmark it for another time. That being said, let’s take a look at how to easily display estimated post reading time on your blogger blog post.

Adding Estimated Post Reading Time in blogger

The easiest way to add estimated post reading time is by using some jquery plugin, javascript and html. It help you show the reading time on your blogger blog.

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') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>

Note: You must have implement jquery plugin.

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

<script type='text/javascript'>
//<![CDATA[
// Estimated Reading Time
function get_text(el) {ret = ''; var length = el.childNodes.length; for(var i = 0; i < length; i++) {var node = el.childNodes[i]; if(node.nodeType != 8) {ret += node.nodeType != 1 ? node.nodeValue : get_text(node);} } return ret;} var words = get_text(document.getElementById('post-body')); var count = words.split(' ').length; var avg = 200; var counted = count / avg; var maincount = Math.round(counted); document.getElementById('rdTime').innerHTML = maincount + ' min read';
//]]>
</script>

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 class='pRd pIn info'><bdi id='rdTime'/>

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.

#pRd{font-weight:bold;color:#FF0000;}

Now Save your template.

Done! I hope you can display estimated post reading time in your blogger posts now.

How to calculate reading time?

According to the Free Reading Test, adults read about 200-300 words per minute(WPM). To get an estimated reading time for the blog post, we need to first find out the number of words in our blog post. Then divide that number by the WPM we set for our website users.