Have you ever thought to show the accurate time of post reading on your blogger template? Do you know that we can show the blogspot post reading time on the page from how long the visitor is reading page or surfing your website or blog.Today we are here with This unique trick which is developed by Michael Lynch and customized by Bloggersstand.However displaying time of visitor on post is not so common and you have not seen this.With the help of this plugin the visitors we get to know how much time they are statying on your webpage or how much time they took to read your article.So Must try this trick and enhance the niche of your blogger website or blog.
This widget works with each and every blogger template version,for this widget you must have fontawesome stylesheet installed in your blogger template directory.We have used Javascript for this gadget and for styling some CSS.So to grab this tool/plugin follow the steps mentioned below.
How to install javascript to display the time of reading on blogger post
Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. First Search for <head> by Pressing Ctrl+F keys and Copy the below Font Awesome Icons stylesheet and paste it just below the <head> tag.
Step 3. First Search for <head> by Pressing Ctrl+F keys and Copy the below Font Awesome Icons stylesheet and paste it just below the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
If Font awesome Stylesheet is already installed in your blogger template,you can skip the above step.
Step 4. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 5. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
span.right {float: right; display: inline-block; padding: 3px 6px;}Step 6. Now Copy the below javascript code and paste it just above/before the closing </body> tag.
<script type='text/javascript'>Step 7. Now Copy the below HTML code and paste it inside your template where ever you want to display the post reading time,However ideal place for this widget is below the post title.To add below post title find this <span class='post-author vcard'> and copy the below HTML and paste it just before <span class='post-author vcard'>.
//<![CDATA[
// Reading Time Author: Michael Lynch http://michaelynch.com Licensed under the MIT license
// Customized By www.Bloggersstand.com
!function(e){e.fn.readingTime=function(n){var t={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:!0,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null,success:function(){},error:function(){}},i=this,r=e(this);i.settings=e.extend({},t,n);var a=i.settings;if(!this.length)return a.error.call(this),this;if("it"==a.lang)var s=a.lessThanAMinuteString||"Meno di un minuto",l="min";else if("fr"==a.lang)var s=a.lessThanAMinuteString||"Moins d'une minute",l="min";else if("de"==a.lang)var s=a.lessThanAMinuteString||"Weniger als eine Minute",l="min";else if("es"==a.lang)var s=a.lessThanAMinuteString||"Menos de un minuto",l="min";else if("nl"==a.lang)var s=a.lessThanAMinuteString||"Minder dan een minuut",l="min";else if("sk"==a.lang)var s=a.lessThanAMinuteString||"Menej než minútu",l="min";else if("cz"==a.lang)var s=a.lessThanAMinuteString||"Méně než minutu",l="min";else if("hu"==a.lang)var s=a.lessThanAMinuteString||"Kevesebb mint egy perc",l="perc";else var s=a.lessThanAMinuteString||"Less than a minute",l="min";var u=function(n){if(""!==n){var t=n.trim().split(/\s+/g).length,i=a.wordsPerMinute/60,r=t/i;if(a.round===!0)var u=Math.round(r/60);else var u=Math.floor(r/60);var g=Math.round(r-60*u);if(a.round===!0)u>0?e(a.readingTimeTarget).text(a.prependTimeString+u+" "+l):e(a.readingTimeTarget).text(a.prependTimeString+s);else{var o=u+":"+g;e(a.readingTimeTarget).text(a.prependTimeString+o)}""!==a.wordCountTarget&&void 0!==a.wordCountTarget&&e(a.wordCountTarget).text(a.prependWordString+t),a.success.call(this)}else a.error.call(this,"The element is empty.")};r.each(function(){null!=a.remotePath&&null!=a.remoteTarget?e.get(a.remotePath,function(n){u(e("<div>").html(n).find(a.remoteTarget).text())}):u(r.text())})}}(jQuery);
$(function(){$('.post-body').readingTime();});
//]]>
</script>
<span class='right'><i class='fa fa-clock-o'/> <span class='eta'/></span>Step 8. Save your template..Done !