Cara Menampilkan Keterangan Waktu dari Artikel yang Dikunjungi

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

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

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

Langkah Pertama

Silahkan sobat salin kode CSS dibawah ini lalu letakkan sebelum kode ]]></b:skin> atau </style>.

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

Langkah Ke Dua
Silahkan sobat salin kode Javascript ini lalu letakkan 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 Ke Tiga
Silahkan sobat salin kode 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, jika 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 jika belum silahkan salin kode link CSS font awesome ini lalu letakkan sebelum kode </head>.

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

Result

SELESAI, selamat mencoba