Cara Membuat Read Time di Bawah Judul Postingan Blog
Untuk membuat pembaca memiliki estimasi waktu saat membaca artikel di blog kita, maka kita bisa membuat keterangan berapa total waktu yang dibutuhkan pengunjung untuk menyelesaikan membaca dari awal hingga akhir.
Keterangan waktu yang diberikan pun harus otomatis mengikuti jumlah kata dalam artikel. Sehingga setiap artikel tentu memiliki estimasi total waktu baca yang berbeda-beda.
Nah dikesempatan kali ini, saya akan berbagi cara membuat read time otomatis di blogger dengan mudah.
Cara Memasang Read Time Otomatis di Blog
Pertama:
- Buka Dashboard Blogger
- Pilih Menu Tema
- Pilih Edit HTML
Selanjutnya, cari dan letakan kode CSS di bawah ini sebelum ]]></b:skin>
span.right {text-transform:uppercase;float:right;display:inline-block;padding:10px 5px;}
Kedua, letakan kode Javascript di bawah ini sebelum </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:185,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>
Ketiga, simpan kode pemanggil di bawah ini, dan sesuaikan dengan template yang Anda gunakan.
<span class='right'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 20C16.4 20 20 16.4 20 12S16.4 4 12 4 4 7.6 4 12 7.6 20 12 20M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12.5 7V13H7V11.5H11V7H12.5Z" />
</svg> <span class='eta'/> Read</span>
Klik simpan dan lihat hasilnya.
Catatan:
- Kode right yang di tandai di kode CSS adalah perintah untuk menempatkan tampilan estimasi waktu baca di sebelah kanan. Silahkan sesuaikan dengan template yang Anda gunakan. Contoh seperti di blog ini, kode pemanggilnya saya tempatkan di sisi kiri dekat post author. Maka Anda tinggal mengganti right menjadi left.
- 185 pada kode Javascript memiliki nilai jumlah kata yang di baca dalam waktu satu menit.
- Kode yang ditandai warna kuning pada kode pemanggil adalah icon SVG. Silahkan sesuaikan dengan keinginan. Apabila ingin menghapus kode SVG-nya, maka hapus kode pembungku <svg> sampai </svg>
Setiap template memiliki perbedaan struktur, oleh karena itu pelajari terlebih dahulu tempat terbaik untuk menyimpan read time otomatis ini.
Sebagai contoh, penempatan terbaik kode pemanggil read time pada template viomagz adalah di dalam area kode berikut.
<div class='post-info info-3'>
Maka jadinya akan seperti di bawah ini.
<div class='post-info info-3'>
<b:include data='post' name='postauthorinfo'/>
<span class='right'><span class='eta'/> total read time</span>
</div>
Dan hasilnya bisa Anda lihat persis di bawah judul artikel ini, atau silahkan lihat gambar di bawah ini.
Semoga bermanfaat.
Posting Komentar