How to Add Reading Progress Bar In Blogger Template

Hello friends, are you thinking about to add a reading progress bar in your Blogger templates? Then, you can easily add a reading progress bar in your blogger website just by pasting some lines of code in your blogger template.

This tutorial covers all the necessary steps and codes that you have to implement in your blogger template to add a stylish reading progress bar in your blogger blog without a third-party tools. we published this article to show you how to add a reading progress bar in Blogger template. First of all, we would like to give some information about the Reading Progress bar.

~~Table of Content (toc)~~

What is reading progress bar?

Reading progress bar (also known as a Reading Meter) gives readers an idea of how long it would take to finish reading your blog post.

How reading progress bar works?

When the website visitors visits the website that add a reading progress bar they can see a line going front when scrolls down and going back when scrolls up it works with using some codes in your Blogger website.

If you want to add a reading progress bar in your Blogger template let's start without wasting the time...!

Follow the steps to add a Reading progress bar in blogger

Before proceeding with any of these steps given below to make sure to take a back-up of your theme in case you make a little mistake in implementing the code then you can easily back to the original state.

You need to follow these simple three steps to add a reading progress bar in your blgger blog

Copy the below javascript and paste it above the closing body tag </body>

<script>window.onscroll = function() {meroFunction()};function meroFunction(){var winScroll = document.body.scrollTop || document.documentElement.scrollTop;var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;var scrolled = (winScroll / height) * 100;document.getElementById("meroprogressbar").style.width = scrolled + "%";}</script>

After that copy the below CSS and paste it above the ]]></b:skin>

.mero-progresscontainer{width:100%;position:fixed;z-index:99}.mero-progressbar{height:5px;background:#F86152}

Paste the HTML code just bellow the <body> tag (In some templates this tag would be adjoined with class or schema, so search for only <body)

<div class='mero-progresscontainer mero-progressbar' id='meroprogressbar'/>

Now you completed all the necessary steps. Just save your theme and your reading progress bar is ready.

you can do further customization if you want like change the color of the progress bar.

just change the color code in step-2background:#F86152 and replace it with your color code. You can get the color codes (hex codes) from the HTML Color Codes

You can also change the size of your progress bar by changing height:5px to your preferred size.

How to show the progress bar in posts only?

If you want to show the progress bar only in the blog posts then you can use the blogger conditional tag in the above code.

Here, you can wrap the step1 and step 3 code with the conditional Tags and paste it above the </body> tag.

<b:if cond='data:view.isPost'> <--Insert code here --> </b:if>

conclusion:

Follow the above steps with a little caution and you can easily add the reading progress bar to your Blogger website. if you face any type of problem while doing this you can contact me through Email.

If you find this article helpful then you can share it with your blogger friend and tell your feedback in the comment section