How to add estimated reading time to blogspot posts. Blogger tips and tricks by peak Fiction
How to Add Estimated Reading Time to Blogspot Posts - Learn the step-by-step process and enhance your Blogspot content with Peak Fiction's comprehensive guide.
In this article, I will guide you how to add reading time to articles on Blogger or other platforms such as Wordpress. Showing estimated reading times for articles is a good idea. It gives your blog readers a specific idea of how much time they need to spend reading that article.
How to add estimated reading time to blogspot posts?
We will use a simple javascript to do this.
Step 1: Log in to the Blogger admin page > Themes > Edit HTML .
Insert the following code before the </head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
var txt = $(".post-full-content")[0].textContent;
var wordCount = txt.replace(/[^\w ]/g, "").split(/\s+/).length;
var readingTimeInMinutes = Math.floor(wordCount / 228) + 1;
var readingTimeAsString = readingTimeInMinutes + " reading minutes";
$('article .reading-time').html(readingTimeAsString);
});
</script>
Step 2: Add the CSS before ]]></b:skin>.
.reading-time :before {
content : 'Reading time:' ;
margin-right : 3px ;}
Insert the code below where you want to display the reading time.
<div class="reading-time"></div>
Save the Template and view the results. You can adjust some CSS to suit your blog.
This simple trick will help you easily add estimated reading time to your blogspot posts. Good luck!