Cara Menampilkan Keterangan Waktu dari Artikel yang Dikunjungi

Kreativitas dalam dunia Blogger tidak akan pernah habis jikalau kita membahasnya, ada banyak tampilan yang keren untuk mendesign tampilan Blog, dari yang mulai sederhana hingga yang terlihat indah dan terkesan Premium. Banyak para Developer templated blog yang terus berkreasi menyajikan tampilan templated yang indah dan bahkan tidak kalah bagusnya dengan templated Premium buatan Blogger Luar negri.

Pernah aku mengunjungi salah satu blog luar negri ketika mengunjungi blognya dan membuka salah satu postingannya ada yang cukup unik menurut aku adalah terdapat Reading Timer diatas postingannya, jadi Plugin Reading timer ini akan otomatis bekerja ketika pengunjung mulai membuka postingan yang ada diblog tersebut, cukup unik dan menarik menurut saya.

Saya coba cari tahu bagaimana membuatnya apakah mampu di gunakan di semua templated Blogger, hasilnya aku menemukan Plugin Reading Timer ini yang dibuat oleh teman Blogger Michael Lynch, bagi teman yang mau mencobanya mari kita simak bersama Cara Menampilkan Keterangan Waktu dari Artikel yang Dikunjungi.

Langkah Pertama

Silahkan teman salin aba-aba CSS dibawah ini lalu letakkan sebelum aba-aba ]]></b:skin> atau </style>.

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

Langkah Ke Dua
Silahkan teman salin aba-aba Javascript ini lalu letakkan sebelum aba-aba </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 Ke Tiga
Silahkan teman salin aba-aba HTML ini dan letakkan bebas dimana saja dan tidak keluar dari markup post body.

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

Perhatikan cara penerapan kodenya, jikalau sudah selesai silahkan SAVE.

Cara Menampilkan Keterangan Waktu dari Artikel yang Dikunjungi ini menggunakan font awesome jadi pastikan sudah terpasang di template blog sobat, namun jikalau belum silahkan salin aba-aba link CSS font awesome ini lalu letakkan sebelum aba-aba </head>.

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

Result

SELESAI, selamat mencoba