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.
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> 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() {
$('.post-body').readingTime();
});
</script>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: