How to Make Reading Time on Blogger

On this occasion I will discuss about Reading Time on blogger.

Reading time or reading time is a widget or we can call it a feature that we can use to find out the average time spent reading an article or post on the blog.

The estimated length of time to read this article or blog post is obtained from the calculation of the average number of visitors to your blog who have read the article.

Actually, installing reading time on this blog is not really important, because I’m making a new template and using the reading time feature, so I made this post, in case someone wants to add it to your blog.

If you are familiar with html, css, and javascript codes, maybe you can modify this reading time widget to suit your site or blog. But if you don’t understand at all, it’s better to just follow the existing code.

Cara Membuat Reading Time di Blog

The first step

Enter the font awesome code. The trick is to open blogger.com > Themes > Edit HTML > find the code <b:skin>> then copy the code below and paste it above the code <b:skin>.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Note:
If your blog template already has a font awesome code before or you don’t want to use it then this step can be skipped.

Second step

Look for the code ]]></b:skin> or </style> then Copy the css code below and paste it before the code ]]></b:skin> or </style>.

span.right {float:right;display:inline-block;padding:10px 5px;}

Catatan:
Untuk mengubah tulisan menjadi huruf kapital silahkan tambahkan kode css ini text-transform:uppercase; sebelum kode float.

Also Read:  How to Make Anti Adblock Notifications on Blogger

Third step

Find the code </body> then Copy the javascript code below then Paste it before the code </body>.

<script type='text/javascript'>
//<![CDATA[
// Reading Time Author: Michael Lynch http://michaelynch.com Licensed under the MIT license
!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>

Fourth step

Now we determine where to place the words “… MIN READ”, if my suggestion is to put it at the top under the article title or it can be in the post-info section such as the author’s name, post time, comments, and next to it when reading or it can be You set the placement yourself. To try it please Copy the code below then Paste it before the <div class=’post-info’> code or it can be placed anywhere you want.

<span class='right'><i class='fa fa-clock-o'/> <span class='eta'/> Read</span>

Then click Save theme and done!

Leave a Reply