How to add Reading Progress bar on Blogger.

Hello! Welcome to Tech Ankur.

If you are looking for How to add reading progress bar to blogger website then this post is just for you.

Nowadays many websites came with a reading progress bar that makes the website a little bit good and makes users easier to understand where they reached your website while reading an article.

By following this tutorial carefully you can easily understand how to add reading progress bar to your Blogger website!

The reading progress bar was made with CSS, HTML, Javascript, etc. So without wasting much time let's check how to add a reading progress bar in Blogger!

You can see the demo here⤵

View Demo

How to add a reading progress bar

Important!Before we start adding the XML code, I recommend that you create a backup of your current theme. If a problem arises, you can always restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin>or<style> and paste the following CSS Codes just above to it.

/* Reading Progress Bar Tech Ankur */
.pRs{border:.1px solid #eceff1;top:0;left:0;z-index:999;height:6px;display:-webkit-box;display:-ms-flexbox;display:flex;background:#e9ecef}
.pBar{top:0;left:0;z-index:2;border-radius:.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content;background:#A7D572;transition:width.6s ease}
.pSt{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:50px 50px}
.pAn{animation:AnPr 2s linear infinite}
.pSt1{background-image:linear-gradient(45deg,rgba(204,204,204,.15) 25%,transparent 25%,transparent 50%,rgba(204,204,204,.15) 50%,rgba(204,204,204,.15) 75%,transparent 75%,transparent);background-size:50px 50px}
.drK .pBar{background:#41B375}
.drK .pSt{background-image:linear-gradient(45deg,rgba(255,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(255,0,0,.15) 50%,rgba(255,0,0,.15) 75%,transparent 75%,transparent);background-size:50px 50px}
.drK .pRs{border:1px solid #252525;background:#1e1e1e}

If your template supports dark mode then change drK with your template dark mode class, if your template did not support dark mode then keep it default!.

Step 6:Now add the following JavaScript just below the <header> tag.

<div class='pRs'><div class='pBar pSt pAn' id='progBar'></div></div>

Step 7:Copy and paste the below code just above </body> closing tag.

<script>/*<![CDATA[*//* Reading progress bar JS Tech Ankur */ 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("progBar").style.width = scrolled + "%";} /*]]>*/</script>

Step 8: Then Save

That's done!

If you encounter any problem, do not hesitate to contact us

Copyright:
Tech Ankur

Go to Link