Cara Membuat Keterangan Waktu Membaca Artikel di Blog - Dilihat dari judul yang kalian baca pastinya terlihat unik kan, nah pada artikel kali ini saya akan berbagi tutorial cara membuat keterangan waktu membaca artikel yang sedang dibaca. Widget ini dibuat oleh Michael Lynch yang difungsikan untuk memperkirakan waktu yang dibutuhkan untuk membaca sebuah artikel didalam sebuah blog.
Baca Juga : Cara Mudah Membuat Sitemap Berbentuk Tabel di Halaman Blogger
Untuk memulai membuat widget keterangan waktu membaca diartikel blog, silakan kalian ikuti langkah-langkah nya dibawah ini.
Karena widget ini menggunakan font awesome, kalian harus menambahkan link css font awesome dan letakkan tepat diatas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>Jika kalian sudah memasang font awesome lewati saja langkah ini.Langkah selanjutnya masuk ke Template > Edit Template letakkan kode CSS berikut tepat sebelum kode ]]></b:skin> atau di atas kode </style>
span.right {float:right;display:inline-block;padding:10px 5px;}Kemudian tambahkan kode Javascript berikut ini tepat sebelum 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>Langkah yang terakhir tambahkan kode dibawah ini dimana saja atau tepatnya didalam markup post body sebagai parent dari tulisan.
<span class='right'><i class='fa fa-clock-o'/> <span class='eta'/></span>Kemudian Simpan Template dan lihat hasilnya.
Untuk tampilannya kalian bisa mengedit-edit nya lagi sesuai dengan selera kalian. Nah gimana sangat mudah bukan. Sekian tutorial Cara Membuat Keterangan Waktu Membaca Artikel di Blog. Terima kasih sudah membaca artikel ini, Semoga bermanfaat.
Sumber : Arlina Design
