How to add estimated reading time to Blogger post

A good way of motivating your audience to read your articles is by adding the estimated reading time. It is pretty easy for WordPress users as most templates come with this feature. But what about Blogger?

Here on this post, we will walk you through the steps on how to add estimated reading time to Blogger post pages. So, if you've been looking for a way to achieve this with prevail, this guide is all you need.

Estimated reading time for a post -The advantages

You may be wondering of what use this could be. And as we said earlier, this feature will help your audience know exactly the time he or she will need to go through an article on your blog.

This could help build trust and encourage user's engagement and consequentially reduce bounce rate.

So, the estimated reading time feature added to your Blogger blog will help;

1. To gain trust.
2. To reduce bounce rate.
3. To increase users engagement.
4. Make your blog look more professional.
5. Give it a WordPress-like look and feel.

Estimated reading time for Blogger

The estimated read time for the same article varies from person to person. And it will be cumbersome to always have to add this feature to every single post manually. So, this plugin is made taking into consideration the time an average person will take to read a certain number of words.

By using jQuery, if we assume an average person can read 300 Word for say, in 1 minute one can automatically deduce the estimated reading time for a post made of more than 300 words.

Adding the feature to blogger

The key to this Blogger widget or plugin is jQuery. So, your template will need to have jQuery installed. If not, get the simple code from below and add to your blog template code before the closing head tag ( before </head> ) by going to Theme > Edit HTM.

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

Next, you will need to add the Widget/plugin script to your Blogger template.

• Go to theme > edit HTM and once in your theme code editor, search for </body> and paste the following code just before 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>

• Now, you will have to add find a proper position where the estimated reading time will be displayed. In most Blogger templates, you can display the estimated reading time by adding the following code just below this line of code <div class='post-header-line-1'>.

<span id="etawrap" class="eta"/>

In our case with the Fletro theme, we have it added at the top just beside the comment counter. The best way will, therefore, be for you to inspect your theme and chose the appropriate position.

So, to apply yours exactly like the one we have on our blog with the Fletro Pro theme, search for the tag  <div class='info-right'> and above it, locate the first </span> tag and add the following code

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<!-- all index pages -->
 | <span style='font-weight:bold'>  Estimated Reading Time: </span><span class='eta' id='etawrap'/>
</b:if>

• And finally, to customize the estimated reading time, search for the   </b:skin> tag and add the following code just before it.

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

• Next, save your theme and there you go!