Create Automatic Read Time on Blogger

We can easily display estimated reading time on blogger automatically using Javascript. This widget can more or less give readers an idea of how much estimated time it will take to read the content.

Create Automatic Read Time on Blogger

This blogger reading time widget is a kind of hypnosis to make readers last a little longer while reading blog content.

That roughly the function of reading time. The goal, of course, is that this features is about reducing percentage on the blog's bounce rate. In this case, the read time widget can be another additional applied technique in developing a blog to be user friendly.

Set Estimated Reading Time on Blogger Automatically

Here's how to implement the auto reading time on blogger.

Firts, please pay attention to the structure of the PostBody <b:includable id='postBody' var='post'> post page on each blogger.

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

To the code above is the <data:post.body/> in this case, the code is only wrapped in one div tag code, namely div class .post-body and .entry-content.

Next, use one of the div class tags in Javascript later.

Automatically With JavaScript

From the structure of the post page above, the JavaScript can be arranged as follows:

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

Description:

1. The .post.body tag code in the script can be changed according to the PostBody structure in each template.

2. The number 185 is the estimated number of words read per minute.

3. The .readTime code the calling tag for the reading time widget.

Calling the reading time widget

This widget is placed in the post meta section, which is parallel to the post author, date published and other. The calling code is like this.

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

Or, if the condition is only to display on the post page, then the code can be written like this.

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

Put the code in <b:includable id='postHeader' var='post'> if you want to put it in the post meta section.

Set Appearance Widget Using CSS

Final step, it would be a good idea to first set the appearance of the reading time widget with CSS.

• For example like this:

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

• Save the template

If you have implemented the steps above carelessly, then it turn out that the reading time widget doesn't appear. So it can be ascertained that these 2 thing are the obstacles.

1. That the code <data:post.body/> is still wrapped in another div tag.
2. The div tag in your template is different from the wrapping div tag <data:post.body/> which is the tag use in the JavaScript reading time widget.