Home  ›  Blogging

Cara Memasang Read Time Otomatis di Blogger atau Blogspot

"Cara Memasang Read Time Otomatis di Blogger atau Blogspot"

2 min read
Cara Memasang Read Time Otomatis di Blogger atau Blogspot

Membuat Read Time atau waktu membaca di Blogger atau Blogspot sangatlah mudah kalian cukup menggunakan Javascript aja. 

Dengan adanya widget ini tentu akan memberi gambaran berapa lama waktu pengunjung untuk membaca artikel yanv kita tulis. 

Fungsi lainnya itu adalah mengurangi boute rate pada blog kalian ya, ditambah lagi template kalian akan menjadi lebih user frendly. 

Boute rate ini seperti kalian lihat seperti blog ini demo nya, jadi untuk tutorial kali ini saya tidak akan kasih demo.


Cara Memasang Reading Time Otomatis di Blogger atau Blogspot

Bagaimana cara membuat redinh time otomatis di Blogger atau Blogspot berikut ini adalah tutorial nya.


Perhatikan Struktur PostBody

Langkah pertama yang kalian harus perhatikan adalah struktur PostBody pada halaman seperti ini adalah kode nya  <b:includable id='postBody' var='post'> pada template kalian masing - masing. 

Untuk sederhana nya maka kode tersebut akan seperti dibawah ini :

        <b:includable id='postBody' var='post'>
          <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
            <data:post.body/>
          </div>
        </b:includable>

Yang perlu diperhatikan pada kode ini adalah pada bagian <data:post.body/> perlu kalian ketahui kalau kode ini hanya bisa menggunakan tag div yaitu  .post-body dan masih .entry-content.

Nah untuk tag div ini akan kita gunakan pada javascript nanti. 


Javascript Membuat Reading Time Otomatis di Blogger atau Blogspot

Dari struktur halaman postingan diatas maka javascript reding time nya akan seperti dibawah ini :


<script>
/*<![CDATA[*/
function get_text(el) {ret = ""; var length = el.childNodes.length; for(var i = 0; i < length; i++) {var node = el.childNodes[i]; if(node.nodeType != 8) {ret += node.nodeType != 1 ? node.nodeValue : get_text(node);} } return ret;} var words = get_text(document.querySelector('.post-body')); var count = words.split(' ').length; var avg = 185; var counted = count / avg; var maincount = Math.round(counted); document.querySelector(".readTime").innerHTML = maincount + " min read";
/*]]>*/  
</script>

Keterangan :

  1. Kode  .post-body ini bisa kalian ubah dengan struktur PostBody milik template kalian
  2. Angka 185 adalah jumlah angka yang akan dihitung dalam permenitnya
  3. Untuk kode  .redingTime adalah pemanggil Reding Time


Memanggil Reading Time

Setelah memasang javascript maka kalian harus memanggil nya menggunakan kode dibawah ini agar bisa berfungsi. Untuk meletakkan reding time ini sebaiknya ditaruh antara post author atau data published.

Untuk kode nya sendiri maka akan seperti dibawah ini 

<b:if cond='data:view.isPost'><span class='readingTime'><span checkelem='11' class='separatorReadtime'>&#183;</span><span class='readTime' id='readTime'/></span></b:if>

Apabila kalian ingin menampilkan kode hanya dalam postingan maka dimodifikasi seperti ini


<b:if cond='data:view.isPost'><span class='readingTime'><span checkelem='11' class='separatorReadtime'>&#183;</span><span class='readTime' id='readTime'/></span></b:if>

Letakan kode tersebut diantara <b:includable id='postHeader' var='post'> jika ingin meletakan di dalam post meta. 


Mengatur Tampilan Reading Time

Apabila kalian ingin memodifikasi tampilan reding time inu bisa kalian gunakan dengan CSS yang ada di bawah ini 

.readingTime{display:inline-block;padding:0;margin:0 0 0 1rem}
.readingTime span{display:inline-block;float:left}
.separatorReadtime{font-size:30px;display:inline-block;padding:0 .35rem}

Selanjutnya kalian tinggal save template kalian. 

Widget Reading Time Tidak Tampil?

Bila telah menerapkan langkah-langkah di atas begitu saja dengan tidak cermat, lalu ternyata widget Reading Time tidak tampil alias not working at all? Maka dapat dipastikan 2 hal ini yang menjadi kendalanya.

Kesatu, bahwa kode <data:post.body/> masih dibungkus oleh tag div yang lain. Kedua, tag div pada template Anda berbeda dengan tag div yang membungkus <data:post.body/>, yang mana tag tersebut digunakan pada JavaScipt widget Reading Time.

Dalam hal ini, penting untuk melihat kembali susunan struktur template. Mengingat setiap template html Blogger tersusun dengan kombinasi tag dan kondisi yang berbeda-beda.

Akhir Kata

demikian, sekian dan terima kasih!

Post a Comment