Cara Menambah Widget Estimated Reading ( Perkiraan Waktu Baca ) di Blogger

RahmanCyber.NET | Blogger - Hey Sob... mungkin postingan seperti ini tergolong baru ya.. karena saya sendiri enggak menemukan di mesin pencarian Cara menambah Estimated Post Reading di Blogger, kebanyakan adalah wordpress yang notabene self hosted. 

 

{getToc} $title={Table of Contents}

 

Kalo di Platform blog semacam blogger ini, saya pernah menemuinya di Medium. Jadi disana setiap postingan ada Widget "Estimasi Waktu Bacanya" menarik juga saya rasa ketika ini bisa dipraktekkan di Blogger.

 

Lalu bagaimana sih cara menambahkan Estimated Reading Widget di Blogger? Disini kita bahas dan kamu bisa langsung praktekin di blogmu... dengan catatan "Blogmu berbasiskan Blogger"

 

 

 

 

 

Oke, ternyata memberi estimated post reading di blogger itu possible dan tidak perlu juga kita self-hosting. Saya baru dapatkan dari github. 

 

 

 

Kamu mungkin tahu tentang Medium.com?nah estimated post reading ini adalah salah satu fitur kerennya! - Yup Perkiraan Waktu Membaca Posting!

 

 

 

 

Widget Perkiraan waktu membaca mendorong pengguna untuk membaca postingan blog karena dia tau, berapa waktu kira kira yang dihabiskan untukmenyelesaikan membaca, hal ini pun juga dapat membangun loyalitas, dan mengurangi rasio pentalan / bounce rate. Sepertinya blog kalian bakalan menjadi lebih terlihat professional.

Pada artikel ini, kita akan menunjukkan cara menambahkan dan menampilkan perkiraan waktu membaca posting dengan mudah di posting blogger milik sobat. Bisa dipraktekkan di Template template pada umumnya.

Haruskah menambahkan perkiraan waktu membaca posting ke blogger?

 

 

Inilah pertanyaan pertama yang muncul di benak kita ketika berpikir untuk menambahkan waktu membaca posting ke posting blogger. 

 

Jawaban sederhananya adalah - Ya. !

 

Saat kita memulai membuat postingan blog baru, target kita adalah meningkatkan audiens yang membaca postingan yang telah kita buat. Namun, penting juga untuk mendapatkan kepercayaan dan meningkatkan interaksi pengguna di blog kita. Untuk itu perkiraan waktu Membaca posting blogger dapat memainkan peran penting. 

 

Singkatnya, fitur waktu membaca membantu

•     Untuk mendapatkan kepercayaan.
•     Untuk mengurangi rasio pentalan.
•     Untuk meningkatkan keterlibatan pengguna.

 

 

 

Bagaimana Cara Menambahkan Perkiraan Waktu Membaca Posting ke Blogger?

 

 

Konsep perkiraan waktu pasca membaca sangat sederhana. Anggaplah rata-rata orang membaca 200 kata per menit. Jadi, waktu membaca artikel 1400 kata adalah banyaknya kata dibagi 200 (1400/200), yaitu 7 menit. Tentu saja, Kita tidak perlu menghitung waktu baca semua artikel secara manual. Ada plugin jquery sederhana yang akan melakukan pekerjaan ini secara efisien.

Langkah 1: Tambahkan file JQuery ke Blogger

Sebagian besar dari para blogger mungkin sudah menginstal file JQUERY ini di template. Jadi tidak perlu lagi menambahkannya... tapi...

 

Jika tidak, buka Tema> Icon Segitiga bawah >  Edit HTML> Search for </head> dan tambahkan kode berikut ini tepat di atasnya. Jangan lupa untuk membackup template Anda.

<script type='text/javascript'>//<![CDATA[  
    if (typeof(jQuery) == 'undefined') {  
 //output the script (load it from google api)  
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}  
       //]]>  
       </script>

 

 

Ini adalah plugin jquery. Jadi karena kode utama memakai jquery.. maka ini adalah file yang wajib ada!.

 

 

Langkah 2: Menemukan posisi yang tepat untuk memanggil fungsi yang menampilkan waktu membaca posting

Sekarang kita perlu mencari tempat untuk menunjukkan waktu membaca. Dalam kebanyakan kasus, menambahkan fitur waktu membaca tepat di bawah judul posting sangat cocok. 

 Sekali lagi, lokasinya tergantung pada template yang kamu miliki. Kalau di template ini, saya menambahkannya tepat di bawah <div class = 'post-header-line-1'>

 

 

 

<span class="eta" id="etawrap">
</span>

 

 

Langkah 3: Menambah CSS tampilan waktu membaca

Panggilan fungsi menampilkan teks biasa dengan waktu membaca. Kalian dapat menyesuaikannya untuk meningkatkan perhatian pengguna. Cari]]> </ b: skin> dan tempel kode css berikut tepat di atasnya.

 

 

#etawrap{font-weight:bold;color:#FF0000;}

 

 

 

Langkah 4: Menambahkan Plugin JQuery ke Blogger

Langkah final.... Setelah Anda selesai menambahkan beberapa bagian diatas, langkah selanjutnya sangat sederhana. Kita akan menambahkan skrip yang menampilkan perkiraan waktu membaca posting. Silahkan Cari </body> dan tempel kode berikut di atasnya.

 

 

 

 

 

<script type='text/javascript'>  
/*!  
Name: Reading Time  
Dependencies: jQuery  
Author: Michael Lynch  
Author URL: http://michaelynch.com  
Date Created: August 14, 2013  
Date Updated: June 10, 2014  
Licensed under the MIT license  
*/  
//<![CDATA[  
;(function(a){a.fn.readingTime=function(r){if(!this.length){return this}var h={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:true,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null};var i=this;var c=a(this);i.settings=a.extend({},h,r);var e=i.settings.readingTimeTarget;var d=i.settings.wordCountTarget;var k=i.settings.wordsPerMinute;var p=i.settings.round;var b=i.settings.lang;var l=i.settings.lessThanAMinuteString;var o=i.settings.prependTimeString;var f=i.settings.prependWordString;var g=i.settings.remotePath;var n=i.settings.remoteTarget;if(b=="it"){var m=l||"Meno di un minuto";var q="mins"}else{if(b=="fr"){var m=l||"Moins d'une minute";var q="mins"}else{if(b=="de"){var m=l||"Weniger als eine Minute";var q="mins"}else{if(b=="es"){var m=l||"Menos de un minuto";var q="mins"}else{if(b=="nl"){var m=l||"Minder dan een minuut";var q="mins"}else{var m=l||"< 1 Min";var q="mins"}}}}}var j=function(y){var v=y.trim().split(/\s+/g).length;var u=k/60;var s=v/u;if(p===true){var x=Math.round(s/60)}else{var x=Math.floor(s/60)}var w=Math.round(s-x*60);if(p===true){if(x>0){a(e).text(o+x+" "+q)}else{a(e).text(o+m)}}else{var t=x+":"+w;a(e).text(o+t)}if(d!==""&&d!==undefined){a(d).text(f+v)}};c.each(function(){if(g!=null&&n!=null){a.get(g,function(s){j(a("<div>").html(s).find(n).text())})}else{j(c.text())}})}})(jQuery);  
//]]>  
</script>  
<script type='text/javascript'>  
$(function() {  
$(&#39;.post-body&#39;).readingTime();  
});  
</script>

 

Notice :

Pada script diatas menggunakan hitungan

wordsPerMinute:270 

 

Artinya : Jika kata menjapai 270, maka akan dihitung 1 menit, begitupun setelahnya... sehingga menghasilkan hitungan estimasi waktu bacanya.

 

Misal di Blog kamu ternyata dalam konten tulisan, ada sebanyak 548 Kata... nah, Maka ini sudah masuk hitungan 3 Menit... karena ada kelebihan 8 kata.

 

Gitu...

 

 

 

Yey! sudah selesai.. 

Kode sumber diambil dari Github dengan akun pembuatnya langsung Michael Lynch

Oh iya.. kamu juga bisa modifikasi di Tata Letak, dengan menambahkan widget html..

seperti ini..

Nah itulah cara memberikan Gadget Estimated Reading Post di Blogger yang biasanya hanya bisa di Medium dan Hosting Pribadi...

 

 

Penutup

 

Sebelum saya akhiri....Saya punya pertanyaan singkat: Apakah menurut Anda hal itu akan meningkatkan keterlibatan pengguna dan membantu mengurangi rasio pentalan? Tolong beri tahu saya pendapat Anda di bagian komentar. 

 

Selamat Ngeblog! Moga Artikel Widget Perkiraan Waktu Baca ini bermanfaat...

Boleh Share, sertakan Sumber. Hargailah penulis.. 

F.N.A-RED