Cara Menampilkan Read Time Otomatis Di Blogspot

Daftar isi [Tampil]
Cara Menampilkan Read Time Otomatis Di Blogspot - Dengan membuat read time otomatis ( perkiraan waktu membaca ) di blogger dengan mudah, akan saya rangkumkan dikesempatan kali ini dengan penjelasan beserta tips dan tutorialnya bisa sobat dapat praktekkan di blog milik sobat tersebut.
Cara Menampilkan Read Time Otomatis Di Blogspot - Dengan membuat read time otomatis ( perkiraan waktu membaca ) di blogger dengan mudah, akan saya rangkumkan dikesempatan kali ini dengan penjelasan beserta tips dan tutorialnya bisa sobat dapat praktekkan di blog milik sobat tersebut.
Menampilkan perkiraan waktu untuk membaca ( read time ) secara otomatis di blogspot, bisa dapat dilakukan secara mudah oleh sobatku semuanya dengan memakai javascript, widget ini dapat memberikan gambaran ke pengunjung yang ingin membaca tulisan diartikel blog sobat tersebut, dengan berapa lama pengunjung akan menghabiskan waktunya untuk membaca artikel.

Kegunaan widget read time otomatis blogspot menjadi sebuah hipnopsis agar membuat para pengunjung yang lagi membaca bisa bertahan sedikit lebih lama pada saat akan membaca sebuah artikel / konten diblognya sobat.

Nah, itulah beberapa fungsi read time blogpsot yang dapat saya rangkumkan dan jelaskan seperti diatas, jadi dibawah ini akan saya berikan juga berupa tutorial dan langkah-langkah untuk memasang read time otomatis di blogger / blogspot dan sobat dapat mempraktekkan setiap langkah-langkah yang akan saya berikan dibawah, berikut.

Cara Pasang Read Time Otomatis Di Blogger :
Jadi dibagian berikut, akan saya jelaskan cara menerapkan widget auto read time blogspot / blogger dengan mudah.

1. Bagian Struktur PostBody
Hal yang pertama sekali, sobat harus perhatikan ialah dengan melihat dibagian struktur postbody dibagian struktur halaman postingan postbody ( b:includable id='postBody' var='post'> ) di blog sobatku masing-masing tentunya.

Agar lebih jelasnya sobatku semuanya mengetahui, seperti ini lah kira-kira untuk struktur halaman PostBody template, sebagai berikut.

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

Yang harus sobat perhatikan dari kode seperti diatas ialah dibagian kode <data:post.body/> Hal ini bisa dilihat hanya ada satu kode tag div, yakni div class.post-body dan juga.entry-content.

Jadi, untuk selanjutnya akan kita pakai salah satunya saja di kode tag div class di javascript nantinya.

2. Menampilkan Estimasi Read Time Otomatis Blogspot Dengan Javascript
Tepat pada bagian dari struktur halaman postingan bagin atas, jadi sobat dapat melakukan penyusunan di javascript seperti dibawah.

  <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 :
- Dibagian dari kode tag .post-body di script bisa sobat ubah sesuai dengan struktur postbody ditemplate milik sobat masing-masing tentunya.
- Seperti terlihat di angka 185 merupakan jumlah perkata yang dijadwalkan sebagai estimasi dibaca permenitnya.
- Untuk bagian kode tag .readTime supaya dapat ditampilkan widget readtime tersebut pada blog sobatku semuanya.

3. Menampilkan Widget Reading Time
Dibagian ini, untuk sobatku semuanya, saatnya menampilkan widget read time dan lebih baik lagi widget ini dibuat bagian post meta, yakni disejajarkan dengan author,date published, maupun yang lainnya.

Supaya dapat menampilkan widget reading time, sobat salin kode tag seperti dibawah ini.

<div class='readingTime'><div class='readTime'</div></div>

Kalau mau sobat, widget read time otomatis di blog muncul hanya pada bagian halaman postingan saja, sobat dapat memakai kode tag seperti dibawah.
<b:if cond='data:view.isPost'><span class='readingTime'><span checkelem='11' class='separatorReadtime'>&#183;</span><span class='readTime' id='readTime'/></span></b:if>
Jadi, untuk sobatku, silahkan meletakkan kode tersebut dibagian <b:includable id='postHeader' var='post'>, kalau sobat mau menempilkan tepatnya dibagian post meta pada blognya sobatku.

Nah, itulah beberapa tips-tips dan tutorial beserta rangkuman yang dapat saya bahas dipostingan saya kali ini yaitu Cara Menampilkan Read Time Otomatis Di Blogspot, semoga bisa bermanfaat dan membantu, salam blogger indonesia, sekian dan terimakasih.

Post a Comment