Add Estimated Post Reading Time Automatically on Every Blogger Post
Including an estimated reading time serves as an inviting nudge for readers, enticing them to embark on a journey through your entire post with the knowledge of how much time it will consume. This simple addition can effectively retain visitors to your blog and contribute to enhancing overall engagement.
In this article, we will guide you through the seamless process of automatically incorporating estimated post-reading times into every blog post on your Blogger platform.
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.
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 helps 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 the following piece of code just above it. Do not forget to back up 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>2. Adding Javascript Code -
Once you're done adding the file, the 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 the 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 a 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 the following CSS code just above it.
Done! I hope you can display the estimated post-reading time in your blogger posts now.
#pRd{font-weight:bold;color:#FF0000;}Done! I hope you can display the estimated post-reading time in your blogger posts now.