Cara Menampilkan Reading Time Pada Setiap Artikel di Blog

Dengan menambahkan fitur Reading Time ini sobat bisa tau perkiraan artikel sobat akan dibaca sampai selesai, semakin lama semakin bagus apalagi pengunjung mengunjungi halaman lain pada blog sobat ini juga bisa menurunkan bounce rate pada blog sobat.
Cara Menampilkan Reading Time Pada Setiap Artikel di Blog

Cara Menampilkan Reading Time Pada Setiap Artikel di Blog - Dengan menambahkan fitur Reading Time ini sobat bisa tau perkiraan artikel sobat akan dibaca sampai selesai, semakin lama semakin bagus apalagi pengunjung mengunjungi halaman lain pada blog sobat ini juga bisa menurunkan bounce rate pada blog sobat.

Baca Juga : 20 Cara Paling Efektif Menurunkan Bounce Rate Pada Blog

Reading Time ini juga tidak terlalu penting bagi blog tapi setidaknya akan menambah fitur saja pada blog sobat untuk disajikan oleh pengunjung, jadi buatlah pengunjungmu betah di blogmu sobat.

Oke langsung saja ke caranya..

Cara Menampilkan Reading Time Pada Setiap Artikel di Blog


Pertama, jika blog sobat belum dipasang Font Awesome silahkan pasang terlebih dahulu Blogger > Tema > Edit HTML copy kode dibawah ini pastekan diatas kode </head>

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

Catatan: Jika blog sobat sudah terdapat Font Awesome silahkan lewati langkah diatas

Kemudian copy kode dibawah ini dan pastekan tepat diatas kode </style> atau ]]></b:skin> 

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

Copy juga kode di bawah ini dan pastekan diatas kode </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>

Kode terakhir adalah penempatan reading timenya misalkan sobat terapkan diantara awal postingan copy kode dibawah ini dan pastekan sesuai selera sobat sendiri.

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

Jika sudah klik simpan.

Oke sekianyang bisa saya sampaikan tentang Cara Menampilkan Reading Time Pada Setiap Artikel di Blog Terma Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.