Cara Menampilkan Keterangan Waktu dari Artikel yang Dibaca
Snippet
iNDZGN - Hallo kawan blogger, pada kesempatan kali ini saya akan memberikan sedikit tutorial mengenai cara menampilkan keterangan waktu dari artikel yang dibaca. Tutorial ini saya kutip dari Blognya Arlina Design.
Tutorial widget ini cukup menarik yaitu Reading Time. Sebuah plugin yang dibuat oleh Michael Lynch yang berfungsi untuk menampilkan perkiraan berapa waktu yang dibutuhkan untuk membaca tulisan artikel di dalam konten tertentu.
Langsung saja kita praktekan, silahkan ikuti tutorial yang saya jelaskan.
Widget ini menggunakan Font Awesome, jika di blog kamu belum ada bisa tambahkan kode CSS di bawah ini, namun jika sudah ada abaikan saja CSS di bawah ini.
Tambahkan CSS ini diatas </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>1. Login ke akun Blogger> Buka Template Editor> Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>
span.right {float:right;display:inline-block;padding:10px 5px;} <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 yang ditandai merupakan pengaturan dari Widget reading Time.
3. Tambahkan kode di bawah ini bebas dimana saja selama masih dalam markup post body sebagai parent dari tulisan
<span class='right'><i class='fa fa-clock-o'/> <span class='eta'/></span>
Untuk tampilan, bisa kamu kreasikan sendiri.
Demikian informasi terkait Cara Menampilkan Keterangan Waktu dari Artikel yang Dibaca. Jangan lupa share juga artikel ini. Terimakasih.
