Blogger Hacks: Increase User Engagement with Estimated Reading Time

As a blogger, one of your primary goals is to engage your readers and encourage them to stay on your blog for longer periods. One effective way to achieve this is by providing estimated post reading time for each of your blog posts. Estimated reading time informs your readers about the approximate time it will take to read the entire article. In this blog, we will show you how to easily add estimated post reading time automatically on every Blogger post of your blog.

Why Add Estimated Post Reading Time?

Estimated post reading time offers several benefits that can significantly improve user engagement and website conversions: Encourages Readers: By knowing that the article will only take a few minutes to read, readers are more likely to continue reading the entire post, reducing bounce rates.
Informed Decision-making: Readers can decide whether to read the article immediately or bookmark it for later, based on the estimated reading time.
Boosts User Engagement: Engaged readers are more likely to explore other articles on your blog and interact with your content.

Adding Estimated Post Reading Time in Blogger

To add estimated post reading time to your Blogger posts, follow these simple steps: 

Add jQuery File to Blogger: 

Go to Theme » Edit HTML.

Look for </head> and add the following code just above it:


<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>
 

Adding Javascript Code: 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; // Set the average reading speed in WPM (words per minute)

var counted = count / avg;

var maincount = Math.round(counted);

document.getElementById('rdTime').innerHTML = maincount + ' min read';

//]]>

</script>
 

Finding the Proper Position for the Reading Time Display: Locate where to display the reading time. Consider adding it just below the post title or anywhere that suits your template. For example:


<span class='pRd pIn info'><bdi id='rdTime'/>

Customizing the Reading Time Display: To increase users' attention, you can customize the appearance of the reading time. Add the following CSS code just above ]]></b:skin>:


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

Save Your Template:Save your template to apply the changes.

Congratulations! You have successfully added estimated post reading time to your Blogger posts.

How to Calculate Reading Time?

To calculate the estimated reading time for a blog post, we need to determine the number of words in the post and divide that number by the average reading speed set for your website users. For instance, adults read approximately 200-300 words per minute (WPM).

Conclusion

By providing estimated post reading time on your Blogger blog, you can engage readers and encourage them to explore more of your content. This simple addition can significantly improve user engagement and increase website conversions. Now that you know how to add estimated reading time to your posts, implement it on your blog and enhance the overall user experience. Happy blogging!