Cara Membuat Reading Time dengan Words Count di Blogger

Cara Membuat Reading Time dengan Words Count di Blogger

Sekarang banyak situs web yang sudah terdapat widget untuk menampilkan keterangan waktu untuk membaca. Tapi tidak semua situs menampilkan keterangan waktu karena sebagian saja.

Widget ini memang tidak memiliki fitur khusus seperti widget lainnya. Tapi akan sangat bermanfaat jika Anda sedang terburu-buru ingin keluar dan Anda dapat mengatur waktu untuk membaca beberapa artikel.


Cara Memasang Reading Time di Blogger


Seperti biasanya Anda login terlebih dahalu ke Blogger.


Menyimpan kode Reading Time

Pertama, silakan Anda salin atau copy kode dibawah ini. Lalu letakkan diatas </body>


<script type='text/javascript'>
//<![CDATA[
function readingTime(){var e=document.getElementById("post-body").innerText.trim().split(/[^\s]+/).length,t=Math.ceil(e/270);document.getElementById("entry-reading-time").innerText=+t+" min read"}readingTime();
//]]>
</script>

TypeNilaiKeterangan
Idpost-bodyMengambil isi teks artikel untuk melakukan perhitungan.
Angka270Kecepatan membaca setiap kata dan menampilkan keterangan waktu membaca.
Identry-reading-timeMerupakan tag untuk pemanggil widget Reading Time.


Menampilkan Widget Reading Time

Untuk kode pemanggilnya cukup singkat seperti berikut.


<span id='entry-reading-time'/>

Anda dapat meletakkannya pada pada post meta dan sejajarkan dengan date published. Sesuaikan dengan selera Anda sendiri.


Tambahan!


Jika memang menampilkan keterangan waktu untuk membaca tidak cukup. Coba juga untuk tambahan jumlah setiap kata isi artikel.


Menambahkan Widget Words Count

Letakkan sesuai dengan penyimpan kode Reading Time.


<script type='text/javascript'>
//<![CDATA[
function wordsCount(){var t=document.getElementById("post-body").innerText.split(/[^\s]+/).length;document.getElementById("entry-words-count").innerText="( "+t+" words )"}wordsCount();
//]]>
</script>

Untuk keterangan samakan dengan keterangan Reading Time.

Dan untuk kode pemanggilnya sama saja seperti kode pemanggil Reading Time. Hanya saja Reading Time menggunakan id pemanggil berikut entry-reading-time. Sedangkan Words Count sebagai berikut entry-words-count

Letakkan sejajar dengan widget Reading Time.


Hasil Akhir...

Sehingga untuk memanggilnya jadi seperti berikut.


<span id='entry-reading-time'/><span id='entry-words-count'/>

Anda tidak usah menambahkan min read atau words pada kode HTML tersebut. Karena saya sudah menambahkannya jadi tidak usah menambahkannya lagi.

Akhir kata..

Silakan Anda atur sendiri untuk tampilan Reading Time dan Words Count.

Post a Comment

1. Parse terlebih dahulu jika ingin memasukan kode (HTML, CSS, JS, DLL).
2. Gunakan <em>...</em>, untuk menampilkan kode Panjang-Pendek atau URL.
3. Dilarang memasukkan link aktif.

Previous Post Next Post