Cara Memasang/ Menambahkan Reading Time (... Min Read) di Blog

Mungkin di antara anda sekalian pernah menemukan beberapa blog atau situs web yang memasang fitur ini di situs-situs tersebut. Tampilan fitur Reading Time ini biasanya muncul di bawah judul postingan, entah itu di halaman homepage blog atau pun di halaman postingan. Letak fitur ini umumnya berada di samping profil admin dan bertuliskan 3 Min Read. Angkanya sendiri bisa 1, 2, 3, 4, 5 dan seterusnya tergantung perkiraannya. 

Pada awalnya, saya mengira bahwa maksud fitur ini menunjukkan bahwa artikel tersebut barusan dibaca oleh pengunjung sekitar beberapa menit yang lalu. Ternyata saya salah, fitur reading time ini berfungsi untuk menampilkan perkiraan atau rata-rata waktu membaca yang dibutuhkan oleh pengunjung ketika membaca artikel tersebut. Dengan memasang fitur ini, kita berharap agar pembaca bertahan lebih lama saat membaca artikel tersebut. 

Jika pengunjung menghabiskan waktu lebih lama untuk membaca postingan tersebut, maka nilai positifnya akan bisa mengurangi nilai bounce rate (rasio pantulan) blog kita. Selain itu, keberadaan fitur ini juga akan membuat tampilan blog tampak lebih menarik sehingga pengunjung betah untuk berlama-lama membaca artikel-artikel blog kita. Jika blog semakin populer dan dikunjungi banyak orang, maka bisa dibayangkan manfaat yang akan kita dapatkan nantinya. 

Contoh tampilan fitur reading time

Bagi anda yang ingin memasang fitur ini di blog anda, silahkan simak dan ikuti tutorial pemasangannya di bawah ini.

1. Buka akun blogger anda.

2. Pilih menu thema dan klik edit html.

3. Cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya.

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

4. Selanjutnya cari kode </body> dan letakkan kode berikut ini di atasnya.

<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>

5. Terakhir adalah penempatan area untuk kemunculan fitur ini. 

Anda bisa memasangnya misal di bawah judul artikel atau sejajar disamping profil penulis dan tanggal posting (post info). Setiap template biasanya memiliki kode yang berbeda sehingga anda mesti memahaminya sendiri. Jika sudah, silahkan gunakan kode berikut ini:

<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>

Contoh penempatan di dalam template

6. Simpan kembali template anda. 

Silahkan anda bisa cek dan lihat hasilnya. Jika tampilannya kurang rapi, anda bisa menambahkan margin atau size pada bagian CSS atau style ikon Svg-nya. 

Demikianlah Cara Memasang fitur Reading Time di Blogger. Semoga bermanfaat. Sumber

 

Lokasi:

Berbagi :