How to add a reading progress bar in blogger website.(2020 updated)

Hello bloggers, now you can easily add a reading progress bar in blogger website just applying simple coding in the theme section.

How to add a reading progress bar in blogger website.(2020 updated)
TECHYLEAF.IN

You don't need any minimised javascript or any third-party applications to apply reading progress bar in blogger. Unnecessary javascript cause slow down your website speed.

Here we provide you with the universal code to add a progress bar in any blogger blog website. This is just a similar version as you see in a WordPress website.

A reading progress bar in website help user understand the length of any post and grab attention to your website. It also helps in attracting user interaction and eventually reduce your bounce rate.

Steps to add a Reading progress bar in blogger

ATTENTION: Before proceeding any of these steps given below make sure to take a back up 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 three steps to add the reading progress bar to your blogger website.
STEP 1
Copy the below javascript and paste it above the closing body tag  </body>

<script>window.onscroll = function() {myFunction()};function myFunction(){var winScroll = document.body.scrollTop || document.documentElement.scrollTop;var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;var scrolled = (winScroll / height) * 100;document.getElementById(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;}</script>  code-box
STEP 2
After that copy the below CSS and paste it above the ]]></b:skin>

.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152} code-box
STEP 3
Paste the HTML code just below the <body> tag (In some template this tag would be adjoined with class or schema)

<div class='progress-container'><div class='progress-bar' id='myBar'/></div>  code-box

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

you can do further customisation if you want like change the color of the progress bar.
just change the colour code in the step-2 background:#F86152 and replace it with your colour code.

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

conclusion:

Follow the above steps with a little cautious and you are good to go. 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.

0/Post a Comment/Comments

If you have any doubt related to the above post , ask in the comment section

Previous Post Next Post