MyBloggerTricks Read Time widget in left floating social share


#1

Hello everyone,

I’m sure you know what I’m talking about by reading the title of this topic. If this is a duplicate content on this forum then excuse me. So far, I’ve not seen anyone talking about this.

Cut the story short. One day, I was browsing mybloggertricks as usual and I found that a new feature has been implemented on the blog. It is the read time function.

The read time increases reader engagement by 10-15%. When a reader is reading your content, he/she doesn’t know how much time it will take to read the article, especially if the article is a long one.

The Read Time functionality is available on many blogs which, of course, can’t be listed here. But I can show some examples here through screenshots I took from online blogs.

  1. Medium

The below screenshot is from an article on the website.

2.Michael Lynch Github Article Demo

The below screenshot is from a demo article created by Michael Lynch, a Github user who created the function using Javascript

  1. MyBloggerTricks

The below screenshot is from an article on MyBloggerTricks

I hope you understand what I mean now.

Please enlighten me on this @Nafees @Mohammad @Nitishk @Shivansh

Thanks.


#2

This is the code I’m using for my blog:

<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="min"}else{if(b=="fr"){var m=l||"Moins d'une minute";var q="min"}else{if(b=="de"){var m=l||"Weniger als eine Minute";var q="min"}else{if(b=="es"){var m=l||"Menos de un minuto";var q="min"}else{if(b=="nl"){var m=l||"Minder dan een minuut";var q="min"}else{var m=l||"Less than a minute";var q="min"}}}}}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>

Now add this part to the opening or closing of post body in Blogger template editor:

<a href='#!' title='Reading Time'><span class='eta'></span></a></span>

Thanks :slight_smile:


#3

Thank you for your response @Nitishk. Appreciated that you responded promptly. I checked your blog and I started following it :wink: